fix(web): prevent connection rows from wrapping during removal

[MatthewFeroz]

What Changed

• Constrain saved-environment names to the available flex width and truncate overflow with an ellipsis.
• Apply the same single-line truncation to connection metadata, including long Windows SSH paths.

Why

When a connection removal starts, the action label grows from Remove or Disconnect to Removing… or Disconnecting…. That temporarily reduces the text column's available width. The connection name and metadata previously had no overflow constraint, so they could wrap and increase the row height—especially with Windows font metrics and long Windows paths.

min-w-0 lets the title participate correctly in flex shrinking, while truncate keeps both fields on one line and preserves the full text in the DOM. The action controls remain fixed-width and readable.

UI Changes

The evidence uses a 480px-wide desktop row, a Windows-style environment name/path, and the wider pending-removal controls.

Before:

After:

Scope and conventions

• This is a six-line, presentation-only web change with no contract, persistence, or connection-lifecycle changes.
• Desktop receives the fix because it renders the shared web settings component.
• Mobile uses its separate React Native connections screen and is unaffected.
• Below the existing sm breakpoint, the row already stacks its controls; this change preserves that responsive behavior.
• No documentation change is needed because user-facing behavior and terminology are unchanged.

Verification

• vp run --filter @t3tools/web typecheck
• vp lint apps/web/src/components/settings/ConnectionsSettings.tsx --report-unused-disable-directives
• vp fmt --check apps/web/src/components/settings/ConnectionsSettings.tsx
• git diff --check

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for the UI change
• No video is needed because there is no animation or timing change

Created with GPT-5.6-sol in the Codex harness.

---

Note

Low Risk
Presentation-only Tailwind class changes in the web settings UI; no connection logic, APIs, or persistence.

Overview
Saved connection rows in Connections settings no longer jump in height when Remove/Disconnect switches to the longer pending labels (Removing…, Disconnecting…).

In SavedBackendListRow, the environment title gets min-w-0 (so it can shrink inside the flex row) plus truncate, and the metadata line (SSH path, T3 Connect, etc.) gets truncate so both stay on one line with ellipsis instead of wrapping.

