Make launcher scroll affordance visible on open.

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

resources/css/app.css

@@ -131,36 +131,86 @@ html.qr-mobile-page body {
     }
 }
 
-/* Ladill app launcher — cap at 6 rows (18 apps), always-visible scroll indicator */
+/* Ladill app launcher — cap at 6 rows (18 apps), always-visible scroll cues */
+.ladill-launcher-apps-wrap {
+    position: relative;
+}
+
 .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(148 163 184) rgb(241 245 249);
+    scrollbar-color: rgb(100 116 139) rgb(226 232 240);
     margin-right: -0.25rem;
     padding-right: 0.25rem;
 }
 
+/* Clip the last visible row so the next row peeks — scroll is obvious without hovering. */
+.ladill-launcher-apps--peek {
+    max-height: calc(6 * 5.25rem + 5 * 0.25rem - 1.75rem);
+}
+
 .ladill-launcher-apps::-webkit-scrollbar {
     -webkit-appearance: none;
-    width: 8px;
+    width: 10px;
 }
 
 .ladill-launcher-apps::-webkit-scrollbar-track {
-    background: rgb(241 245 249);
+    background: rgb(226 232 240);
     border-radius: 9999px;
 }
 
 .ladill-launcher-apps::-webkit-scrollbar-thumb {
-    background-color: rgb(148 163 184);
+    background-color: rgb(100 116 139);
     border-radius: 9999px;
     min-height: 2.5rem;
-    border: 2px solid rgb(241 245 249);
+    border: 2px solid rgb(226 232 240);
     background-clip: padding-box;
 }
 
 .ladill-launcher-apps::-webkit-scrollbar-thumb:hover {
-    background-color: rgb(100 116 139);
+    background-color: rgb(71 85 105);
+}
+
+/* Always-visible rail — does not rely on OS overlay scrollbars. */
+.ladill-launcher-scroll-rail {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 10px;
+    border-radius: 9999px;
+    background: rgb(226 232 240);
+    pointer-events: none;
+}
+
+.ladill-launcher-scroll-fade {
+    position: absolute;
+    left: 0;
+    right: 12px;
+    bottom: 0;
+    height: 2.25rem;
+    background: linear-gradient(to bottom, rgb(255 255 255 / 0), rgb(255 255 255));
+    pointer-events: none;
+}
+
+.ladill-launcher-scroll-more {
+    position: absolute;
+    left: 50%;
+    bottom: 0.125rem;
+    z-index: 1;
+    display: flex;
+    height: 1.25rem;
+    width: 1.25rem;
+    -webkit-transform: translateX(-50%);
+    transform: translateX(-50%);
+    align-items: center;
+    justify-content: center;
+    border-radius: 9999px;
+    background: rgb(255 255 255);
+    color: rgb(100 116 139);
+    box-shadow: 0 1px 2px rgb(15 23 42 / 0.08);
+    pointer-events: none;
 }

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,18 +38,29 @@
              '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="ladill-launcher-apps">
+        <div @class(['ladill-launcher-apps-wrap' => $launcherOverflows])>
-            <div class="grid grid-cols-3 gap-1">
+            <div @class(['ladill-launcher-apps', 'ladill-launcher-apps--peek' => $launcherOverflows])>
-            @foreach ($launcherApps as $app)
+                <div class="grid grid-cols-3 gap-1">
-                <a href="{{ $app['url'] }}"
+                @foreach ($launcherApps as $app)
-                   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">
+                    <a href="{{ $app['url'] }}"
-                    <span class="flex h-9 w-9 items-center justify-center rounded-lg bg-slate-100">
+                       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">
-                        <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 class="flex h-9 w-9 items-center justify-center rounded-lg bg-slate-100">
-                    </span>
+                            <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 class="text-[11px] font-medium leading-tight text-slate-700">{{ $app['name'] }}</span>
+                        </span>
-                </a>
+                        <span class="text-[11px] font-medium leading-tight text-slate-700">{{ $app['name'] }}</span>
-            @endforeach
+                    </a>
+                @endforeach
+                </div>
             </div>
+            @if ($launcherOverflows)
+                <div class="ladill-launcher-scroll-rail" aria-hidden="true"></div>
+                <div class="ladill-launcher-scroll-fade" aria-hidden="true"></div>
+                <div class="ladill-launcher-scroll-more" aria-hidden="true">
+                    <svg class="h-3.5 w-3.5" viewBox="0 0 20 20" fill="currentColor">
+                        <path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"/>
+                    </svg>
+                </div>
+            @endif
         </div>
     </div>
 </div>