fix(frontend): complete i18n coverage and responsive layouts

frontend/src/components/layout/CardSection.vue

@@ -5,8 +5,8 @@
       :class="headerClasses"
     >
       <slot name="header">
-        <div class="flex items-center justify-between">
-          <div>
+        <div class="flex flex-wrap items-start justify-between gap-4">
+          <div class="min-w-0 flex-1 basis-64">
             <h3
               v-if="title"
               class="text-lg font-medium leading-6 text-foreground"
@@ -20,7 +20,10 @@
               {{ description }}
             </p>
           </div>
-          <div v-if="$slots.actions">
+          <div
+            v-if="$slots.actions"
+            class="max-w-full shrink-0 [&>div]:flex-wrap [&_button]:shrink-0"
+          >
             <slot name="actions" />
           </div>
         </div>

frontend/src/components/layout/PageHeader.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-    <div class="flex-1">
-      <div class="flex items-center gap-3">
+    <div class="min-w-0 flex-1">
+      <div class="flex min-w-0 items-center gap-3">
         <slot name="icon">
           <div
             v-if="icon"
-            class="flex h-10 w-10 items-center justify-center rounded-xl bg-primary/10"
+            class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-primary/10"
           >
             <component
               :is="icon"
@@ -14,13 +14,13 @@
           </div>
         </slot>
 
-        <div>
-          <h1 class="text-2xl font-semibold text-foreground sm:text-3xl">
+        <div class="min-w-0">
+          <h1 class="break-words text-2xl font-semibold text-foreground sm:text-3xl">
             {{ title }}
           </h1>
           <p
             v-if="description"
-            class="mt-1 text-sm text-muted-foreground"
+            class="mt-1 break-words text-sm text-muted-foreground"
           >
             {{ description }}
           </p>
@@ -30,7 +30,7 @@
 
     <div
       v-if="$slots.actions"
-      class="flex items-center gap-2"
+      class="flex min-w-0 flex-wrap items-center gap-2 sm:max-w-[50%] sm:justify-end"
     >
       <slot name="actions" />
     </div>

frontend/src/components/layout/SidebarNav.vue

@@ -21,7 +21,7 @@
           :class="index > 0 ? 'pt-1' : ''"
         >
           <span class="text-[10px] font-medium text-muted-foreground/50 font-mono tabular-nums">{{ String(index + 1).padStart(2, '0') }}</span>
-          <span class="text-[10px] font-semibold text-muted-foreground/70 uppercase tracking-[0.1em]">{{ group.title }}</span>
+          <span class="min-w-0 break-words text-[10px] font-semibold leading-4 text-muted-foreground/70 uppercase tracking-normal">{{ group.title }}</span>
         </div>
 
         <!-- Links -->
@@ -37,7 +37,7 @@
               <TooltipTrigger as-child>
                 <RouterLink
                   :to="item.href"
-                  class="group relative flex items-center rounded-lg"
+                  class="group relative flex min-w-0 items-center gap-2 rounded-lg"
                   :class="[
                     collapsed
                       ? 'h-9 justify-center px-0 transition-colors duration-150'
@@ -62,7 +62,7 @@
                     />
                     <span
                       v-if="!collapsed"
-                      class="truncate text-[13px] tracking-tight"
+                      class="min-w-0 break-words text-[13px] leading-5 tracking-normal"
                     >{{ item.name }}</span>
                   </div>