^{Reviewed by Cursor Bugbot for commit 7af5247. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Fix connection rows wrapping by truncating labels and metadata in SavedBackendListRow

Adds min-w-0 truncate to the environment label <h3> and truncate to the metadata <p> in ConnectionsSettings.tsx. This stops long text from overflowing and breaking the row layout during removal.

^{Macroscope summarized 7af5247.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 9a38b7d0-8624-4816-bc71-f9be6c89d827

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

_{Comment @coderabbitai help to get the list of available commands.}

[macroscopeapp]

Approvability

Verdict: Approved at 0f01aa8

Macroscope's review found this PR approvable — This is a narrowly scoped web UI fix that adds flex shrinking and single-line truncation to existing connection labels and metadata. It affects only row presentation; connection actions, state, persistence, and APIs are unchanged.

^{You can add or adjust custom eligibility rules. Learn more.}

[MatthewFeroz]

What Changed

• Constrain saved-environment names to the available flex width and truncate overflow with an ellipsis.
• Apply the same single-line truncation to connection metadata, including long Windows SSH paths.

Why

When a connection removal starts, the action label grows from Remove or Disconnect to Removing… or Disconnecting…. That temporarily reduces the text column's available width. The connection name and metadata previously had no overflow constraint, so they could wrap and increase the row height—especially with Windows font metrics and long Windows paths.

min-w-0 lets the title participate correctly in flex shrinking, while truncate keeps both fields on one line and preserves the full text in the DOM. The action controls remain fixed-width and readable.

UI Changes

The evidence uses a 480px-wide desktop row, a Windows-style environment name/path, and the wider pending-removal controls.

Before:

After:

Scope and conventions

• This is a six-line, presentation-only web change with no contract, persistence, or connection-lifecycle changes.
• Desktop receives the fix because it renders the shared web settings component.
• Mobile uses its separate React Native connections screen and is unaffected.
• Below the existing sm breakpoint, the row already stacks its controls; this change preserves that responsive behavior.
• No documentation change is needed because user-facing behavior and terminology are unchanged.

Verification

• vp run --filter @t3tools/web typecheck
• vp lint apps/web/src/components/settings/ConnectionsSettings.tsx --report-unused-disable-directives
• vp fmt --check apps/web/src/components/settings/ConnectionsSettings.tsx
• git diff --check

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for the UI change
• No video is needed because there is no animation or timing change

Created with GPT-5.6-sol in the Codex harness.

---

Note

Low Risk
Presentation-only Tailwind class changes in the web settings UI; no connection logic, APIs, or persistence.

Overview
Saved connection rows in Connections settings no longer jump in height when Remove/Disconnect switches to the longer pending labels (Removing…, Disconnecting…).

In SavedBackendListRow, the environment title gets min-w-0 (so it can shrink inside the flex row) plus truncate, and the metadata line (SSH path, T3 Connect, etc.) gets truncate so both stay on one line with ellipsis instead of wrapping.

^{Reviewed by Cursor Bugbot for commit 7af5247. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Fix connection rows wrapping by truncating labels and metadata in SavedBackendListRow

Adds min-w-0 truncate to the environment label <h3> and truncate to the metadata <p> in ConnectionsSettings.tsx. This stops long text from overflowing and breaking the row layout during removal.

^{Macroscope summarized 7af5247.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 9a38b7d0-8624-4816-bc71-f9be6c89d827

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

_{Comment @coderabbitai help to get the list of available commands.}

[macroscopeapp]

Approvability

Verdict: Approved at 0f01aa8

Macroscope's review found this PR approvable — This is a narrowly scoped web UI fix that adds flex shrinking and single-line truncation to existing connection labels and metadata. It affects only row presentation; connection actions, state, persistence, and APIs are unchanged.

^{You can add or adjust custom eligibility rules. Learn more.}

[MatthewFeroz]

What Changed

• Constrain saved-environment names to the available flex width and truncate overflow with an ellipsis.
• Apply the same single-line truncation to connection metadata, including long Windows SSH paths.

Why

When a connection removal starts, the action label grows from Remove or Disconnect to Removing… or Disconnecting…. That temporarily reduces the text column's available width. The connection name and metadata previously had no overflow constraint, so they could wrap and increase the row height—especially with Windows font metrics and long Windows paths.

min-w-0 lets the title participate correctly in flex shrinking, while truncate keeps both fields on one line and preserves the full text in the DOM. The action controls remain fixed-width and readable.

UI Changes

The evidence uses a 480px-wide desktop row, a Windows-style environment name/path, and the wider pending-removal controls.

Before:

After:

Scope and conventions

• This is a six-line, presentation-only web change with no contract, persistence, or connection-lifecycle changes.
• Desktop receives the fix because it renders the shared web settings component.
• Mobile uses its separate React Native connections screen and is unaffected.
• Below the existing sm breakpoint, the row already stacks its controls; this change preserves that responsive behavior.
• No documentation change is needed because user-facing behavior and terminology are unchanged.

Verification

• vp run --filter @t3tools/web typecheck
• vp lint apps/web/src/components/settings/ConnectionsSettings.tsx --report-unused-disable-directives
• vp fmt --check apps/web/src/components/settings/ConnectionsSettings.tsx
• git diff --check

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for the UI change
• No video is needed because there is no animation or timing change

Created with GPT-5.6-sol in the Codex harness.

---

Note

Low Risk
Presentation-only Tailwind class changes in the web settings UI; no connection logic, APIs, or persistence.

Overview
Saved connection rows in Connections settings no longer jump in height when Remove/Disconnect switches to the longer pending labels (Removing…, Disconnecting…).

In SavedBackendListRow, the environment title gets min-w-0 (so it can shrink inside the flex row) plus truncate, and the metadata line (SSH path, T3 Connect, etc.) gets truncate so both stay on one line with ellipsis instead of wrapping.

^{Reviewed by Cursor Bugbot for commit 7af5247. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Fix connection rows wrapping by truncating labels and metadata in SavedBackendListRow

Adds min-w-0 truncate to the environment label <h3> and truncate to the metadata <p> in ConnectionsSettings.tsx. This stops long text from overflowing and breaking the row layout during removal.

^{Macroscope summarized 7af5247.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 9a38b7d0-8624-4816-bc71-f9be6c89d827

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

_{Comment @coderabbitai help to get the list of available commands.}

[macroscopeapp]

Approvability

Verdict: Approved at 0f01aa8

Macroscope's review found this PR approvable — This is a narrowly scoped web UI fix that adds flex shrinking and single-line truncation to existing connection labels and metadata. It affects only row presentation; connection actions, state, persistence, and APIs are unchanged.

^{You can add or adjust custom eligibility rules. Learn more.}

[MatthewFeroz]

What Changed

• Constrain saved-environment names to the available flex width and truncate overflow with an ellipsis.
• Apply the same single-line truncation to connection metadata, including long Windows SSH paths.

Why

When a connection removal starts, the action label grows from Remove or Disconnect to Removing… or Disconnecting…. That temporarily reduces the text column's available width. The connection name and metadata previously had no overflow constraint, so they could wrap and increase the row height—especially with Windows font metrics and long Windows paths.

min-w-0 lets the title participate correctly in flex shrinking, while truncate keeps both fields on one line and preserves the full text in the DOM. The action controls remain fixed-width and readable.

UI Changes

The evidence uses a 480px-wide desktop row, a Windows-style environment name/path, and the wider pending-removal controls.

Before:

After:

Scope and conventions

• This is a six-line, presentation-only web change with no contract, persistence, or connection-lifecycle changes.
• Desktop receives the fix because it renders the shared web settings component.
• Mobile uses its separate React Native connections screen and is unaffected.
• Below the existing sm breakpoint, the row already stacks its controls; this change preserves that responsive behavior.
• No documentation change is needed because user-facing behavior and terminology are unchanged.

Verification

• vp run --filter @t3tools/web typecheck
• vp lint apps/web/src/components/settings/ConnectionsSettings.tsx --report-unused-disable-directives
• vp fmt --check apps/web/src/components/settings/ConnectionsSettings.tsx
• git diff --check

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for the UI change
• No video is needed because there is no animation or timing change

Created with GPT-5.6-sol in the Codex harness.

---

Note

Low Risk
Presentation-only Tailwind class changes in the web settings UI; no connection logic, APIs, or persistence.

Overview
Saved connection rows in Connections settings no longer jump in height when Remove/Disconnect switches to the longer pending labels (Removing…, Disconnecting…).

In SavedBackendListRow, the environment title gets min-w-0 (so it can shrink inside the flex row) plus truncate, and the metadata line (SSH path, T3 Connect, etc.) gets truncate so both stay on one line with ellipsis instead of wrapping.

^{Reviewed by Cursor Bugbot for commit 7af5247. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Fix connection rows wrapping by truncating labels and metadata in SavedBackendListRow

Adds min-w-0 truncate to the environment label <h3> and truncate to the metadata <p> in ConnectionsSettings.tsx. This stops long text from overflowing and breaking the row layout during removal.

^{Macroscope summarized 7af5247.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 9a38b7d0-8624-4816-bc71-f9be6c89d827

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

_{Comment @coderabbitai help to get the list of available commands.}

[macroscopeapp]

Approvability

Verdict: Approved at 0f01aa8

Macroscope's review found this PR approvable — This is a narrowly scoped web UI fix that adds flex shrinking and single-line truncation to existing connection labels and metadata. It affects only row presentation; connection actions, state, persistence, and APIs are unchanged.

^{You can add or adjust custom eligibility rules. Learn more.}

[MatthewFeroz]

What Changed

• Constrain saved-environment names to the available flex width and truncate overflow with an ellipsis.
• Apply the same single-line truncation to connection metadata, including long Windows SSH paths.

Why

When a connection removal starts, the action label grows from Remove or Disconnect to Removing… or Disconnecting…. That temporarily reduces the text column's available width. The connection name and metadata previously had no overflow constraint, so they could wrap and increase the row height—especially with Windows font metrics and long Windows paths.

min-w-0 lets the title participate correctly in flex shrinking, while truncate keeps both fields on one line and preserves the full text in the DOM. The action controls remain fixed-width and readable.

UI Changes

The evidence uses a 480px-wide desktop row, a Windows-style environment name/path, and the wider pending-removal controls.

Before:

After:

Scope and conventions

• This is a six-line, presentation-only web change with no contract, persistence, or connection-lifecycle changes.
• Desktop receives the fix because it renders the shared web settings component.
• Mobile uses its separate React Native connections screen and is unaffected.
• Below the existing sm breakpoint, the row already stacks its controls; this change preserves that responsive behavior.
• No documentation change is needed because user-facing behavior and terminology are unchanged.

Verification

• vp run --filter @t3tools/web typecheck
• vp lint apps/web/src/components/settings/ConnectionsSettings.tsx --report-unused-disable-directives
• vp fmt --check apps/web/src/components/settings/ConnectionsSettings.tsx
• git diff --check

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for the UI change
• No video is needed because there is no animation or timing change

Created with GPT-5.6-sol in the Codex harness.

---

Note

Low Risk
Presentation-only Tailwind class changes in the web settings UI; no connection logic, APIs, or persistence.

Overview
Saved connection rows in Connections settings no longer jump in height when Remove/Disconnect switches to the longer pending labels (Removing…, Disconnecting…).

In SavedBackendListRow, the environment title gets min-w-0 (so it can shrink inside the flex row) plus truncate, and the metadata line (SSH path, T3 Connect, etc.) gets truncate so both stay on one line with ellipsis instead of wrapping.

^{Reviewed by Cursor Bugbot for commit 7af5247. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Fix connection rows wrapping by truncating labels and metadata in SavedBackendListRow

Adds min-w-0 truncate to the environment label <h3> and truncate to the metadata <p> in ConnectionsSettings.tsx. This stops long text from overflowing and breaking the row layout during removal.

^{Macroscope summarized 7af5247.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 9a38b7d0-8624-4816-bc71-f9be6c89d827

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

_{Comment @coderabbitai help to get the list of available commands.}

[macroscopeapp]

Approvability

Verdict: Approved at 0f01aa8

Macroscope's review found this PR approvable — This is a narrowly scoped web UI fix that adds flex shrinking and single-line truncation to existing connection labels and metadata. It affects only row presentation; connection actions, state, persistence, and APIs are unchanged.

^{You can add or adjust custom eligibility rules. Learn more.}

[MatthewFeroz]

What Changed

• Constrain saved-environment names to the available flex width and truncate overflow with an ellipsis.
• Apply the same single-line truncation to connection metadata, including long Windows SSH paths.

Why

When a connection removal starts, the action label grows from Remove or Disconnect to Removing… or Disconnecting…. That temporarily reduces the text column's available width. The connection name and metadata previously had no overflow constraint, so they could wrap and increase the row height—especially with Windows font metrics and long Windows paths.

min-w-0 lets the title participate correctly in flex shrinking, while truncate keeps both fields on one line and preserves the full text in the DOM. The action controls remain fixed-width and readable.

UI Changes

The evidence uses a 480px-wide desktop row, a Windows-style environment name/path, and the wider pending-removal controls.

Before:

After:

Scope and conventions

• This is a six-line, presentation-only web change with no contract, persistence, or connection-lifecycle changes.
• Desktop receives the fix because it renders the shared web settings component.
• Mobile uses its separate React Native connections screen and is unaffected.
• Below the existing sm breakpoint, the row already stacks its controls; this change preserves that responsive behavior.
• No documentation change is needed because user-facing behavior and terminology are unchanged.

Verification

• vp run --filter @t3tools/web typecheck
• vp lint apps/web/src/components/settings/ConnectionsSettings.tsx --report-unused-disable-directives
• vp fmt --check apps/web/src/components/settings/ConnectionsSettings.tsx
• git diff --check

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for the UI change
• No video is needed because there is no animation or timing change

Created with GPT-5.6-sol in the Codex harness.

---

Note

Low Risk
Presentation-only Tailwind class changes in the web settings UI; no connection logic, APIs, or persistence.

Overview
Saved connection rows in Connections settings no longer jump in height when Remove/Disconnect switches to the longer pending labels (Removing…, Disconnecting…).

In SavedBackendListRow, the environment title gets min-w-0 (so it can shrink inside the flex row) plus truncate, and the metadata line (SSH path, T3 Connect, etc.) gets truncate so both stay on one line with ellipsis instead of wrapping.

^{Reviewed by Cursor Bugbot for commit 7af5247. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Fix connection rows wrapping by truncating labels and metadata in SavedBackendListRow

Adds min-w-0 truncate to the environment label <h3> and truncate to the metadata <p> in ConnectionsSettings.tsx. This stops long text from overflowing and breaking the row layout during removal.

^{Macroscope summarized 7af5247.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 9a38b7d0-8624-4816-bc71-f9be6c89d827

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

_{Comment @coderabbitai help to get the list of available commands.}

[macroscopeapp]

Approvability

Verdict: Approved at 0f01aa8

Macroscope's review found this PR approvable — This is a narrowly scoped web UI fix that adds flex shrinking and single-line truncation to existing connection labels and metadata. It affects only row presentation; connection actions, state, persistence, and APIs are unchanged.

^{You can add or adjust custom eligibility rules. Learn more.}

[MatthewFeroz]

What Changed

• Constrain saved-environment names to the available flex width and truncate overflow with an ellipsis.
• Apply the same single-line truncation to connection metadata, including long Windows SSH paths.

Why

When a connection removal starts, the action label grows from Remove or Disconnect to Removing… or Disconnecting…. That temporarily reduces the text column's available width. The connection name and metadata previously had no overflow constraint, so they could wrap and increase the row height—especially with Windows font metrics and long Windows paths.

min-w-0 lets the title participate correctly in flex shrinking, while truncate keeps both fields on one line and preserves the full text in the DOM. The action controls remain fixed-width and readable.

UI Changes

The evidence uses a 480px-wide desktop row, a Windows-style environment name/path, and the wider pending-removal controls.

Before:

After:

Scope and conventions

• This is a six-line, presentation-only web change with no contract, persistence, or connection-lifecycle changes.
• Desktop receives the fix because it renders the shared web settings component.
• Mobile uses its separate React Native connections screen and is unaffected.
• Below the existing sm breakpoint, the row already stacks its controls; this change preserves that responsive behavior.
• No documentation change is needed because user-facing behavior and terminology are unchanged.

Verification

• vp run --filter @t3tools/web typecheck
• vp lint apps/web/src/components/settings/ConnectionsSettings.tsx --report-unused-disable-directives
• vp fmt --check apps/web/src/components/settings/ConnectionsSettings.tsx
• git diff --check

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for the UI change
• No video is needed because there is no animation or timing change

Created with GPT-5.6-sol in the Codex harness.

---

Note

Low Risk
Presentation-only Tailwind class changes in the web settings UI; no connection logic, APIs, or persistence.

Overview
Saved connection rows in Connections settings no longer jump in height when Remove/Disconnect switches to the longer pending labels (Removing…, Disconnecting…).

In SavedBackendListRow, the environment title gets min-w-0 (so it can shrink inside the flex row) plus truncate, and the metadata line (SSH path, T3 Connect, etc.) gets truncate so both stay on one line with ellipsis instead of wrapping.

^{Reviewed by Cursor Bugbot for commit 7af5247. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Fix connection rows wrapping by truncating labels and metadata in SavedBackendListRow

Adds min-w-0 truncate to the environment label <h3> and truncate to the metadata <p> in ConnectionsSettings.tsx. This stops long text from overflowing and breaking the row layout during removal.

^{Macroscope summarized 7af5247.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 9a38b7d0-8624-4816-bc71-f9be6c89d827

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

_{Comment @coderabbitai help to get the list of available commands.}

[macroscopeapp]

Approvability

Verdict: Approved at 0f01aa8

Macroscope's review found this PR approvable — This is a narrowly scoped web UI fix that adds flex shrinking and single-line truncation to existing connection labels and metadata. It affects only row presentation; connection actions, state, persistence, and APIs are unchanged.

^{You can add or adjust custom eligibility rules. Learn more.}

[MatthewFeroz]

What Changed

• Constrain saved-environment names to the available flex width and truncate overflow with an ellipsis.
• Apply the same single-line truncation to connection metadata, including long Windows SSH paths.

Why

When a connection removal starts, the action label grows from Remove or Disconnect to Removing… or Disconnecting…. That temporarily reduces the text column's available width. The connection name and metadata previously had no overflow constraint, so they could wrap and increase the row height—especially with Windows font metrics and long Windows paths.

min-w-0 lets the title participate correctly in flex shrinking, while truncate keeps both fields on one line and preserves the full text in the DOM. The action controls remain fixed-width and readable.

UI Changes

The evidence uses a 480px-wide desktop row, a Windows-style environment name/path, and the wider pending-removal controls.

Before:

After:

Scope and conventions

• This is a six-line, presentation-only web change with no contract, persistence, or connection-lifecycle changes.
• Desktop receives the fix because it renders the shared web settings component.
• Mobile uses its separate React Native connections screen and is unaffected.
• Below the existing sm breakpoint, the row already stacks its controls; this change preserves that responsive behavior.
• No documentation change is needed because user-facing behavior and terminology are unchanged.

Verification

• vp run --filter @t3tools/web typecheck
• vp lint apps/web/src/components/settings/ConnectionsSettings.tsx --report-unused-disable-directives
• vp fmt --check apps/web/src/components/settings/ConnectionsSettings.tsx
• git diff --check

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for the UI change
• No video is needed because there is no animation or timing change

Created with GPT-5.6-sol in the Codex harness.

---

Note

Low Risk
Presentation-only Tailwind class changes in the web settings UI; no connection logic, APIs, or persistence.

Overview
Saved connection rows in Connections settings no longer jump in height when Remove/Disconnect switches to the longer pending labels (Removing…, Disconnecting…).

In SavedBackendListRow, the environment title gets min-w-0 (so it can shrink inside the flex row) plus truncate, and the metadata line (SSH path, T3 Connect, etc.) gets truncate so both stay on one line with ellipsis instead of wrapping.

^{Reviewed by Cursor Bugbot for commit 7af5247. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Fix connection rows wrapping by truncating labels and metadata in SavedBackendListRow

Adds min-w-0 truncate to the environment label <h3> and truncate to the metadata <p> in ConnectionsSettings.tsx. This stops long text from overflowing and breaking the row layout during removal.

^{Macroscope summarized 7af5247.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 9a38b7d0-8624-4816-bc71-f9be6c89d827

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

_{Comment @coderabbitai help to get the list of available commands.}

[macroscopeapp]

Approvability

Verdict: Approved at 0f01aa8

Macroscope's review found this PR approvable — This is a narrowly scoped web UI fix that adds flex shrinking and single-line truncation to existing connection labels and metadata. It affects only row presentation; connection actions, state, persistence, and APIs are unchanged.

^{You can add or adjust custom eligibility rules. Learn more.}