rstillwell/deckhearth
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

refactor(layout): floating sidebar + floating top header #113

Merged
varutasu merged 1 commit from redesign-v2-floating-chrome into main 2026-06-04 13:07:17 -04:00
Conversation 3 Commits 1 Files changed 2 +44 -13
varutasu commented 2026-06-04 13:04:50 -04:00 (Migrated from github.com)
Copy link

Operator feedback 2026-06-04: "pull out the left nav to make it look like it is its own floating section versus attached to the top-left" + "this is also true for the header for the pages, the divider that runs between the right side and the sidebar — let's make that divider go away so it all feels like one large page."

Changes

components/Layout.js

  • Outer flex shell: md:p-4 md:gap-4 pulls both the sidebar and the main column in from the viewport edges on desktop.
  • Desktop sidebar: md:rounded-3xl md:overflow-hidden. Dropped var(--rim-light-outer) — that 1px outer ring was literally the vertical divider the operator wanted gone.
  • Main column: md:gap-4 min-w-0 — vertical breathing room between the floating header and the page content; min-w-0 keeps flex children from blowing past column width.

components/ui/TopSearchBar.js

  • md:rounded-2xl so the header reads as a floating chip on desktop (mobile stays edge-to-edge).
  • Box-shadow updated to rim-light-inner + elevation-ambient. No rim-light-outer — prior "remove the divider" feedback still applies, and a hairline outer ring would re-introduce one on mobile.

Visual model

Body hearth gradient is the "one large page". Floating sidebar + floating header sit on top of it as chrome chips, with the gradient visible through the gaps (md:p-4 outer padding + md:gap-4 between).

CI

  • 113/113 vitest
  • lint clean
  • build green

Made with Cursor

Operator feedback 2026-06-04: "pull out the left nav to make it look like it is its own floating section versus attached to the top-left" + "this is also true for the header for the pages, the divider that runs between the right side and the sidebar — let's make that divider go away so it all feels like one large page." ## Changes **`components/Layout.js`** - Outer flex shell: `md:p-4 md:gap-4` pulls both the sidebar and the main column in from the viewport edges on desktop. - Desktop sidebar: `md:rounded-3xl md:overflow-hidden`. Dropped `var(--rim-light-outer)` — that 1px outer ring was literally the vertical divider the operator wanted gone. - Main column: `md:gap-4 min-w-0` — vertical breathing room between the floating header and the page content; min-w-0 keeps flex children from blowing past column width. **`components/ui/TopSearchBar.js`** - `md:rounded-2xl` so the header reads as a floating chip on desktop (mobile stays edge-to-edge). - Box-shadow updated to `rim-light-inner + elevation-ambient`. No `rim-light-outer` — prior "remove the divider" feedback still applies, and a hairline outer ring would re-introduce one on mobile. ## Visual model Body hearth gradient is the "one large page". Floating sidebar + floating header sit on top of it as chrome chips, with the gradient visible through the gaps (`md:p-4` outer padding + `md:gap-4` between). ## CI - 113/113 vitest - lint clean - build green Made with [Cursor](https://cursor.com)
vercel[bot] commented 2026-06-04 13:04:53 -04:00 (Migrated from github.com)
Copy link

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
tcg-vault Ready Ready Preview, Comment Jun 4, 2026 5:05pm

Request Review

