🐛 fix(ui): repair mobile Dashboard and Containers layouts (#498)#586
Conversation
- 🐛 fix(ui): re-sync active dashboard layout on breakpoint change so widgets stop overflowing the 1-column grid on phones - 🐛 fix(ui): use auto card-grid rows in single-column card mode to kill the empty band below reflowed cards - 🐛 fix(ui): truncate long group names and keep the update-all button from clipping in the containers group header - ✅ test(ui): cover breakpoint re-sync, card-grid row mode, and group-header truncation
- 🔧 chore(ci): github/codeql-action v4.36.2 → v4.36.3 (SHA-pinned) - 🔧 chore(ci): actions/cache v5.0.5 → v5.1.0 (SHA-pinned)
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Review limit reached
Next review available in: 2 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (4)
📝 WalkthroughWalkthroughUpdates GitHub Action pins for cache and CodeQL, refreshes the PostCSS override, and changes responsive UI behavior. DataTable card mode now estimates columns and uses content-height rows for single-column layouts. Container group headers truncate names and keep badges and update controls fixed. Dashboard breakpoint changes resynchronize the active layout state, with tests covering each UI adjustment. 🚥 Pre-merge checks | ✅ 2✅ Passed checks (2 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@ui/src/components/DataTable.vue`:
- Line 1094: Normalize the card minimum width used by the DataTable template’s
gridTemplateColumns binding so missing or invalid values use the same 320px
fallback as estimation. Update ui/src/components/DataTable.vue at lines
1094-1094 to use that normalized value, and update
ui/tests/components/DataTable.spec.ts at lines 1970-1979 to assert the rendered
layout includes minmax(320px, 1fr) or the equivalent computed style.
- Around line 474-480: The parseCardMinWidthPx function must not convert rem/em
using a fixed 16px value; resolve those units against the document’s computed
root/element font size so font-size presets are respected, or reject rem/em and
fall back to 320. Keep px and unitless values using their existing numeric
behavior.
In `@ui/tests/components/DataTable.spec.ts`:
- Around line 1958-1968: Update the rem and em single-column tests around
mountAtWidth to use a 700px viewport and assert the converted 30rem/30em widths
still produce one column, distinguishing them from the 320px fallback that would
produce two columns. Keep the tests focused on conversion behavior without
adding refactors or error handling.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: a3dbf047-b550-4ad4-bf60-24f8d93967e3
⛔ Files ignored due to path filters (2)
CHANGELOG.mdis excluded by!CHANGELOG.mdapps/web/package-lock.jsonis excluded by!**/package-lock.json,!**/package-lock.json
📒 Files selected for processing (12)
.github/tests/github-action-pins.ts.github/workflows/ci-verify.yml.github/workflows/quality-mutation-monthly.yml.github/workflows/security-grype.yml.github/workflows/security-scorecard.ymlapps/web/package.jsonui/src/components/DataTable.vueui/src/components/containers/ContainersGroupHeader.vueui/src/views/dashboard/useDashboardResponsiveLayouts.tsui/tests/components/DataTable.spec.tsui/tests/components/containers/ContainersGroupHeader.spec.tsui/tests/views/dashboard/useDashboardWidgetOrder.spec.ts
|
Thanks @coderabbitai. Went through all three: 1. Normalize the template's 2. Resolve 3. Strengthen the |
|
Tip For best results, initiate chat on the files or code changes. 🧩 Analysis chain🏁 Script executed: #!/bin/bash
set -euo pipefail
data_table=$(fd -a '^DataTable\.vue$' ui/src/components | head -n1)
data_table_test=$(fd -a '^DataTable\.spec\.ts$' ui/tests/components | head -n1)
printf '%s\n' '--- DataTable relevant symbols ---'
ast-grep outline "$data_table" --items all --match 'parseCardMinWidthPx|cardColumnCount|cardGridAutoRows' --view expanded || true
printf '%s\n' '--- DataTable implementation excerpts ---'
rg -n -A18 -B10 'parseCardMinWidthPx|cardColumnCount|cardGridAutoRows|gridTemplateColumns' "$data_table"
printf '%s\n' '--- Card-mode regression test excerpts ---'
rg -n -A18 -B8 "30rem|30em|700|grid-auto-rows|cardMinWidth" "$data_table_test"
printf '%s\n' '--- Confirm claimed test-change commit ---'
git show --format=fuller --stat 713fdf03 -- "$data_table_test"
git show --format= --unified=12 713fdf03 -- "$data_table_test"Length of output: 18460
✏️ Learnings added
If you found this review helpful, would you consider giving us a shout-out on X? Thank you for using CodeRabbit! |
- `--dd-font-size` scales the document root (0.8-1.3 presets), so the row-mode heuristic must resolve rem/em against the live computed root font size to match the browser's minmax() resolution (CodeRabbit PR #586 finding), instead of assuming a fixed 16px root.
|
Following up on my earlier reply @coderabbitai, I got finding 2 wrong and just fixed it ( 2. Resolve 1. Normalize the template's |
|
Tip For best results, initiate chat on the files or code changes.
✏️ Learnings added
|
biggest-littlest
left a comment
biggest-littlest
left a comment
There was a problem hiding this comment.
Approving the rc.5 fold-in: #498 mobile layout fixes (Dashboard + Containers), SHA-pinned CI action bumps, postcss CVE-2026-45623 remediation, and the rem/em root-font-scale fix. Full CI green, CodeRabbit findings addressed.
ALARGECOMPANY
left a comment
ALARGECOMPANY
left a comment
There was a problem hiding this comment.
Approving the rc.5 fold-in: #498 mobile layout fixes (Dashboard + Containers), SHA-pinned CI action bumps, postcss CVE-2026-45623 remediation, and the rem/em root-font-scale fix. Full CI green, CodeRabbit findings addressed.
3 participants
Folds today's outstanding fixes into the staged-but-uncut
v1.6.0-rc.5tree so the 7-day soak covers them. The 2026-07-22 rc.5 cut was cancelled before publishing; this re-stages the same rc.5 identity with the fixes added, then rc.5 is re-cut frommainafter merge.What's here
DataTablesingle-column card mode usesautogrid rows instead of1fr, killing the empty band below reflowed cards.truncate min-w-0/shrink-0/whitespace-nowrap) so it stops getting clipped off-screen.github/codeql-actionv4.36.2→v4.36.3 andactions/cachev5.0.5→v5.1.0 (SHA-pinned), plus a sync of theactions/cachepin fixture in.github/tests/github-action-pins.tsthat the workflow-pin test asserts against.postcssbuild-dependency override to 8.5.22, closing CVE-2026-45623 (GHSA-6g55-p6wh-862q) — a pre-existing repo-wide osv-scanner finding that was failing every push offmain. Merging this unblocks the gate for everyone.[1.6.0-rc.5]heading (Fixed: mobile layout; Security: postcss).Testing
autorows +parseCardMinWidthPxpx/rem/em/invalid/zero branches, dashboard breakpoint re-sync, group-header truncation classes).apps/webnpm auditclean after the postcss bump.Changelog
DataTablecard-mode grid sizing by derivinggridAutoRows(autovs1fr) to eliminate excess vertical space in responsive reflows, includingcardMinWidthhandling forpx/rem/emand fallback behavior.Containersgroup header layout so long names truncate (min-w-0) and update controls remain visible (including non-wrapping “update all” button styling).github/codeql-actiontov4.36.3andactions/cachetov5.1.0, including SHA-pinned fixture updates across workflows/tests.postcssoverride to8.5.22to address CVE-2026-45623.DataTablesingle-column detection viacardMinWidthunit conversion + fallback rules, andContainersGroupHeadertruncation/button layout.Concerns
postcssoverride version (8.5.22) and the intended CVE reference align with the project’s dependency resolution strategy.github/codeql-action/actions/cacheSHA pins and expected fixtures remain consistent across workflows and the pin-test file.DataTableunit-conversion heuristics forrem/emmatch the intended browser baseline font assumptions.