Align title-bar breadcrumbs with content

apps/frontend/src/components/__tests__/application-title-bar.test.tsx

@@ -74,15 +74,15 @@ describe("ApplicationTitleBar", () => {
     ).toBeNull();
   });
 
-  it("keeps title bar free of chrome inset when sidebar is expanded", () => {
+  it("aligns expanded title-bar breadcrumbs with page content", () => {
     renderTitleBar("tauri", <button type="button">Route action</button>);
     const banner = screen.getByRole("banner");
     const leading = banner.querySelector<HTMLElement>('[data-slot="title-bar-leading"]');
     const dragRegion = banner.querySelector<HTMLElement>('[data-slot="title-bar-drag-region"]');
     const routeAction = screen.getByRole("button", { name: "Route action" });
 
     // Expanded desktop: fixed toggle sits over the sidebar, not the content title bar.
-    expect(leading?.style.paddingLeft).toBe("0.5rem");
+    expect(leading?.style.paddingLeft).toBe("1rem");
     expect(banner.querySelector("[data-tauri-drag-region]")).toBeNull();
     expect(dragRegion).not.toBeNull();
     if (!dragRegion) {

apps/frontend/src/components/application-title-bar.tsx

@@ -114,7 +114,7 @@ export function ApplicationTitleBar({ buildTarget }: ApplicationTitleBarProps) {
       ? hasNativeMacWindowChrome
         ? NATIVE_CHROME_LEADING_INSET
         : WEB_CHROME_LEADING_INSET
-      : "0.5rem",
+      : "1rem",
   };
 
   return (
@@ -145,7 +145,7 @@ export function ApplicationTitleBar({ buildTarget }: ApplicationTitleBarProps) {
       </div>
       <div
         data-slot="title-bar-actions"
-        className="flex shrink-0 flex-wrap items-center justify-end gap-2 px-6"
+        className="flex shrink-0 flex-wrap items-center justify-end gap-2 px-4"
       >
         <div
           ref={titleBarContextValue?.setActionsTarget}

apps/frontend/src/components/screen-base.tsx

@@ -15,7 +15,7 @@ export function ScreenBase({ actions, children, className }: ScreenBaseProps) {
     <div className={cn("flex min-h-0 flex-1 flex-col overflow-hidden", className)}>
       <ApplicationTitleBarActions>{actions}</ApplicationTitleBarActions>
       <ScrollArea className="min-h-0 flex-1">
-        <div className="flex min-h-full flex-col gap-4 p-6">{children}</div>
+        <div className="flex min-h-full flex-col gap-4 px-4 py-6">{children}</div>
       </ScrollArea>
     </div>
   );

apps/frontend/src/routes/__root.tsx

@@ -29,7 +29,6 @@ import {
   SidebarMenuSubButton,
   SidebarMenuSubItem,
   SidebarProvider,
-  SidebarRail,
   SidebarTrigger,
   useSidebar,
 } from "@/components/ui/sidebar";
@@ -133,7 +132,7 @@ function SidebarBrandMark({ className }: { className?: string }) {
       )}
     >
       {/* Optical nudge: text-lg metrics sit slightly high in the 48px strip. */}
-      <span className="flex translate-y-[0.5px] items-center gap-1.5 leading-none">
+      <span className="flex translate-y-[0.5px] items-center gap-0 leading-none">
         {/* size-8 matches icon menu buttons in the rail. */}
         <span className="flex size-8 shrink-0 items-center justify-center text-lg leading-none font-semibold text-primary">
           財
@@ -281,7 +280,6 @@ function AppSidebar({ buildTarget: sidebarBuildTarget }: AppSidebarProps) {
           </SidebarMenuItem>
         </SidebarMenu>
       </SidebarFooter>
-      <SidebarRail />
     </Sidebar>
   );
 }

apps/frontend/src/styles.css

@@ -12,6 +12,14 @@
   border-radius: var(--radius-xl);
 }
 
+[data-slot="scroll-area-scrollbar"][data-orientation="vertical"] {
+  width: 0.375rem;
+}
+
+[data-slot="scroll-area-scrollbar"][data-orientation="horizontal"] {
+  height: 0.375rem;
+}
+
 @custom-variant dark (&:is(.dark *));
 
 @theme inline {
@@ -167,7 +175,13 @@
     @apply border-border outline-ring/50;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply select-none bg-background text-foreground;
+  }
+  input,
+  textarea,
+  [contenteditable="true"],
+  [contenteditable="plaintext-only"] {
+    user-select: text;
   }
   [data-sonner-toaster] {
     --width: 356px;