[vc]: #IRq1rQ0ithSwLsY9t71ThkpAsAgtgMlz9syvpQLJ9Jg=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJ0Y2ctdmF1bHQiLCJwcm9qZWN0SWQiOiJwcmpfRjZXOEVvRkd3Y0g3aWVGcnRvRlNlOXdVVkFhNSIsImluc3BlY3RvclVybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS9yYW5kYWxsLXN0aWxsd2VsbHMtcHJvamVjdHMvdGNnLXZhdWx0L0FSS2dURGFxU3p3M2ZGUk5FNkxHVVBBYW12TnUiLCJwcmV2aWV3VXJsIjoidGNnLXZhdWx0LWdpdC1yZWRlc2lnbi12Mi1mbC1mMmUxNjQtcmFuZGFsbC1zdGlsbHdlbGxzLXByb2plY3RzLnZlcmNlbC5hcHAiLCJuZXh0Q29tbWl0U3RhdHVzIjoiREVQTE9ZRUQiLCJsaXZlRmVlZGJhY2siOnsicmVzb2x2ZWQiOjAsInVucmVzb2x2ZWQiOjAsInRvdGFsIjowLCJsaW5rIjoidGNnLXZhdWx0LWdpdC1yZWRlc2lnbi12Mi1mbC1mMmUxNjQtcmFuZGFsbC1zdGlsbHdlbGxzLXByb2plY3RzLnZlcmNlbC5hcHAifSwicm9vdERpcmVjdG9yeSI6bnVsbH1dLCJyZXF1ZXN0UmV2aWV3VXJsIjoiaHR0cHM6Ly92ZXJjZWwuY29tL3ZlcmNlbC1hZ2VudC9yZXF1ZXN0LXJldmlldz9vd25lcj12YXJ1dGFzdSZyZXBvPXRjZy12YXVsdCZwcj0xMTMifQ== The latest updates on your projects. Learn more about [Vercel for GitHub](https://vercel.link/github-learn-more). | Project | Deployment | Actions | Updated (UTC) | | :--- | :----- | :------ | :------ | | [tcg-vault](https://vercel.com/randall-stillwells-projects/tcg-vault) | ![Ready](https://vercel.com/static/status/ready.svg) [Ready](https://vercel.com/randall-stillwells-projects/tcg-vault/ARKgTDaqSzw3fFRNE6LGUPAamvNu) | [Preview](https://tcg-vault-git-redesign-v2-fl-f2e164-randall-stillwells-projects.vercel.app), [Comment](https://vercel.live/open-feedback/tcg-vault-git-redesign-v2-fl-f2e164-randall-stillwells-projects.vercel.app?via=pr-comment-feedback-link) | Jun 4, 2026 5:05pm | <a href="https://vercel.com/vercel-agent/request-review?owner=varutasu&repo=tcg-vault&pr=113" rel="noreferrer"><picture><source media="(prefers-color-scheme: dark)" srcset="https://agents-vade-review.vercel.sh/request-review-dark.svg"><source media="(prefers-color-scheme: light)" srcset="https://agents-vade-review.vercel.sh/request-review-light.svg"><img src="https://agents-vade-review.vercel.sh/request-review-light.svg" alt="Request Review"></picture></a>
github-actions[bot] commented 2026-06-04 13:05:04 -04:00 (Migrated from github.com)
Copy link

Pipeline Health

Build + CI gates

Gate Status
Vercel build (Preview) ✅ pass
CI: Lint ✅ pass
CI: Schema map fresh ❌ skipped
Preview smoke ✅ pass
Visual diff ✅ pass

Build runs on Vercel; this CI runs lint and schema-map drift only (no duplicate build).

Role reports

Role Status
Reviewer report ⏳ pending
A11y audit ⏳ pending
Design system audit ⏳ pending

See individual comments above for details. This rollup updates automatically.

<!-- pipeline-rollup --> ## Pipeline Health ### Build + CI gates | Gate | Status | | --- | --- | | Vercel build (Preview) | ✅ pass | | CI: Lint | ✅ pass | | CI: Schema map fresh | ❌ skipped | | Preview smoke | ✅ pass | | Visual diff | ✅ pass | _Build runs on Vercel; this CI runs lint and schema-map drift only (no duplicate build)._ ### Role reports | Role | Status | | --- | --- | | Reviewer report | ⏳ pending | | A11y audit | ⏳ pending | | Design system audit | ⏳ pending | See individual comments above for details. This rollup updates automatically.
github-actions[bot] commented 2026-06-04 13:06:19 -04:00 (Migrated from github.com)
Copy link

Visual Diff

Screenshots and diffs uploaded as artifacts: view run

If intentional changes: update snapshots locally with npx playwright test --project=visual --update-snapshots and commit.

## Visual Diff Screenshots and diffs uploaded as artifacts: [view run](https://github.com/varutasu/tcg-vault/actions/runs/26967057040) If intentional changes: update snapshots locally with `npx playwright test --project=visual --update-snapshots` and commit.
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels   
agent-context-drift

   
bug

Something isn't working

  
documentation

Improvements or additions to documentation

  
duplicate

This issue or pull request already exists

  
enhancement

New feature or request

  
good first issue

Good for newcomers

  
help wanted

Extra attention is needed

  
invalid

This doesn't seem right

  
question

Further information is requested

  
wontfix

This will not be worked on

No labels
agent-context-drift
bug
documentation
duplicate
enhancement
good first issue
help wanted
invalid
question
wontfix
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: rstillwell/deckhearth#113
No description provided.
Delete branch "redesign-v2-floating-chrome"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?