fix: scope the sidebar styles so they stop breaking breadcrumbs

[limonte]

Fixes the breadcrumb trail from #272, which shipped visually broken. My fault: I verified that PR by CSS reasoning instead of rendering it.

Cause

styles/styles.scss had a bare nav { … } rule for the sidebar, so it also matched the breadcrumb <nav>. Three rules applied to it:

nav            { position: fixed; top: 0; flex-direction: column; padding: 2em 0 2em 1em; ... }
nav a          { display: flex; padding: 0.4em 1em; border-bottom: 1px solid; border-left: 4px solid ... }
nav a::before  { content: '›'; margin-right: 1em; }

.recipe-gallery-top-nav .breadcrumbs (specificity 0,2,0) won for display, align-items and gap, but everything it didn't set was inherited from nav — including position: fixed, top: 0 and flex-direction: column. And nav a styled each crumb as a sidebar menu item.

Net effect: the trail was pinned to the top-left of the viewport, its two links stacked vertically, each carrying a › prefix and sidebar borders.

Fix

The bare selector encoded an assumption that the sidebar is the only <nav> on the page. Fixed at the root rather than by piling overrides onto .breadcrumbs:

• nav → .sidebar-nav
• .sidebar nav → .sidebar .sidebar-nav (the Swal-popup variant of the same element)
• Sidebar() renders <nav className="sidebar-nav mobile-hidden">

2 files, +5 / −3. Breadcrumb markup and CSS are untouched.

Verification

Ran the same selector query against the built stylesheet before and after:

BEFORE — rules matching the breadcrumb <nav>:
  nav            { position: fixed; z-index: 1; top: 0; flex-direction: column; ... }
  nav a          { display: flex; margin-right: 15px; padding: 0.4em 1em; ... }
  nav a::before  { content: "›"; }

AFTER:
  NONE

Regression check on the sidebar, which is what this change could break: git diff styles/styles.scss shows 0 changed declaration lines — selectors renamed only. All nine sidebar rules are present in the built CSS under .sidebar-nav, including a::before { content: "›" }, a.recipe-gallery, and the .sidebar .sidebar-nav popup override. Sidebar() is the single component used by both the inline sidebar and the Swal popup (utils/sidebar.tsx), so both paths get the class.

bun run lint and bun run build pass.

Please eyeball it

I have no browser tooling in this session, so this is verified by cascade analysis, not by rendering — the same gap that let #272 through. Worth a look at a recipe page (top nav at desktop and mobile) plus the sidebar in both forms before merging.

🤖 Generated with Claude Code