refactor: fix card width in mobile

ui/app/assets/css/tailwind.css

@@ -100,42 +100,42 @@
   }
 
   .ytp-card {
-    @apply rounded-lg border bg-elevated/20;
+    @apply min-w-0 max-w-full rounded-lg border bg-elevated/20;
     border-color: var(--ytp-surface-border-soft);
   }
 
   .ytp-card-padded {
-    @apply rounded-lg border bg-elevated/20 p-4;
+    @apply min-w-0 max-w-full rounded-lg border bg-elevated/20 p-4;
     border-color: var(--ytp-surface-border-soft);
   }
 
   .ytp-card-padded-lg {
-    @apply rounded-lg border bg-elevated/20 p-4 sm:p-5;
+    @apply min-w-0 max-w-full rounded-lg border bg-elevated/20 p-4 sm:p-5;
     border-color: var(--ytp-surface-border-soft);
   }
 
   .ytp-panel {
-    @apply rounded-lg border;
+    @apply min-w-0 max-w-full rounded-lg border;
     border-color: var(--ytp-surface-border-soft);
   }
 
   .ytp-panel-padded {
-    @apply rounded-lg border p-4;
+    @apply min-w-0 max-w-full rounded-lg border p-4;
     border-color: var(--ytp-surface-border-soft);
   }
 
   .ytp-panel-padded-lg {
-    @apply rounded-lg border p-4 sm:p-5;
+    @apply min-w-0 max-w-full rounded-lg border p-4 sm:p-5;
     border-color: var(--ytp-surface-border-soft);
   }
 
   .ytp-frame {
-    @apply rounded-lg border;
+    @apply min-w-0 max-w-full rounded-lg border;
     border-color: var(--ytp-surface-border-soft);
   }
 
   .ytp-table-surface {
-    @apply rounded-sm border bg-elevated/20;
+    @apply min-w-0 max-w-full rounded-sm border bg-elevated/20;
     border-color: var(--ytp-surface-border-solid);
   }
 

ui/app/components/LogDetailModal.vue

@@ -221,7 +221,7 @@
             >
               <button
                 type="button"
-                class="grid w-full grid-cols-[minmax(0,1fr)_auto] items-center gap-3 px-3 py-2 text-left sm:grid-cols-[minmax(0,12rem)_minmax(0,1fr)]"
+                class="grid w-full grid-cols-[minmax(7rem,0.45fr)_minmax(0,1fr)] items-center gap-3 px-3 py-2 text-left sm:grid-cols-[minmax(0,12rem)_minmax(0,1fr)]"
                 @click="toggleField(field.key)"
               >
                 <span

ui/app/components/SettingsPanel.vue

@@ -408,6 +408,10 @@ const toastPositionItems: Array<{ label: string; value: toastPosition }> = [
   { label: 'bottom-right', value: 'bottom-right' },
 ];
 
