fix: prevent mobile directory title truncation

src/layouts/BaseLayout.astro

@@ -10,7 +10,7 @@ const isApplication = Astro.url.pathname.startsWith("/app") || Astro.url.pathnam
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="description" content={description} />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <link rel="manifest" href="/site.webmanifest" />

src/styles/responsive.css

@@ -603,11 +603,23 @@
     min-height: 52px !important;
     padding: 0 !important;
   }
+  .application-body .entity-directory-table.read-only .entity-directory-row {
+    grid-template-columns: 30px minmax(0, 1fr) !important;
+  }
   .application-body .entity-directory-row .entity-directory-name strong {
     font-size: 15px !important;
     font-weight: 500 !important;
     color: #050841 !important;
   }
+  .application-body .entity-directory-name a {
+    overflow: visible !important;
+    text-overflow: clip !important;
+    white-space: normal !important;
+    line-height: 1.25 !important;
+  }
+  .application-body .entity-directory-row {
+    padding-block: 8px !important;
+  }
 
   .bulk-ingredient-backdrop { padding: 0 !important; }
   .bulk-ingredient-dialog { width: 100% !important; max-height: 100vh !important; min-height: 100vh !important; padding: 52px 22px 28px !important; border-radius: 0 !important; }