snowspeeder/roast_command_center
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix desktop header overflow; add plan attachment on roast detail
Test and deploy / test-and-deploy (push) Successful in 55s
Details

Browse Source 
- The app header now wraps: brand + actions on the first row (actions
  shrink and wrap instead of pushing Print off-screen), section pills
  always on their own full-width row; the planner's sticky offsets use
  a two-row --header-h via body:has(#plan-form)
- Roast detail gains a Plan selector (attach/detach any of your plans)
  alongside the Machine selector; PUT /api/roasts/:id accepts
  roastPlanId with ownership checks

Co-Authored-By: Claude Fable 5 <[email protected]>
This commit is contained in:
Shane Maynard
2026-08-09 08:47:13 -04:00
co-authored by Claude Fable 5
parent 4a3d192c2c
commit c6c392730f
3 changed files with 86 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app.css
+20 -9
View File
@@ -76,13 +76,20 @@ output {
position: sticky;
top: 0;
z-index: 30;
height: var(--header-h);
min-height: var(--header-h);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 24px;
gap: 8px 24px;
background: var(--surface-raised);
border-bottom: 1px solid var(--line);
padding: 0 20px;
padding: 8px 20px;
}
/* The planner header is two rows tall (brand + tools, then the section pills) — its sticky
offsets (dock, anchor scroll margins) must account for that. :has() scopes it to the one
page that has the plan form. */
body:has(#plan-form) {
--header-h: 112px;
}
.header-row-top {
display: contents;
@@ -109,14 +116,15 @@ output {
color: var(--ink-3);
}
/* No overflow scrolling: below 1180px this row already sits on its own full-width line, and
at ≤720px it becomes a fixed five-column grid — a hidden horizontal scroll region in a
header is undiscoverable, especially on touch. */
/* Always its own full-width row under the brand/actions — never squeezed beside them, never
an overflow scroller (a hidden horizontal scroll region in a header is undiscoverable,
especially on touch). At ≤720px it becomes a fixed four-column grid. */
.section-nav {
display: flex;
align-items: center;
gap: 2px;
flex: 1 1 auto;
order: 3;
flex-basis: 100%;
flex-wrap: wrap;
}
.section-nav a {
@@ -145,8 +153,11 @@ output {
.header-actions {
display: flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
gap: 6px 8px;
flex: 1 1 auto;
flex-wrap: wrap;
justify-content: flex-end;
min-width: 0;
}
.header-divider {
width: 1px;