Skip to content

FIX: Add Horizontal Scroll to CSV Viewer Toolbar on Overflow#48

Merged
wicky-zipstack merged 2 commits intomainfrom
fix/csv-viewer-toolbar-horizontal-scroll
Apr 8, 2026
Merged

FIX: Add Horizontal Scroll to CSV Viewer Toolbar on Overflow#48
wicky-zipstack merged 2 commits intomainfrom
fix/csv-viewer-toolbar-horizontal-scroll

Conversation

@tahierhussain
Copy link
Copy Markdown
Contributor

What

  • Added horizontal scroll functionality to the CSV viewer toolbar to prevent content compression on small screens

Why

  • On small screens, the CSV viewer toolbar content (search input, stats text, and truncation warning) was getting compressed and becoming difficult to read
  • The toolbar used justify-content: space-between without overflow handling, causing content to be squished

How

  • Added overflow-x: auto to .csv-viewer-toolbar to enable horizontal scrolling when content overflows
  • Added flex-shrink: 0 to all direct children of the toolbar to prevent them from shrinking/compressing
  • Added white-space: nowrap to .csv-viewer-stats and .csv-viewer-warning to prevent text from wrapping to multiple lines

Can this PR break any existing features. If yes, please list possible items. If no, please explain why. (PS: Admins do not merge the PR without this section filled)

  • No, this PR cannot break existing features because:
    • Changes are purely CSS additions to a single component (CSV viewer toolbar)
    • No JavaScript logic or component structure was modified
    • The scrollbar only appears when content overflows; on larger screens, the layout remains unchanged
    • The table and other CSV viewer functionality remain completely unaffected

Database Migrations

  • None

Env Config

  • None

Relevant Docs

  • None

Related Issues or PRs

  • None

Dependencies Versions

  • None

Notes on Testing

  • Test on small screen widths (< 600px) to verify horizontal scroll appears
  • Verify toolbar content doesn't compress or wrap inappropriately
  • Ensure scrollbar only appears when needed (when content exceeds container width)
  • Check that the CSV table below the toolbar remains unaffected
  • Test with both truncated and non-truncated CSV files to verify warning text behavior

Screenshots

image

Checklist

I have read and understood the Contribution Guidelines.

Added overflow handling to prevent toolbar content from being compressed on small screens.

Changes:
- Added overflow-x: auto to .csv-viewer-toolbar for horizontal scroll
- Added flex-shrink: 0 to toolbar children to prevent compression
- Added white-space: nowrap to stats and warning text to prevent wrapping

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
@tahierhussain tahierhussain self-assigned this Apr 8, 2026
@tahierhussain tahierhussain requested a review from a team as a code owner April 8, 2026 12:05
@tahierhussain tahierhussain added the bug Something isn't working label Apr 8, 2026
@greptile-apps
Copy link
Copy Markdown

greptile-apps bot commented Apr 8, 2026

Greptile Summary

This PR adds horizontal scroll support to the CSV viewer toolbar by making four targeted CSS additions to frontend/src/ide/editor/csv-viewer.css. On small viewports the toolbar items (search input, stats text, truncation warning) previously compressed due to justify-content: space-between with no overflow handling; the new rules let them retain their natural width and scroll into view instead.

  • overflow-x: auto on .csv-viewer-toolbar — triggers the scrollbar only when content overflows
  • .csv-viewer-toolbar > * with flex-shrink: 0 — prevents children from compressing
  • white-space: nowrap on .csv-viewer-stats and .csv-viewer-warning — keeps text on one line
  • gap: 16px on .csv-viewer-toolbar — ensures consistent spacing between children in both the normal and overflow states

The changes are backward-compatible: on wider screens justify-content: space-between distributes space as before; on narrow screens items scroll rather than squish. No JavaScript, component structure, or other CSS rules were modified.

Confidence Score: 5/5

Safe to merge — purely additive CSS changes with no risk of breakage on existing layouts.

All changes are additive CSS properties confined to a single file. On wide screens the layout is unchanged; on narrow screens items scroll instead of compress. No logic, structure, or other styles were touched, and no P0/P1 findings were identified.

No files require special attention.

Vulnerabilities

No security concerns identified.

Important Files Changed

Filename Overview
frontend/src/ide/editor/csv-viewer.css Pure CSS additions enabling horizontal scroll on the toolbar for small viewports: adds overflow-x: auto, flex-shrink: 0 on children, white-space: nowrap on stat/warning text, and a gap utility. No logic changes; visually backward-compatible on wider screens.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[CSV Viewer Toolbar renders] --> B{Does total content width exceed container width?}
    B -- No / large screen --> C[justify-content: space-between distributes items across full width. No scrollbar shown]
    B -- Yes / small screen --> D[overflow-x: auto triggers horizontal scrollbar]
    D --> E[flex-shrink: 0 keeps each child at its natural width]
    D --> F[white-space: nowrap keeps stats & warning on one line]
    D --> G[gap: 16px preserves minimum spacing between items]
    E & F & G --> H[User scrolls toolbar to read all content]
Loading

Reviews (2): Last reviewed commit: "fix: add gap to toolbar to maintain spac..." | Re-trigger Greptile

Added gap: 16px to ensure consistent spacing between toolbar items
when overflow scroll is active. Without gap, space-between loses
effect during overflow and items appear bunched together.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
Copy link
Copy Markdown
Contributor

@wicky-zipstack wicky-zipstack left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@wicky-zipstack wicky-zipstack merged commit b86fb00 into main Apr 8, 2026
7 of 8 checks passed
@wicky-zipstack wicky-zipstack deleted the fix/csv-viewer-toolbar-horizontal-scroll branch April 8, 2026 14:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants