root/fusion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(dashboard): unsqueeze kanban columns on tablet viewports

Browse Source 
The 769–1024px breakpoint forced 6 columns into the visible width with
`grid-template-columns: repeat(6, minmax(0, 1fr))` and `overflow-x:
hidden`, collapsing columns to ~130–170px on Android tablets and
stacking task card titles one word per line. Switch to
`minmax(260px, 1fr)` with `overflow-x: auto` so columns keep a readable
minimum width and the board scrolls horizontally, matching desktop.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
gsxdsm
2026-05-22 17:22:36 -07:00
parent 31c71a326a
commit 45a3c6e426
2 changed files with 6 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.changeset/fix-tablet-board-squeeze.md
View File

@@ -2,4 +2,4 @@
"@runfusion/fusion": patch
---
Dashboard board no longer squeezes all 6 columns into the visible width on tablet-sized viewports (769–1024px). Columns now keep their 300px minimum and the board scrolls horizontally, matching desktop behavior. Previously Android tablets in portrait mode rendered columns scrunched to unreadable widths.
Dashboard board no longer squeezes all 6 columns into the visible width on tablet-sized viewports (769–1024px). Columns now keep a 260px minimum and the board scrolls horizontally, matching desktop behavior. Previously the tablet rule used `minmax(0, 1fr)` with `overflow-x: hidden`, collapsing columns to ~130–170px wide on Android tablets and forcing task card titles to stack one word per line.

7
packages/dashboard/app/styles.css
View File

@@ -3190,9 +3190,12 @@ input[type="range"]:focus-visible {
}
@media (min-width: 769px) and (max-width: 1024px) {
/* Tablet: 6 columns at 1fr collapse to ~130–170px each, which makes
task cards stack one word per line. Use a real minimum column width
and let the board scroll horizontally instead. */
.board {
grid-template-columns: repeat(6, minmax(0, 1fr));
overflow-x: hidden;
grid-template-columns: repeat(6, minmax(260px, 1fr));
overflow-x: auto;
}
}