Fix responsiveness

vigilcare-records-web/src/components/AppHeader.vue

@@ -1,15 +1,31 @@
 <template>
   <div class="app-header">
-    <div class="app-header-title">
-      <h1 class="text-lg font-semibold text-ink-strong">{{ title }}</h1>
-      <slot name="subtitle" />
+    <div class="app-header-title min-w-0 flex-1">
+      <div class="min-w-0">
+        <h1 class="text-lg sm:text-xl font-semibold text-ink-strong leading-tight">
+          {{ title }}
+        </h1>
+        <p
+          v-if="description"
+          class="mt-0.5 text-sm text-ink-secondary leading-snug max-w-2xl"
+        >
+          {{ description }}
+        </p>
+        <slot name="subtitle" />
+      </div>
     </div>
-    <div class="app-header-actions">
+    <div class="app-header-actions self-start">
       <slot name="actions" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-defineProps<{ title: string }>()
+withDefaults(
+  defineProps<{
+    title: string
+    description?: string
+  }>(),
+  { description: undefined },
+)
 </script>