Add responsive mobile layouts and navigation

src/lib/ui/components/primitives/Breadcrumbs.svelte

@@ -39,6 +39,9 @@
         color: var(--text-tertiary);
     }
     .crumbs li {
+        min-width: 0;
+        max-width: 100%;
+        overflow-wrap: anywhere;
         display: inline-flex;
         align-items: center;
         gap: var(--space-2);

src/lib/ui/components/primitives/Button.svelte

@@ -72,6 +72,7 @@
 
 <style>
     .btn {
+        max-width: 100%;
         display: inline-flex;
         align-items: center;
         justify-content: center;
@@ -159,4 +160,7 @@
         animation: spin 0.7s linear infinite;
     }
     @keyframes spin { to { transform: rotate(360deg); } }
+    @media (max-width: 720px) {
+        .btn { white-space: normal; line-height: 1.35; }
+    }
 </style>

src/lib/ui/components/primitives/Card.svelte

@@ -51,6 +51,7 @@
 
 <style>
     .card {
+        min-width: 0;
         position: relative;
         display: flex;
         flex-direction: column;
@@ -107,4 +108,7 @@
         box-shadow: var(--focus-ring), var(--shadow-raised);
     }
     .e-interactive:active { transform: translateY(-1px); }
+    @media (max-width: 480px) {
+        .p-md, .p-lg { padding: var(--space-4); }
+    }
 </style>

src/lib/ui/components/primitives/SectionHeader.svelte

@@ -74,12 +74,15 @@
     }
     .actions {
         display: flex;
+        flex-wrap: wrap;
         align-items: center;
         gap: var(--space-2);
         flex-shrink: 0;
     }
 
     @media (max-width: 640px) {
+        .s-lg .title { font-size: var(--text-2xl); }
+        .s-md .title { font-size: var(--text-xl); }
         .row { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
         .actions { width: 100%; }
     }

src/lib/ui/components/primitives/Select.svelte

@@ -50,6 +50,8 @@
 
 <style>
     .wrap {
+        min-width: 0;
+        max-width: 100%;
         position: relative;
         display: block;
     }

src/lib/ui/components/primitives/Tabs.svelte

@@ -44,6 +44,9 @@
 
 <style>
     .tabs {
+        min-width: 0;
+        max-width: 100%;
+        overflow-x: auto;
         display: inline-flex;
         align-items: center;
         gap: 2px;
@@ -53,6 +56,8 @@
         border: 1px solid var(--border-subtle);
     }
     .tab {
+        flex-shrink: 0;
+        white-space: nowrap;
         appearance: none;
         display: inline-flex;
         align-items: center;