Skip to content

Commit b86fb00

Browse files
FIX: Add Horizontal Scroll to CSV Viewer Toolbar on Overflow (#48)
* fix: add horizontal scroll to CSV viewer toolbar on overflow 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> * fix: add gap to toolbar to maintain spacing on overflow 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> --------- Co-authored-by: Claude <noreply@anthropic.com>
1 parent 909e79c commit b86fb00

File tree

1 file changed

+9
-0
lines changed

1 file changed

+9
-0
lines changed

frontend/src/ide/editor/csv-viewer.css

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,27 @@
99
display: flex;
1010
align-items: center;
1111
justify-content: space-between;
12+
gap: 16px;
1213
padding: 8px 12px;
1314
border-bottom: 1px solid var(--border-color-1, #e2e8f0);
1415
background: var(--page-bg-1, #f8fafc);
1516
flex-shrink: 0;
17+
overflow-x: auto;
18+
}
19+
20+
/* Prevent toolbar children from shrinking */
21+
.csv-viewer-toolbar > * {
22+
flex-shrink: 0;
1623
}
1724

1825
.csv-viewer-stats {
1926
font-size: 12px;
27+
white-space: nowrap;
2028
}
2129

2230
.csv-viewer-warning {
2331
font-size: 12px;
32+
white-space: nowrap;
2433
}
2534

2635
.csv-viewer-table {

0 commit comments

Comments
 (0)