fix: Mobile style fixes and other small ui fixes

toju-app/src/app/domains/plugins/feature/plugin-manager/plugin-manager.component.html

@@ -1,13 +1,13 @@
 <!-- eslint-disable @angular-eslint/template/cyclomatic-complexity -->
 <section
-  class="flex h-full min-h-0 flex-col bg-background text-foreground"
+  class="flex min-h-full flex-col bg-background text-foreground md:h-full md:min-h-0"
   data-testid="plugin-manager"
 >
-  <header class="flex items-center justify-between border-b border-border px-4 py-3">
-    <div class="flex min-w-0 items-center gap-3">
+  <header class="flex flex-col gap-3 border-b border-border px-3 py-3 md:flex-row md:items-center md:justify-between md:px-4">
+    <div class="flex min-w-0 items-center gap-3 md:flex-1">
       <button
         type="button"
-        class="inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground"
+        class="inline-flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground md:h-8 md:w-8"
         aria-label="Back to settings"
         (click)="close()"
       >
@@ -21,38 +21,40 @@
         <p class="truncate text-xs text-muted-foreground">{{ managerDescription() }}</p>
       </div>
     </div>
-    <button
-      type="button"
-      class="inline-flex h-8 items-center gap-2 rounded-md border border-border px-3 text-sm hover:bg-muted disabled:opacity-50"
-      [disabled]="busyAll()"
-      (click)="activateAll()"
-    >
-      <ng-icon
-        name="lucidePlay"
-        size="16"
-      />
-      Activate ready plugins
-    </button>
-    <button
-      type="button"
-      class="inline-flex h-8 items-center gap-2 rounded-md border border-border px-3 text-sm hover:bg-muted"
-      (click)="openStore()"
-    >
-      <ng-icon
-        name="lucideStore"
-        size="16"
-      />
-      Open Plugin Store
-    </button>
+    <div class="grid grid-cols-1 gap-2 sm:grid-cols-2 md:flex md:flex-shrink-0 md:items-center">
+      <button
+        type="button"
+        class="inline-flex min-h-11 items-center justify-center gap-2 rounded-md border border-border px-3 text-sm hover:bg-muted disabled:opacity-50 md:h-8 md:min-h-0"
+        [disabled]="busyAll()"
+        (click)="activateAll()"
+      >
+        <ng-icon
+          name="lucidePlay"
+          size="16"
+        />
+        Activate ready plugins
+      </button>
+      <button
+        type="button"
+        class="inline-flex min-h-11 items-center justify-center gap-2 rounded-md border border-border px-3 text-sm hover:bg-muted md:h-8 md:min-h-0"
+        (click)="openStore()"
+      >
+        <ng-icon
+          name="lucideStore"
+          size="16"
+        />
+        Open Plugin Store
+      </button>
+    </div>
   </header>
 
   <nav
-    class="flex gap-2 border-b border-border px-4 py-2"
+    class="no-scrollbar flex gap-2 overflow-x-auto border-b border-border px-3 py-2 md:px-4"
     aria-label="Plugin manager sections"
   >
     <button
       type="button"
-      class="inline-flex h-8 items-center gap-2 rounded-md px-3 text-sm"
+      class="inline-flex h-11 flex-shrink-0 items-center gap-2 rounded-md px-3 text-sm md:h-8"
       [class.bg-muted]="activeTab() === 'installed'"
       (click)="setTab('installed')"
     >
@@ -64,7 +66,7 @@
     </button>
     <button
       type="button"
-      class="inline-flex h-8 items-center gap-2 rounded-md px-3 text-sm"
+      class="inline-flex h-11 flex-shrink-0 items-center gap-2 rounded-md px-3 text-sm md:h-8"
       [class.bg-muted]="activeTab() === 'extensions'"
       (click)="setTab('extensions')"
     >
@@ -76,7 +78,7 @@
     </button>
     <button
       type="button"
-      class="inline-flex h-8 items-center gap-2 rounded-md px-3 text-sm"
+      class="inline-flex h-11 flex-shrink-0 items-center gap-2 rounded-md px-3 text-sm md:h-8"
       [class.bg-muted]="activeTab() === 'requirements'"
       (click)="setTab('requirements')"
     >
@@ -88,7 +90,7 @@
     </button>
     <button
       type="button"
-      class="inline-flex h-8 items-center gap-2 rounded-md px-3 text-sm"
+      class="inline-flex h-11 flex-shrink-0 items-center gap-2 rounded-md px-3 text-sm md:h-8"
       [class.bg-muted]="activeTab() === 'settings'"
       (click)="setTab('settings')"
     >
@@ -100,7 +102,7 @@
     </button>
     <button
       type="button"
-      class="inline-flex h-8 items-center gap-2 rounded-md px-3 text-sm"
+      class="inline-flex h-11 flex-shrink-0 items-center gap-2 rounded-md px-3 text-sm md:h-8"
       [class.bg-muted]="activeTab() === 'docs'"
       (click)="setTab('docs')"
     >
@@ -112,7 +114,7 @@
     </button>
     <button
       type="button"
-      class="inline-flex h-8 items-center gap-2 rounded-md px-3 text-sm"
+      class="inline-flex h-11 flex-shrink-0 items-center gap-2 rounded-md px-3 text-sm md:h-8"
       [class.bg-muted]="activeTab() === 'logs'"
       (click)="setTab('logs')"
     >
@@ -124,7 +126,7 @@
     </button>
   </nav>
 
-  <div class="min-h-0 flex-1 overflow-auto p-4">
+  <div class="min-h-0 flex-1 overflow-auto p-3 md:p-4">
     @switch (activeTab()) {
       @case ('extensions') {
         <div class="space-y-4">
@@ -216,7 +218,7 @@
             @for (entry of entries(); track trackEntry($index, entry)) {
               <button
                 type="button"
-                class="w-full rounded-md border border-border px-3 py-2 text-left text-sm hover:bg-muted"
+                class="min-h-11 w-full rounded-md border border-border px-3 py-2 text-left text-sm hover:bg-muted md:min-h-0"
                 [class.bg-muted]="isSelected(entry)"
                 (click)="selectPlugin(entry.manifest.id)"
               >
@@ -224,7 +226,7 @@
               </button>
             }
           </div>
-          <section class="rounded-lg border border-border bg-card p-4">
+          <section class="rounded-lg border border-border bg-card p-3 md:p-4">
             @if (selectedPlugin(); as plugin) {
               <h3 class="text-sm font-semibold">{{ plugin.manifest.title }} settings</h3>
               @if (selectedSettingsPages().length > 0) {
@@ -255,7 +257,7 @@
             @for (entry of entries(); track trackEntry($index, entry)) {
               <button
                 type="button"
-                class="w-full rounded-md border border-border px-3 py-2 text-left text-sm hover:bg-muted"
+                class="min-h-11 w-full rounded-md border border-border px-3 py-2 text-left text-sm hover:bg-muted md:min-h-0"
                 [class.bg-muted]="isSelected(entry)"
                 (click)="selectPlugin(entry.manifest.id)"
               >
@@ -263,14 +265,14 @@
               </button>
             }
           </div>
-          <section class="rounded-lg border border-border bg-card p-4">
+          <section class="rounded-lg border border-border bg-card p-3 md:p-4">
             @if (selectedPlugin(); as plugin) {
               <h3 class="text-sm font-semibold">{{ plugin.manifest.title }}</h3>
               <p class="mt-2 text-sm text-muted-foreground">{{ plugin.manifest.description }}</p>
               <div class="mt-4 flex flex-wrap gap-2">
                 @for (doc of selectedDocs(); track doc.label) {
                   <a
-                    class="rounded-md border border-border px-3 py-1.5 text-sm hover:bg-muted"
+                    class="inline-flex min-h-11 items-center rounded-md border border-border px-3 py-1.5 text-sm hover:bg-muted md:min-h-0"
                     [href]="doc.url"
                     target="_blank"
                     rel="noreferrer"
@@ -292,7 +294,7 @@
               @for (entry of entries(); track trackEntry($index, entry)) {
                 <button
                   type="button"
-                  class="rounded-md border border-border px-3 py-1 text-sm hover:bg-muted"
+                  class="min-h-11 rounded-md border border-border px-3 py-1 text-sm hover:bg-muted md:min-h-0"
                   [class.bg-muted]="isSelected(entry)"
                   (click)="selectPlugin(entry.manifest.id)"
                 >
@@ -323,7 +325,7 @@
           <div class="space-y-3">
             @if (entries().length === 0) {
               <div
-                class="rounded-lg border border-dashed border-border p-8 text-center"
+                class="rounded-lg border border-dashed border-border p-5 text-center md:p-8"
                 data-testid="plugin-empty-state"
               >
                 <ng-icon
@@ -337,7 +339,7 @@
             } @else {
               @for (entry of entries(); track trackEntry($index, entry)) {
                 <article
-                  class="rounded-lg border border-border bg-card p-4"
+                  class="rounded-lg border border-border bg-card p-3 md:p-4"
                   [class.ring-2]="isSelected(entry)"
                   [class.ring-primary]="isSelected(entry)"
                 >
@@ -351,17 +353,17 @@
                       <p class="mt-1 text-sm text-muted-foreground">{{ entry.manifest.description }}</p>
                       <p class="mt-2 text-xs text-muted-foreground">{{ entry.manifest.id }}</p>
                     </div>
-                    <div class="flex flex-wrap gap-2">
+                    <div class="grid w-full grid-cols-2 gap-2 sm:flex sm:w-auto sm:flex-wrap">
                       <button
                         type="button"
-                        class="inline-flex h-8 items-center gap-1.5 rounded-md border border-border px-2 text-sm hover:bg-muted"
+                        class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-md border border-border px-2 text-sm hover:bg-muted md:h-8 md:min-h-0"
                         (click)="selectPlugin(entry.manifest.id)"
                       >
                         Select
                       </button>
                       <button
                         type="button"
-                        class="inline-flex h-8 items-center gap-1.5 rounded-md border border-border px-2 text-sm hover:bg-muted"
+                        class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-md border border-border px-2 text-sm hover:bg-muted md:h-8 md:min-h-0"
                         (click)="setEnabled(entry, !entry.enabled)"
                       >
                         <ng-icon
@@ -372,7 +374,7 @@
                       </button>
                       <button
                         type="button"
-                        class="inline-flex h-8 items-center gap-1.5 rounded-md border border-border px-2 text-sm hover:bg-muted disabled:opacity-50"
+                        class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-md border border-border px-2 text-sm hover:bg-muted disabled:opacity-50 md:h-8 md:min-h-0"
                         [disabled]="busyPluginId() === entry.manifest.id || !entry.enabled || isActive(entry)"
                         (click)="activate(entry)"
                       >
@@ -384,7 +386,7 @@
                       </button>
                       <button
                         type="button"
-                        class="inline-flex h-8 items-center gap-1.5 rounded-md border border-border px-2 text-sm hover:bg-muted disabled:opacity-50"
+                        class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-md border border-border px-2 text-sm hover:bg-muted disabled:opacity-50 md:h-8 md:min-h-0"
                         [disabled]="busyPluginId() === entry.manifest.id"
                         (click)="reload(entry)"
                       >
@@ -396,7 +398,7 @@
                       </button>
                       <button
                         type="button"
-                        class="inline-flex h-8 items-center gap-1.5 rounded-md border border-border px-2 text-sm hover:bg-muted disabled:opacity-50"
+                        class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-md border border-border px-2 text-sm hover:bg-muted disabled:opacity-50 md:h-8 md:min-h-0"
                         [disabled]="busyPluginId() === entry.manifest.id"
                         (click)="unload(entry)"
                       >
@@ -416,7 +418,7 @@
             }
           </div>
 
-          <aside class="rounded-lg border border-border bg-card p-4">
+          <aside class="rounded-lg border border-border bg-card p-3 md:p-4">
             @if (selectedPlugin(); as plugin) {
               <div class="flex items-center gap-2">
                 <ng-icon
@@ -430,14 +432,14 @@
               } @else {
                 <button
                   type="button"
-                  class="mt-3 h-8 rounded-md border border-border px-3 text-sm hover:bg-muted"
+                  class="mt-3 min-h-11 rounded-md border border-border px-3 text-sm hover:bg-muted md:h-8 md:min-h-0"
                   (click)="grantAll(plugin)"
                 >
                   Grant all requested
                 </button>
                 <div class="mt-3 space-y-2">
                   @for (capability of plugin.manifest.capabilities; track trackCapability($index, capability)) {
-                    <label class="flex items-center gap-2 rounded-md border border-border px-3 py-2 text-sm">
+                    <label class="flex min-h-11 items-center gap-2 rounded-md border border-border px-3 py-2 text-sm md:min-h-0">
                       <input
                         type="checkbox"
                         class="h-4 w-4"