Cap app launcher at 18 items with a visible scroll indicator.

When more than six rows of apps are available, the launcher panel stays fixed
height and scrolls with a styled scrollbar instead of growing indefinitely.

Co-authored-by: Cursor <cursoragent@cursor.com>

resources/css/app.css

@@ -164,3 +164,34 @@ html.qr-mobile-page body {
         width: auto;
     }
 }
+
+/* Ladill app launcher — cap at 6 rows (18 apps), scroll with visible indicator */
+.ladill-launcher-apps {
+    max-height: calc(6 * 5.25rem + 5 * 0.25rem);
+    overflow-y: scroll;
+    overscroll-behavior: contain;
+    scrollbar-gutter: stable;
+    scrollbar-width: thin;
+    scrollbar-color: rgb(203 213 225) rgb(248 250 252);
+    margin-right: -0.25rem;
+    padding-right: 0.25rem;
+}
+
+.ladill-launcher-apps::-webkit-scrollbar {
+    width: 8px;
+}
+
+.ladill-launcher-apps::-webkit-scrollbar-track {
+    background: rgb(248 250 252);
+    border-radius: 9999px;
+}
+
+.ladill-launcher-apps::-webkit-scrollbar-thumb {
+    background-color: rgb(203 213 225);
+    border-radius: 9999px;
+    min-height: 2.5rem;
+}
+
+.ladill-launcher-apps::-webkit-scrollbar-thumb:hover {
+    background-color: rgb(148 163 184);
+}

resources/views/partials/launcher.blade.php

@@ -10,6 +10,7 @@
         config('ladill_launcher.apps', []),
         fn (array $app) => parse_url($app['url'], PHP_URL_HOST) !== $selfHost
     ));
+    $launcherOverflows = count($launcherApps) > 18;
 @endphp
 @if (! empty($launcherApps))
 <div class="relative" x-data="{ appsOpen: false }" @click.outside="appsOpen = false" @keydown.escape.window="appsOpen = false">
@@ -37,16 +38,18 @@
              'bottom-full left-0 mb-2' => $sidebar,
          ])>
         <p class="px-1 pb-2 text-[10px] font-bold uppercase tracking-widest text-slate-400">All apps</p>
-        <div class="grid grid-cols-3 gap-1">
+        <div @class(['ladill-launcher-apps' => $launcherOverflows])>
+            <div class="grid grid-cols-3 gap-1">
             @foreach ($launcherApps as $app)
                 <a href="{{ $app['url'] }}"
-                   class="flex flex-col items-center gap-1.5 rounded-xl px-2 py-3 text-center transition hover:bg-indigo-50">
+                   class="flex min-h-[5.25rem] flex-col items-center justify-center gap-1.5 rounded-xl px-2 py-3 text-center transition hover:bg-indigo-50">
                     <span class="flex h-9 w-9 items-center justify-center rounded-lg bg-slate-100">
                         <img src="{{ asset('images/launcher-icons/'.$app['icon']) }}?v={{ @filemtime(public_path('images/launcher-icons/'.$app['icon'])) ?: '1' }}" alt="" class="h-5 w-5 object-contain" width="20" height="20">
                     </span>
                     <span class="text-[11px] font-medium leading-tight text-slate-700">{{ $app['name'] }}</span>
                 </a>
             @endforeach
+            </div>
         </div>
     </div>
 </div>