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

fix(dashboard): center List toolbar buttons, match Chat divider exactly, shrink quick-add right padding

Browse Source 
- Toolbar (Bulk Edit / View / New Task) is centered (dropped the margin-left:auto right-push).
- List divider now draws its 1px line via .list-split-sidebar border-right (identical to Chat's .chat-sidebar), with a transparent hover-tint handle; removed the doubled detail border-left.
- Quick-add input padding-right 70px (inherited from the global .description-with-refine textarea refine-button reservation) tightened to space-sm — no overlaid button there, so text reclaims the width.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
gsxdsm
2026-06-22 11:02:32 -07:00
parent 50e271535e
commit fefc91b30e
2 changed files with 33 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
packages/dashboard/app/components/ListView.css
View File

@@ -27,13 +27,13 @@
}
/*
FNXC:ListView 2026-06-22-23:30:
Single compact header toolbar: count (secondary, left) + action group (right) on one row.
align-items:center keeps the three controls a consistent height; flex-wrap is a last-resort overflow guard, not the default layout.
FNXC:ListView 2026-06-23-02:45:
The action buttons (Bulk Edit / View / New Task) are the sole content of this toolbar row and must be horizontally CENTERED in the view, not pushed to one side. justify-content:center centers the action group; the prior margin-left:auto right-push (and the New Task margin-left:auto far-push) are removed so the three controls stay a tight centered cluster. align-items:center keeps them a consistent height; flex-wrap is a last-resort overflow guard that keeps them centered when they wrap on narrow widths.
*/
.list-sidebar-controls__toolbar {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
flex-wrap: wrap;
}
@@ -41,9 +41,9 @@ align-items:center keeps the three controls a consistent height; flex-wrap is a
.list-sidebar-controls__actions {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: var(--space-xs);
margin-left: auto;
}
/*
@@ -65,9 +65,7 @@ View options was oversized (full-width stacked button). Render it as a compact i
min-width: 0;
}
.list-sidebar-controls__actions .list-new-task-action {
margin-left: auto;
}
/* FNXC:ListView 2026-06-23-02:45: New Task no longer pushes to the far right of the centered action group — the three buttons stay tightly grouped and centered together. */
.list-toolbar .list-new-task-action {
margin-left: auto;
@@ -433,55 +431,57 @@ Widen the split resize column so the task-list sidebar is easy to grab and drag
min-height: 0;
}
/*
FNXC:SidebarDivider 2026-06-23-02:45:
The static 1px divider line lives on the sidebar pane's right border, IDENTICAL to Chat where `.chat-sidebar` carries `border-right: 1px solid var(--border)`. Previously List painted the visible line via the handle `::after`, which rendered at a different position/edge than Chat's pane border; moving it to the pane border reconciles the two so the 1px var(--border) line matches exactly in thickness, color, and position.
*/
.list-split-sidebar {
min-width: 0;
min-height: 0;
overflow: auto;
border-right: 1px solid var(--border);
}
/*
FNXC:SidebarDivider 2026-06-23-01:45:
The List split divider must read identically to the Chat sidebar divider: a single 1px var(--border) line, with the wider var(--space-sm) handle track acting only as an invisible drag hit-area that tints on hover/focus. Previously the handle painted a persistent color-mix band across its full var(--space-sm) width plus a 2px ::after grip, so the List divider looked noticeably thicker than Chat's clean 1px line. Keep the drag hit-area width (var(--space-sm) grid track) for usability; only the visible line thickness/color changes — handle background is transparent and the centered ::after line is 1px var(--border).
FNXC:SidebarDivider 2026-06-23-02:45:
The List split divider is now IDENTICAL to Chat's `.chat-sidebar-resize-handle`: the handle itself is a transparent var(--space-sm)-wide drag hit-area (no persistent background, no persistent visible line). The static 1px var(--border) divider line is drawn by the sibling sidebar pane's border-right (see .list-split-sidebar above), exactly as Chat draws it on .chat-sidebar. A centered var(--space-xs) ::before band tints (color-mix --todo 30%) only on hover/active — matching Chat's ::before tint. focus-visible keeps the keyboard ring (the List handle is a focusable resize control with aria) and also tints the band so keyboard resizers get the same affordance.
*/
.list-split-resize-handle {
position: relative;
cursor: col-resize;
background: transparent;
transition: background var(--transition-fast);
touch-action: none;
transition: background var(--transition-fast);
}
/* Centered 1px grip line — the static visible divider, matching Chat's 1px sidebar border. */
.list-split-resize-handle::after {
.list-split-resize-handle::before {
content: "";
position: absolute;
inset-block: 0;
inset-inline-start: 50%;
width: 1px;
top: 0;
bottom: 0;
left: 50%;
width: var(--space-xs);
transform: translateX(-50%);
background: var(--border);
transition: background var(--transition-fast);
}
.list-split-resize-handle:hover,
.list-split-resize-handle:focus-visible {
background: color-mix(in srgb, var(--todo) 35%, transparent);
}
.list-split-resize-handle:hover::after,
.list-split-resize-handle:focus-visible::after {
background: var(--todo);
.list-split-resize-handle:hover::before,
.list-split-resize-handle:active::before,
.list-split-resize-handle:focus-visible::before {
background: color-mix(in srgb, var(--todo) 30%, transparent);
}
.list-split-resize-handle:focus-visible {
box-shadow: var(--focus-ring-strong);
outline: none;
box-shadow: var(--focus-ring-strong);
}
/*
FNXC:SidebarDivider 2026-06-23-02:45:
No border-left on the detail pane. Chat draws the single divider line solely on the sidebar pane's border-right; the thread pane is unbordered. Keeping a border-left here would produce a second faint line on the far edge of the handle track (a double divider), so it is removed to make the rendered line match Chat exactly (one 1px var(--border) line at the sidebar's right edge).
*/
.list-split-detail {
min-width: 0;
min-height: 0;
border-left: 1px solid var(--border);
overflow: hidden;
background: var(--card);
}

10
packages/dashboard/app/components/QuickEntryBox.css
View File

@@ -80,10 +80,12 @@ Board/columns omit `.quick-entry--single-line`, keeping the tall 80px + auto-gro
width: 100%;
}
/* Override padding from .description-with-refine textarea to fill available width */
/* The refine button is in the controls panel, not overlaid on textarea */
.quick-entry-textarea-wrap textarea {
padding-right: 8px;
/*
FNXC:QuickEntry 2026-06-23-02:45:
The global `.description-with-refine textarea { padding-right: 70px }` (styles.css) reserves space for a refine button overlaid at the textarea's right edge. In QuickEntryBox the refine button lives in the controls panel, NOT overlaid on the textarea, so that 70px is dead space — it left a large empty gap on the right of the quick-add input (computed padding-right: 70px). Reclaim that width down to a tight var(--space-sm). Scope to the wrapping box (.description-with-refine ancestor) so this beats the global rule on specificity, not just source order (the prior `.quick-entry-textarea-wrap textarea` override tied on specificity and lost to styles.css load order). Nothing overlays the input's right edge in this variant, so text now uses the full reclaimed width.
*/
.quick-entry-box .description-with-refine .quick-entry-textarea-wrap textarea {
padding-right: var(--space-sm);
}
/* Quick Entry Box expand button - bottom-right of textarea */