+const closeScrollLock = (): void => {
+  document.body.classList.remove('settings-panel-open');
+};
+
 const handleKeydown = (e: KeyboardEvent) => {
   if ('Escape' === e.key && props.isOpen) {
     e.preventDefault();
@@ -427,7 +431,10 @@ onMounted(async () => {
   document.addEventListener('keydown', handleKeydown);
 });
 
-onBeforeUnmount(() => document.removeEventListener('keydown', handleKeydown));
+onBeforeUnmount(() => {
+  document.removeEventListener('keydown', handleKeydown);
+  closeScrollLock();
+});
 
 const onNotificationTargetChange = async (): Promise<void> => {
   if ('browser' === toast_target.value) {
@@ -448,7 +455,7 @@ watch(
       draftMode.value = mode.value;
       document.body.classList.add('settings-panel-open');
     } else {
-      document.body.classList.remove('settings-panel-open');
+      closeScrollLock();
     }
   },
 );

ui/app/pages/browser/[...slug].vue

@@ -315,7 +315,11 @@
     </div>
 
     <div v-else-if="hasItems" class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
-      <div v-for="item in filteredItems" :key="item.path" class="ytp-card flex h-full flex-col">
+      <div
+        v-for="item in filteredItems"
+        :key="item.path"
+        class="ytp-card flex h-full flex-col overflow-hidden"
+      >
         <div class="p-4 pb-3 ytp-border-bottom-soft">
           <div class="flex items-start justify-between gap-3">
             <div class="min-w-0 flex-1">

ui/app/pages/conditions.vue

@@ -234,7 +234,7 @@
 
     <div v-else-if="filteredItems.length > 0" class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
       <div v-for="cond in filteredItems" :key="cond.id" class="min-w-0 w-full max-w-full">
-        <div class="ytp-card flex h-full min-w-0 w-full max-w-full flex-col">
+        <div class="ytp-card flex h-full min-w-0 w-full max-w-full flex-col overflow-hidden">
           <div class="p-4 pb-3 ytp-border-bottom-soft">
             <div class="flex min-w-0 items-start justify-between gap-3">
               <div class="min-w-0 flex-1">

ui/app/pages/dl_fields.vue

@@ -233,7 +233,7 @@
 
     <div v-else-if="filteredItems.length > 0" class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
       <div v-for="field in filteredItems" :key="field.id" class="min-w-0 w-full max-w-full">
-        <div class="ytp-card flex h-full min-w-0 w-full max-w-full flex-col">
+        <div class="ytp-card flex h-full min-w-0 w-full max-w-full flex-col overflow-hidden">
           <div class="p-4 pb-3 ytp-border-bottom-soft">
             <div class="flex min-w-0 items-start justify-between gap-3">
               <div class="min-w-0 flex-1">

ui/app/pages/docs/[...slug].vue

@@ -1,5 +1,5 @@
 <template>
-  <main class="space-y-6">
+  <main class="w-full min-w-0 max-w-full space-y-6">
     <div class="ytp-page-header">
       <div class="ytp-page-heading">
         <span class="ytp-page-icon">
@@ -18,8 +18,8 @@
       </div>
     </div>
 
-    <div class="ytp-card p-0">
+    <div class="ytp-card p-0 overflow-hidden">
-      <div class="px-4 py-5 sm:px-6 sm:py-6 lg:px-7">
+      <div class="min-w-0 max-w-full px-4 py-5 sm:px-6 sm:py-6 lg:px-7">
         <Markdown :file="`/api/docs/${docEntry.file}`" />
       </div>
     </div>

ui/app/pages/notifications.vue

@@ -271,7 +271,7 @@
 
     <div v-else-if="filteredTargets.length > 0" class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
       <div v-for="item in filteredTargets" :key="item.id" class="min-w-0 w-full max-w-full">
-        <div class="ytp-card flex h-full min-w-0 w-full max-w-full flex-col">
+        <div class="ytp-card flex h-full min-w-0 w-full max-w-full flex-col overflow-hidden">
           <div class="p-4 pb-3 ytp-border-bottom-soft">
             <div class="flex min-w-0 items-start justify-between gap-3">
               <div class="min-w-0 flex-1">

ui/app/pages/presets.vue

@@ -232,7 +232,7 @@
 
     <div v-else-if="filteredPresets.length > 0" class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
       <div v-for="item in filteredPresets" :key="item.id" class="min-w-0 w-full max-w-full">
-        <div class="ytp-card flex h-full min-w-0 w-full max-w-full flex-col">
+        <div class="ytp-card flex h-full min-w-0 w-full max-w-full flex-col overflow-hidden">
           <div class="p-4 pb-3 ytp-border-bottom-soft">
             <div class="flex min-w-0 items-start justify-between gap-3">
               <div class="min-w-0 flex-1">

ui/app/pages/task_definitions.vue

@@ -262,7 +262,7 @@
         :key="definition.id"
         class="min-w-0 w-full max-w-full"
       >
-        <div class="ytp-card flex h-full min-w-0 w-full max-w-full flex-col">
+        <div class="ytp-card flex h-full min-w-0 w-full max-w-full flex-col overflow-hidden">
           <div class="p-4 pb-3 ytp-border-bottom-soft">
             <div class="flex min-w-0 items-start justify-between gap-3">
               <div class="min-w-0 flex-1">

ui/app/pages/tasks.vue

@@ -335,7 +335,7 @@
       class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3"
     >
       <div v-for="item in filteredTasks" :key="item.id" class="min-w-0 w-full max-w-full">
-        <div class="ytp-card flex h-full min-w-0 w-full max-w-full flex-col">
+        <div class="ytp-card flex h-full min-w-0 w-full max-w-full flex-col overflow-hidden">
           <div class="p-4 pb-3 ytp-border-bottom-soft">
             <div class="flex min-w-0 items-start justify-between gap-3">
               <div class="min-w-0 flex-1 space-y-2">