Skip to content

Fix mobile credential row overflow#513

Merged
DorianZheng merged 1 commit into
mainfrom
codex/fix-mobile-credential-row-overflow
May 13, 2026
Merged

Fix mobile credential row overflow#513
DorianZheng merged 1 commit into
mainfrom
codex/fix-mobile-credential-row-overflow

Conversation

@DorianZheng

Copy link
Copy Markdown
Member

Summary

  • Add a shared CopyableValue component for dashboard credential/token rows.
  • Replace legacy green credential rows in sandbox, region, runner, onboarding, and organization dialogs.
  • Keep long commands and tokens constrained on mobile by scrolling the value internally while action buttons stay visible.

Root Cause

Long unbroken SSH commands/API keys were rendered inside flex rows without a min-w-0/flex-1 contract on the value child. On narrow screens, the value kept its min-content width and pushed or shrank neighboring action controls instead of scrolling inside the row.

Validation

  • git diff --cached --check passed before commit.
  • Targeted 320px/375px layout probe passed: no document-level horizontal overflow; values scroll internally; action controls remain visible.
  • make fmt:check passed but skipped dashboard changes.
  • make lint passed but skipped dashboard changes.
  • Installed app dependencies locally with npm install --package-lock=false --ignore-scripts --legacy-peer-deps after the initial build found missing Nx modules.
  • npm exec -- nx run dashboard:build still fails in existing Vite/tsconfig resolution before transforming dashboard modules: failed to resolve "extends":"../../tsconfig.base.json" in apps/dashboard/tsconfig.json.

@DorianZheng DorianZheng marked this pull request as ready for review May 13, 2026 09:43
@DorianZheng DorianZheng merged commit 2628ca5 into main May 13, 2026
10 checks passed
@DorianZheng DorianZheng deleted the codex/fix-mobile-credential-row-overflow branch May 13, 2026 09:44
DorianZheng added a commit that referenced this pull request May 14, 2026
…ay inside on mobile (#518)

PR #513 added CopyableValue (`min-w-0 flex-1 overflow-x-auto` on the value
span) so long SSH commands and API keys would scroll inside the row instead
of pushing siblings. The fix works in isolation but the row itself still
escapes its dialog on narrow viewports — reproducer is the Sandboxes "Create
SSH Access" dialog, where the ssh command renders past the right edge of
AlertDialogContent.

Root cause: `AlertDialogContent` uses `display: grid` with no explicit
`grid-template-columns`, so it gets a single implicit auto column whose
items default to `min-width: auto` (= min-content). With `whitespace-nowrap`
on the CopyableValue value span, that min-content is the full unbreakable
SSH command, so the grid item grows past `max-w-[calc(100%-2rem)]` and
visually clips at the viewport. `DialogContent` has the same shape with
`flex flex-col` items (which also default to `min-width: auto` on the cross
axis).

Fix:
- AlertDialogContent: add `grid-cols-[minmax(0,1fr)]` so the single column
  is `minmax(0,1fr)` instead of implicit auto. Items can now shrink below
  content width, and CopyableValue's internal `overflow-x-auto` engages.
- DialogContent: add `[&>*]:min-w-0` so every direct flex-col child gets
  `min-width: 0`. Same effect: children can shrink, content scrolls inside
  the row.

Fixes every existing CopyableValue + future long-content cases in one place
instead of patching every call site.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant