feat(ui): adjust breadcrumb

[perber]

No description provided.

[Copilot]

Pull request overview

This PR tweaks the UI layout styling around the app header and page viewer subheader (where breadcrumbs are rendered), likely aiming to reduce header height and adjust overall content widths/spacing.

Changes:

• Reduced the fixed app header height and updated dependent layout height calculations (spacer/content/sidebar/overlay).
• Adjusted header title markup to introduce a dedicated site-name class for styling.
• Narrowed several page containers (404, viewer, settings) and updated page viewer subheader/content spacing.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
ui/leafwiki-ui/src/layout/AppLayout.tsx	Wraps the site name in a dedicated class for new header typography/spacing.
ui/leafwiki-ui/src/index.css	Updates header height/layout calculations and adjusts widths/spacing for viewer/subheader and other page shells.

Comments suppressed due to low confidence (1)

ui/leafwiki-ui/src/index.css:495

• The header height was reduced to 55px while keeping p-4. With Tailwind’s border-box sizing, that leaves only ~23px of content height, so items like the sidebar toggle button and especially the logo image (.app-layout__logo-image is h-16) will overflow or be clipped/misaligned. Consider reducing vertical padding (e.g. py-2) and/or scaling the logo image height to fit the new header height, or make the header height driven by content instead of a hard constant.

  .app-layout__header {
    @apply bg-surface fixed z-20 h-[55px] w-full border-b p-4;
  }

  .app-layout__header-inner {
    @apply flex h-full items-center justify-start;
  }

  .app-layout__sidebar-toggle-container {
    @apply flex min-h-full w-6 items-center;
  }

  .app-layout__sidebar-toggle-button {
    @apply relative z-20 h-5 w-5 p-2;
  }

  .app-layout__logo-n-title {
    @apply mr-6 ml-6 flex min-h-full items-center gap-2;
  }

  .app-layout__logo-n-title h2 {
    @apply text-interface-text text-base font-normal;
  }

  .app-layout__site-name {
    @apply text-interface-text pl-2;
  }

  .app-layout__logo-image {
    @apply inline-block h-16 w-auto max-w-32 shrink-0 object-contain align-middle;
  }

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.