Skip to content

fix(ux): fix layout text overflow, 100vw window blowouts, and edge sticking - #396

Merged
Qiyuanqiii merged 1 commit into
mainfrom
Qiyuanqiii/fix-layout-overflow-and-edge-sticking
Oct 19, 2026
Merged

Qiyuanqiii merged 1 commit into
mainfrom
Qiyuanqiii/fix-layout-overflow-and-edge-sticking

Conversation

@Qiyuanqiii

@Qiyuanqiii Qiyuanqiii commented Oct 19, 2026 •

Copy link
Copy Markdown
Member

Summary

Fixes text overflow, horizontal window blowouts from 100vw, and text sticking to window edges across multiple pages and views:

  1. New Conversation Welcome Copy (web/src/v2/styles.css):

    • Added padding: 0 16px; to .v2-new-conversation-body.
    • Added box-sizing: border-box; width: 100%; and overflow-wrap: anywhere; to .v2-new-copy.
    • Prevents the welcome header and description text from touching window borders directly (0px gap) on narrow viewports (< 490px).
  2. 100vw Viewport Blowouts (application-preview.css & thread-context.css):

    • Replaced width: 100vw; with box-sizing: border-box; width: 100%; max-width: 100vw;.
    • Prevents Windows/desktop scrollbars from triggering unwanted horizontal scrolling and clipping right-side text.
  3. Task Configuration Grid Blowout (task-configuration.css):

    • Added min-width: 0; overflow-wrap: anywhere; to dd.
    • Added a responsive @media (max-width: 520px) rule collapsing grid-template-columns to minmax(0, 1fr).
  4. Setting Row Text Overflow (settings.css):

    • Added overflow-wrap: anywhere; word-break: break-word; to .v2-setting-row > div:first-child span to safely wrap long file paths and URLs.
    • Adjusted the row collapse breakpoint from 480px to 580px to prevent control crowding against descriptive text.
  5. Sidebar Thread Header Icon Squishing (web/src/v2/styles.css):

    • Added flex-shrink: 0; to folder icons.
    • Added min-width: 0; to titles so long project names don't distort icons or break text truncation with ellipsis.

Review Mode

Reviewed under OpenCodeReview (OCR) Delegation Mode.

Co-author

Co-authored-by: Gemini Code Assist https://github.com/gemini-code-assist

…icking

- Add padding-inline and box-sizing to .v2-new-copy and .v2-new-conversation-body to prevent text from touching window borders on narrow viewports
- Fix width: 100vw in application-preview.css and thread-context.css causing horizontal window overflow and scrollbar clipping
- Make task configuration definition list responsive under 520px with min-width: 0 and overflow-wrap
- Add overflow-wrap and word-break to setting row detail span, and relax row collapse breakpoint to 580px
- Add flex-shrink: 0 to sidebar thread group folder icons and min-width: 0 to titles to preserve layout on long workspace names

Co-authored-by: Gemini <gemini-code-assist@users.noreply.github.com>
@Qiyuanqiii
Qiyuanqiii force-pushed the Qiyuanqiii/fix-layout-overflow-and-edge-sticking branch from c9321ea to 94b8206 Compare October 19, 2026 05:41
@Qiyuanqiii
Qiyuanqiii merged commit df3add8 into main Oct 19, 2026
13 checks passed
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