Skip to content

Sidebar buttons pushed off-screen due to Flexbox overflow #12910

Description

@WillShi-cn

Before submitting your bug report

Relevant environment info

- OS: WIN11
- Continue version: continue.continue-2.0.0-win32-x64
- IDE version: VSCODE

Description

Bug: Sidebar buttons pushed off-screen due to Flexbox overflow

Description

When generating long code blocks without line breaks, the sidebar input buttons (like "Enter") gradually move right until they're off-screen. This happens because:

  1. Flex containers lack min-width: 0
  2. Code blocks don't have max-width: 100% + word-break: break-all

Expected Behavior

Buttons should remain visible regardless of content length.

Workaround

Manually adding these CSS rules to ./assets/index.css fixes it:

.flex, [class*="flex"] { min-width: 0 !important; }
pre, code { max-width: 100% !important; word-break: break-all !important; }

Suggested Fix

Add to global CSS:

.container, .chat-container {
  min-width: 0;
  overflow-x: hidden;
}

### To reproduce

_No response_

### Log output

```Shell

Metadata

Metadata

Assignees

No one assigned

    Labels

    area:sidebarRelates to the sidebar windowide:vscodeRelates specifically to VS Code extensionkind:bugIndicates an unexpected problem or unintended behavioros:windowsHappening specifically on Windows

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions