From 036190b2bbee68de4a3301bd35f39e6d82fe38d0 Mon Sep 17 00:00:00 2001
From: Dylann Batisse <dylann.batisse@protonmail.com>
Date: Thu, 9 Apr 2026 23:23:54 +0200
Subject: [PATCH] fix(ui): fix mobile scrolling in grid filters and sidebar

---
 .../components/grid/GridFiltersPanel.svelte   |    4 +-
 ui/src/components/grid/GridView.svelte        |    4 +-
 ui/src/components/layout/Sidebar.svelte       | 1052 +++++++++--------
 3 files changed, 553 insertions(+), 507 deletions(-)

diff --git a/ui/src/components/grid/GridFiltersPanel.svelte b/ui/src/components/grid/GridFiltersPanel.svelte
index 9261257..00f1588 100644
--- a/ui/src/components/grid/GridFiltersPanel.svelte
+++ b/ui/src/components/grid/GridFiltersPanel.svelte
@@ -187,7 +187,7 @@
               />
             </div>
 
-            <div class="space-y-1 max-h-56 overflow-y-auto pr-1">
+            <div class={cn('space-y-1 pr-1', mobile ? '' : 'max-h-56 overflow-y-auto')}>
               {#if $tagFilterEntries.length === 0}
                 <div class="px-2 py-3 text-xs text-muted-foreground">No tags found.</div>
               {:else}
@@ -250,7 +250,7 @@
               />
             </div>
 
-            <div class="space-y-1 max-h-64 overflow-y-auto pr-1">
+            <div class={cn('space-y-1 pr-1', mobile ? '' : 'max-h-64 overflow-y-auto')}>
               {#if $trackerFilterEntries.length === 0}
                 <div class="px-2 py-3 text-xs text-muted-foreground">No trackers found.</div>
               {:else}
diff --git a/ui/src/components/grid/GridView.svelte b/ui/src/components/grid/GridView.svelte
index 269b6e9..cf4b45a 100644
--- a/ui/src/components/grid/GridView.svelte
+++ b/ui/src/components/grid/GridView.svelte
@@ -137,7 +137,7 @@
 
 {#if mobileFiltersOpen}
   <div
-    class="fixed inset-x-0 bottom-0 z-50 max-h-[82vh] rounded-t-3xl border-t border-border bg-card shadow-2xl lg:hidden"
+    class="fixed inset-x-0 bottom-0 z-50 flex max-h-[82vh] flex-col rounded-t-3xl border-t border-border bg-card shadow-2xl lg:hidden"
   >
     <div class="mx-auto mt-2 h-1.5 w-12 rounded-full bg-muted-foreground/30"></div>
     <div class="flex items-center justify-between gap-3 px-4 py-3 border-b border-border/70">
@@ -171,7 +171,7 @@
       </div>
     </div>
 
-    <div class="overflow-y-auto px-4 py-3 pb-6">
+    <div class="flex-1 min-h-0 overflow-y-auto overscroll-y-contain px-4 py-3 pb-6">
       <GridFiltersPanel mobile={true} showHeader={false} />
     </div>
   </div>
diff --git a/ui/src/components/layout/Sidebar.svelte b/ui/src/components/layout/Sidebar.svelte
index 030144f..b2a3947 100644
--- a/ui/src/components/layout/Sidebar.svelte
+++ b/ui/src/components/layout/Sidebar.svelte
@@ -380,7 +380,7 @@
 
 <aside
   class={cn(
-    'bg-card border-r border-border flex flex-col h-screen transition-all duration-300 ease-in-out overflow-hidden',
+    'bg-card border-r border-border flex h-dvh flex-col overflow-hidden transition-all duration-300 ease-in-out lg:h-screen',
     'fixed lg:sticky top-0 z-50 lg:z-auto',
     // Mobile: slide in/out
     isOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0',
@@ -388,570 +388,616 @@
     isCollapsed ? 'w-64 lg:w-16' : 'w-64'
   )}
 >
-  <!-- Sidebar Header -->
-  <div class="p-4 border-b border-border">
-    <div class="flex items-center justify-between mb-3">
-      <h2
-        class={cn(
-          'text-lg font-semibold text-foreground transition-opacity duration-200',
-          isCollapsed && 'lg:opacity-0 lg:w-0 lg:overflow-hidden'
-        )}
-      >
-        {isGridMode ? 'Grid Mode' : isWatchMode ? 'Watch Mode' : 'Instances'}
-      </h2>
-
-      <!-- Desktop Toggle Button -->
-      <button
-        class="hidden lg:block p-1 rounded hover:bg-muted cursor-pointer"
-        onclick={() => (isCollapsed = !isCollapsed)}
-        title={isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
-      >
-        <span class={cn('transition-transform duration-300 block', isCollapsed && 'rotate-180')}>
-          <PanelLeftClose size={16} />
-        </span>
-      </button>
-    </div>
+  <div class={cn('flex min-h-0 flex-1 flex-col', isOpen && 'overflow-y-auto overscroll-y-contain')}>
+    <!-- Sidebar Header -->
+    <div class="shrink-0 border-b border-border bg-card p-4">
+      <div class="flex items-center justify-between mb-3">
+        <h2
+          class={cn(
+            'text-lg font-semibold text-foreground transition-opacity duration-200',
+            isCollapsed && 'lg:opacity-0 lg:w-0 lg:overflow-hidden'
+          )}
+        >
+          {isGridMode ? 'Grid Mode' : isWatchMode ? 'Watch Mode' : 'Instances'}
+        </h2>
+
+        <!-- Desktop Toggle Button -->
+        <button
+          class="hidden lg:block p-1 rounded hover:bg-muted cursor-pointer"
+          onclick={() => (isCollapsed = !isCollapsed)}
+          title={isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+        >
+          <span class={cn('transition-transform duration-300 block', isCollapsed && 'rotate-180')}>
+            <PanelLeftClose size={16} />
+          </span>
+        </button>
+      </div>
 
-    <!-- View Mode Toggle -->
-    {#if !isCompact}
-      <div class="space-y-3 mb-4">
-        <div class="text-[10px] uppercase tracking-[0.2em] text-muted-foreground px-1">View</div>
-        <div class="space-y-1">
-          <button
-            class={cn(
-              'w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors text-left relative cursor-pointer',
-              !isGridMode && !isWatchMode
-                ? 'bg-muted text-foreground'
-                : 'text-muted-foreground hover:text-foreground hover:bg-muted/70'
-            )}
-            onclick={() => viewMode.set('standard')}
-            title="Standard view - manage individual instances"
-          >
-            <span
+      <!-- View Mode Toggle -->
+      {#if !isCompact}
+        <div class="space-y-3 mb-4">
+          <div class="text-[10px] uppercase tracking-[0.2em] text-muted-foreground px-1">View</div>
+          <div class="space-y-1">
+            <button
               class={cn(
-                'absolute left-1 top-2 bottom-2 w-0.5 rounded-full',
-                !isGridMode && !isWatchMode ? 'bg-primary' : 'bg-transparent'
+                'w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors text-left relative cursor-pointer',
+                !isGridMode && !isWatchMode
+                  ? 'bg-muted text-foreground'
+                  : 'text-muted-foreground hover:text-foreground hover:bg-muted/70'
               )}
-              aria-hidden="true"
-            ></span>
-            <List size={16} class="flex-shrink-0" />
-            <span class="flex-1 min-w-0 truncate">Standard</span>
-          </button>
+              onclick={() => viewMode.set('standard')}
+              title="Standard view - manage individual instances"
+            >
+              <span
+                class={cn(
+                  'absolute left-1 top-2 bottom-2 w-0.5 rounded-full',
+                  !isGridMode && !isWatchMode ? 'bg-primary' : 'bg-transparent'
+                )}
+                aria-hidden="true"
+              ></span>
+              <List size={16} class="flex-shrink-0" />
+              <span class="flex-1 min-w-0 truncate">Standard</span>
+            </button>
 
-          <button
-            class={cn(
-              'w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors text-left relative cursor-pointer',
-              isGridMode
-                ? 'bg-muted text-foreground'
-                : 'text-muted-foreground hover:text-foreground hover:bg-muted/70'
-            )}
-            onclick={() => viewMode.set('grid')}
-            title="Grid view - manage many instances at once"
-          >
-            <span
+            <button
               class={cn(
-                'absolute left-1 top-2 bottom-2 w-0.5 rounded-full',
-                isGridMode ? 'bg-primary' : 'bg-transparent'
+                'w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors text-left relative cursor-pointer',
+                isGridMode
+                  ? 'bg-muted text-foreground'
+                  : 'text-muted-foreground hover:text-foreground hover:bg-muted/70'
               )}
-              aria-hidden="true"
-            ></span>
-            <LayoutGrid size={16} class="flex-shrink-0" />
-            <span class="flex-1 min-w-0 truncate">Grid</span>
-          </button>
+              onclick={() => viewMode.set('grid')}
+              title="Grid view - manage many instances at once"
+            >
+              <span
+                class={cn(
+                  'absolute left-1 top-2 bottom-2 w-0.5 rounded-full',
+                  isGridMode ? 'bg-primary' : 'bg-transparent'
+                )}
+                aria-hidden="true"
+              ></span>
+              <LayoutGrid size={16} class="flex-shrink-0" />
+              <span class="flex-1 min-w-0 truncate">Grid</span>
+            </button>
 
-          <button
-            class={cn(
-              'w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors text-left relative cursor-pointer',
-              isWatchMode
-                ? 'bg-muted text-foreground'
-                : 'text-muted-foreground hover:text-foreground hover:bg-muted/70',
-              !isWatchRuntime && 'opacity-60 cursor-not-allowed'
-            )}
-            onclick={() => (isWatchRuntime ? viewMode.set('watch') : null)}
-            title="Watch folder - manage watch files"
-            disabled={!isWatchRuntime}
-            aria-disabled={!isWatchRuntime}
-          >
-            <span
+            <button
               class={cn(
-                'absolute left-1 top-2 bottom-2 w-0.5 rounded-full',
-                isWatchMode ? 'bg-primary' : 'bg-transparent'
+                'w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors text-left relative cursor-pointer',
+                isWatchMode
+                  ? 'bg-muted text-foreground'
+                  : 'text-muted-foreground hover:text-foreground hover:bg-muted/70',
+                !isWatchRuntime && 'opacity-60 cursor-not-allowed'
               )}
-              aria-hidden="true"
-            ></span>
-            <FolderSearch size={16} class="flex-shrink-0" />
-            <span class="flex-1 min-w-0 truncate">Watch</span>
-            {#if isWatchRuntime && watchCount !== null && watchCount > 0}
+              onclick={() => (isWatchRuntime ? viewMode.set('watch') : null)}
+              title="Watch folder - manage watch files"
+              disabled={!isWatchRuntime}
+              aria-disabled={!isWatchRuntime}
+            >
               <span
-                class="ml-auto inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground text-[10px] font-semibold leading-none px-1.5 min-w-4 h-4"
-                title="{watchCount} watch files"
-              >
-                {watchCount}
-              </span>
-            {/if}
-          </button>
+                class={cn(
+                  'absolute left-1 top-2 bottom-2 w-0.5 rounded-full',
+                  isWatchMode ? 'bg-primary' : 'bg-transparent'
+                )}
+                aria-hidden="true"
+              ></span>
+              <FolderSearch size={16} class="flex-shrink-0" />
+              <span class="flex-1 min-w-0 truncate">Watch</span>
+              {#if isWatchRuntime && watchCount !== null && watchCount > 0}
+                <span
+                  class="ml-auto inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground text-[10px] font-semibold leading-none px-1.5 min-w-4 h-4"
+                  title="{watchCount} watch files"
+                >
+                  {watchCount}
+                </span>
+              {/if}
+            </button>
 
-          <button
-            onclick={() => (showSettings = true)}
-            class="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-muted/70 transition-colors text-left relative cursor-pointer"
-            title="Settings"
-          >
-            <Settings size={16} class="flex-shrink-0" />
-            <span class="flex-1 min-w-0 truncate">Settings</span>
-          </button>
+            <button
+              onclick={() => (showSettings = true)}
+              class="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-muted/70 transition-colors text-left relative cursor-pointer"
+              title="Settings"
+            >
+              <Settings size={16} class="flex-shrink-0" />
+              <span class="flex-1 min-w-0 truncate">Settings</span>
+            </button>
+          </div>
         </div>
-      </div>
-    {/if}
+      {/if}
 
-    <!-- Standard Mode Content -->
-    {#if !isGridMode && !isWatchMode}
-      <!-- Total Stats Summary -->
-      {#if !isCompact && (totalStats().uploaded > 0 || totalStats().downloaded > 0)}
-        <div class="mb-3 p-2 bg-muted/50 rounded-lg text-xs">
-          <div class="flex justify-between text-muted-foreground mb-1">
-            <span>Total Uploaded</span>
-            <span class="font-semibold text-stat-upload"
-              >↑ {formatBytes(totalStats().uploaded)}</span
-            >
+      <!-- Standard Mode Content -->
+      {#if !isGridMode && !isWatchMode}
+        <!-- Total Stats Summary -->
+        {#if !isCompact && (totalStats().uploaded > 0 || totalStats().downloaded > 0)}
+          <div class="mb-3 p-2 bg-muted/50 rounded-lg text-xs">
+            <div class="flex justify-between text-muted-foreground mb-1">
+              <span>Total Uploaded</span>
+              <span class="font-semibold text-stat-upload"
+                >↑ {formatBytes(totalStats().uploaded)}</span
+              >
+            </div>
+            <div class="flex justify-between text-muted-foreground mb-1">
+              <span>Total Downloaded</span>
+              <span class="font-semibold text-stat-leecher"
+                >↓ {formatBytes(totalStats().downloaded)}</span
+              >
+            </div>
+            <div class="flex justify-between text-muted-foreground">
+              <span>Running</span>
+              <span class="font-semibold text-foreground"
+                >{totalStats().running}/{totalStats().total}</span
+              >
+            </div>
           </div>
-          <div class="flex justify-between text-muted-foreground mb-1">
-            <span>Total Downloaded</span>
-            <span class="font-semibold text-stat-leecher"
-              >↓ {formatBytes(totalStats().downloaded)}</span
+        {/if}
+
+        <!-- Bulk Actions -->
+        {#if hasMultipleInstancesWithTorrents}
+          <div class={cn('flex flex-wrap gap-2 mb-3', isCollapsed && 'lg:flex-col')}>
+            <Button
+              onclick={handleStartAll}
+              disabled={!hasStoppedInstancesWithTorrents}
+              size="sm"
+              variant="default"
+              class={cn('gap-1 cursor-pointer', isCollapsed ? 'lg:w-full lg:px-2' : 'flex-1')}
+              title="Start all instances"
             >
-          </div>
-          <div class="flex justify-between text-muted-foreground">
-            <span>Running</span>
-            <span class="font-semibold text-foreground"
-              >{totalStats().running}/{totalStats().total}</span
+              {#snippet children()}
+                <Play size={12} fill="currentColor" />
+                <span class={cn(isCollapsed && 'lg:hidden')}>Start All</span>
+              {/snippet}
+            </Button>
+
+            <Button
+              onclick={handleStopAll}
+              disabled={!hasRunningInstances}
+              size="sm"
+              class={cn(
+                'gap-1 cursor-pointer bg-stat-danger hover:bg-stat-danger/90 text-white shadow-lg shadow-stat-danger/25',
+                isCollapsed ? 'lg:w-full lg:px-2' : 'flex-1'
+              )}
+              title="Stop all instances"
+            >
+              {#snippet children()}
+                <Square size={12} fill="currentColor" />
+                <span class={cn(isCollapsed && 'lg:hidden')}>Stop All</span>
+              {/snippet}
+            </Button>
+
+            <Button
+              onclick={handlePauseAll}
+              disabled={!hasUnpausedRunningInstances}
+              size="sm"
+              class={cn(
+                'gap-1 cursor-pointer bg-stat-ratio hover:bg-stat-ratio/90 text-white shadow-lg shadow-stat-ratio/25',
+                isCollapsed ? 'lg:w-full lg:px-2' : 'flex-1'
+              )}
+              title="Pause all running instances"
+            >
+              {#snippet children()}
+                <Pause size={12} fill="currentColor" />
+                <span class={cn(isCollapsed && 'lg:hidden')}>Pause All</span>
+              {/snippet}
+            </Button>
+
+            <Button
+              onclick={handleResumeAll}
+              disabled={!hasPausedInstances}
+              size="sm"
+              variant="secondary"
+              class={cn('gap-1 cursor-pointer', isCollapsed ? 'lg:w-full lg:px-2' : 'flex-1')}
+              title="Resume all paused instances"
             >
+              {#snippet children()}
+                <Play size={12} fill="currentColor" />
+                <span class={cn(isCollapsed && 'lg:hidden')}>Resume All</span>
+              {/snippet}
+            </Button>
           </div>
-        </div>
+        {/if}
+
+        <!-- Add Instance Button -->
+        <Button
+          onclick={handleAddInstance}
+          size="sm"
+          class={cn('w-full gap-2 cursor-pointer', isCollapsed && 'lg:px-2')}
+          title="Add new instance"
+        >
+          {#snippet children()}
+            <Plus size={16} strokeWidth={2.5} />
+            <span class={cn(isCollapsed && 'lg:hidden')}>New Instance</span>
+          {/snippet}
+        </Button>
       {/if}
+    </div>
 
-      <!-- Bulk Actions -->
-      {#if hasMultipleInstancesWithTorrents}
-        <div class={cn('flex flex-wrap gap-2 mb-3', isCollapsed && 'lg:flex-col')}>
-          <Button
-            onclick={handleStartAll}
-            disabled={!hasStoppedInstancesWithTorrents}
-            size="sm"
-            variant="default"
-            class={cn('gap-1 cursor-pointer', isCollapsed ? 'lg:w-full lg:px-2' : 'flex-1')}
-            title="Start all instances"
-          >
-            {#snippet children()}
-              <Play size={12} fill="currentColor" />
-              <span class={cn(isCollapsed && 'lg:hidden')}>Start All</span>
-            {/snippet}
-          </Button>
-
-          <Button
-            onclick={handleStopAll}
-            disabled={!hasRunningInstances}
-            size="sm"
-            class={cn(
-              'gap-1 cursor-pointer bg-stat-danger hover:bg-stat-danger/90 text-white shadow-lg shadow-stat-danger/25',
-              isCollapsed ? 'lg:w-full lg:px-2' : 'flex-1'
-            )}
-            title="Stop all instances"
-          >
-            {#snippet children()}
-              <Square size={12} fill="currentColor" />
-              <span class={cn(isCollapsed && 'lg:hidden')}>Stop All</span>
-            {/snippet}
-          </Button>
-
-          <Button
-            onclick={handlePauseAll}
-            disabled={!hasUnpausedRunningInstances}
-            size="sm"
+    <!-- Instance List (standard mode only) -->
+    {#if !isGridMode && !isWatchMode}
+      <div
+        class={cn(
+          !isOpen && 'min-h-0 flex-1 overflow-y-auto',
+          'lg:min-h-0 lg:flex-1 lg:overflow-y-auto'
+        )}
+      >
+        {#each $instances as instance (instance.id)}
+          {@const status = getInstanceStatus(instance)}
+          {@const isActive = $activeInstanceId === instance.id}
+          {@const stopProgress = getStopConditionProgress(instance)}
+
+          <div
             class={cn(
-              'gap-1 cursor-pointer bg-stat-ratio hover:bg-stat-ratio/90 text-white shadow-lg shadow-stat-ratio/25',
-              isCollapsed ? 'lg:w-full lg:px-2' : 'flex-1'
+              'w-full px-4 py-3 border-l-4 transition-all text-left cursor-pointer',
+              isActive ? 'bg-muted border-l-primary' : 'border-l-transparent hover:bg-muted/50',
+              isCollapsed ? 'lg:px-2' : ''
             )}
-            title="Pause all running instances"
+            onclick={() => handleSelectInstance(instance.id)}
+            onkeydown={e => e.key === 'Enter' && handleSelectInstance(instance.id)}
+            role="button"
+            tabindex="0"
+            title={instance.torrent ? instance.torrent.name : `Instance ${instance.id}`}
           >
-            {#snippet children()}
-              <Pause size={12} fill="currentColor" />
-              <span class={cn(isCollapsed && 'lg:hidden')}>Pause All</span>
-            {/snippet}
-          </Button>
-
-          <Button
-            onclick={handleResumeAll}
-            disabled={!hasPausedInstances}
-            size="sm"
-            variant="secondary"
-            class={cn('gap-1 cursor-pointer', isCollapsed ? 'lg:w-full lg:px-2' : 'flex-1')}
-            title="Resume all paused instances"
-          >
-            {#snippet children()}
-              <Play size={12} fill="currentColor" />
-              <span class={cn(isCollapsed && 'lg:hidden')}>Resume All</span>
-            {/snippet}
-          </Button>
-        </div>
-      {/if}
-
-      <!-- Add Instance Button -->
-      <Button
-        onclick={handleAddInstance}
-        size="sm"
-        class={cn('w-full gap-2 cursor-pointer', isCollapsed && 'lg:px-2')}
-        title="Add new instance"
-      >
-        {#snippet children()}
-          <Plus size={16} strokeWidth={2.5} />
-          <span class={cn(isCollapsed && 'lg:hidden')}>New Instance</span>
-        {/snippet}
-      </Button>
-    {/if}
-  </div>
-
-  <!-- Instance List (standard mode only) -->
-  {#if !isGridMode && !isWatchMode}
-    <div class="flex-1 overflow-y-auto min-h-0">
-      {#each $instances as instance (instance.id)}
-        {@const status = getInstanceStatus(instance)}
-        {@const isActive = $activeInstanceId === instance.id}
-        {@const stopProgress = getStopConditionProgress(instance)}
-
-        <div
-          class={cn(
-            'w-full px-4 py-3 border-l-4 transition-all text-left cursor-pointer',
-            isActive ? 'bg-muted border-l-primary' : 'border-l-transparent hover:bg-muted/50',
-            isCollapsed ? 'lg:px-2' : ''
-          )}
-          onclick={() => handleSelectInstance(instance.id)}
-          onkeydown={e => e.key === 'Enter' && handleSelectInstance(instance.id)}
-          role="button"
-          tabindex="0"
-          title={instance.torrent ? instance.torrent.name : `Instance ${instance.id}`}
-        >
-          <div class="flex items-center justify-between gap-2">
-            <div
-              class={cn(
-                'flex items-center gap-2 min-w-0 flex-1',
-                isCollapsed && 'lg:justify-center'
-              )}
-            >
-              <!-- Status Indicator -->
-              <span
+            <div class="flex items-center justify-between gap-2">
+              <div
                 class={cn(
-                  'flex-shrink-0',
-                  status === 'idle' && 'text-muted-foreground',
-                  status === 'running' && 'text-stat-upload animate-pulse-slow',
-                  status === 'idling' && 'text-violet-500',
-                  status === 'paused' && 'text-stat-ratio'
+                  'flex items-center gap-2 min-w-0 flex-1',
+                  isCollapsed && 'lg:justify-center'
                 )}
               >
-                {#if status === 'running'}
-                  <Circle size={10} fill="currentColor" />
-                {:else if status === 'idling'}
-                  <Moon size={10} fill="currentColor" />
-                {:else if status === 'paused'}
-                  <Pause size={10} fill="currentColor" />
-                {:else}
-                  <Circle size={10} fill="currentColor" class="opacity-30" />
-                {/if}
-              </span>
-
-              <!-- Instance Name -->
-              <span
-                class={cn(
-                  'text-sm truncate transition-opacity duration-200',
-                  isActive ? 'font-semibold text-foreground' : 'text-muted-foreground',
-                  isCollapsed && 'lg:hidden lg:w-0 lg:opacity-0'
-                )}
-              >
-                {getInstanceLabel(instance)}
-              </span>
-            </div>
+                <!-- Status Indicator -->
+                <span
+                  class={cn(
+                    'flex-shrink-0',
+                    status === 'idle' && 'text-muted-foreground',
+                    status === 'running' && 'text-stat-upload animate-pulse-slow',
+                    status === 'idling' && 'text-violet-500',
+                    status === 'paused' && 'text-stat-ratio'
+                  )}
+                >
+                  {#if status === 'running'}
+                    <Circle size={10} fill="currentColor" />
+                  {:else if status === 'idling'}
+                    <Moon size={10} fill="currentColor" />
+                  {:else if status === 'paused'}
+                    <Pause size={10} fill="currentColor" />
+                  {:else}
+                    <Circle size={10} fill="currentColor" class="opacity-30" />
+                  {/if}
+                </span>
 
-            <!-- Ratio Badge (when running or has stats) -->
-            {#if !isCompact && instance.stats && instance.stats.ratio > 0}
-              <span
-                class={cn(
-                  'flex-shrink-0 text-xs font-bold px-1.5 py-0.5 rounded',
-                  instance.stats.ratio >= 1
-                    ? 'bg-stat-upload/20 text-stat-upload'
-                    : 'bg-stat-ratio/20 text-stat-ratio'
-                )}
-                title="Current ratio"
-              >
-                {instance.stats.ratio.toFixed(2)}x
-              </span>
-            {/if}
+                <!-- Instance Name -->
+                <span
+                  class={cn(
+                    'text-sm truncate transition-opacity duration-200',
+                    isActive ? 'font-semibold text-foreground' : 'text-muted-foreground',
+                    isCollapsed && 'lg:hidden lg:w-0 lg:opacity-0'
+                  )}
+                >
+                  {getInstanceLabel(instance)}
+                </span>
+              </div>
 
-            <!-- Close Button -->
-            {#if !isCompact && instance.source !== 'watch_folder'}
-              <button
-                class="flex-shrink-0 p-1 rounded hover:bg-destructive/20 group bg-transparent border-0 cursor-pointer"
-                onclick={e => handleRemoveInstance(e, instance.id)}
-                title="Close instance"
-                aria-label="Close instance"
-              >
-                <X
-                  size={12}
-                  strokeWidth={2.5}
-                  class="text-muted-foreground group-hover:text-destructive transition-colors"
-                />
-              </button>
-            {:else if instance.source === 'watch_folder' && !isCompact}
-              <!-- Watch folder instance: show folder icon + force delete button -->
-              <div class="flex items-center gap-1">
-                <span class="flex-shrink-0 text-muted-foreground" title="From watch folder">
-                  <FolderOpen size={12} />
+              <!-- Ratio Badge (when running or has stats) -->
+              {#if !isCompact && instance.stats && instance.stats.ratio > 0}
+                <span
+                  class={cn(
+                    'flex-shrink-0 text-xs font-bold px-1.5 py-0.5 rounded',
+                    instance.stats.ratio >= 1
+                      ? 'bg-stat-upload/20 text-stat-upload'
+                      : 'bg-stat-ratio/20 text-stat-ratio'
+                  )}
+                  title="Current ratio"
+                >
+                  {instance.stats.ratio.toFixed(2)}x
                 </span>
+              {/if}
+
+              <!-- Close Button -->
+              {#if !isCompact && instance.source !== 'watch_folder'}
                 <button
-                  class="flex-shrink-0 p-1 rounded hover:bg-destructive/20 group bg-transparent border-0 cursor-pointer opacity-50 hover:opacity-100"
-                  onclick={e =>
-                    handleForceRemoveInstance(
-                      e,
-                      instance.id,
-                      instance.torrent?.name || instance.name
-                    )}
-                  title="Force delete (file may be missing)"
-                  aria-label="Force delete instance"
+                  class="flex-shrink-0 p-1 rounded hover:bg-destructive/20 group bg-transparent border-0 cursor-pointer"
+                  onclick={e => handleRemoveInstance(e, instance.id)}
+                  title="Close instance"
+                  aria-label="Close instance"
                 >
                   <X
-                    size={10}
+                    size={12}
                     strokeWidth={2.5}
                     class="text-muted-foreground group-hover:text-destructive transition-colors"
                   />
                 </button>
-              </div>
-            {/if}
-          </div>
-
-          <!-- Stats Row (when not compact and has stats) -->
-          {#if !isCompact && instance.stats && instance.isRunning}
-            <div class="mt-1.5 flex items-center gap-3 text-xs text-muted-foreground pl-5">
-              <span class="text-stat-upload" title="Session uploaded">
-                ↑ {formatBytesCompact(instance.stats.session_uploaded)}
-              </span>
-              <span class="text-stat-leecher" title="Session downloaded">
-                ↓ {formatBytesCompact(instance.stats.session_downloaded)}
-              </span>
-              {#if instance.stats.current_upload_rate > 0}
-                <span class="text-muted-foreground/70" title="Upload speed">
-                  {instance.stats.current_upload_rate.toFixed(1)} KB/s
-                </span>
+              {:else if instance.source === 'watch_folder' && !isCompact}
+                <!-- Watch folder instance: show folder icon + force delete button -->
+                <div class="flex items-center gap-1">
+                  <span class="flex-shrink-0 text-muted-foreground" title="From watch folder">
+                    <FolderOpen size={12} />
+                  </span>
+                  <button
+                    class="flex-shrink-0 p-1 rounded hover:bg-destructive/20 group bg-transparent border-0 cursor-pointer opacity-50 hover:opacity-100"
+                    onclick={e =>
+                      handleForceRemoveInstance(
+                        e,
+                        instance.id,
+                        instance.torrent?.name || instance.name
+                      )}
+                    title="Force delete (file may be missing)"
+                    aria-label="Force delete instance"
+                  >
+                    <X
+                      size={10}
+                      strokeWidth={2.5}
+                      class="text-muted-foreground group-hover:text-destructive transition-colors"
+                    />
+                  </button>
+                </div>
               {/if}
             </div>
-          {/if}
 
-          <!-- Progress Bar (when stop condition is active) -->
-          {#if !isCompact && stopProgress && instance.isRunning}
-            <div class="mt-2 pl-5">
-              <div class="h-1 bg-muted rounded-full overflow-hidden">
-                <div
-                  class={cn(
-                    'h-full rounded-full transition-all duration-300',
-                    stopProgress.progress >= 100
-                      ? 'bg-stat-upload'
-                      : stopProgress.progress >= 75
-                        ? 'bg-stat-ratio'
-                        : 'bg-primary'
-                  )}
-                  style="width: {Math.min(100, stopProgress.progress)}%"
-                ></div>
+            <!-- Stats Row (when not compact and has stats) -->
+            {#if !isCompact && instance.stats && instance.isRunning}
+              <div class="mt-1.5 flex items-center gap-3 text-xs text-muted-foreground pl-5">
+                <span class="text-stat-upload" title="Session uploaded">
+                  ↑ {formatBytesCompact(instance.stats.session_uploaded)}
+                </span>
+                <span class="text-stat-leecher" title="Session downloaded">
+                  ↓ {formatBytesCompact(instance.stats.session_downloaded)}
+                </span>
+                {#if instance.stats.current_upload_rate > 0}
+                  <span class="text-muted-foreground/70" title="Upload speed">
+                    {instance.stats.current_upload_rate.toFixed(1)} KB/s
+                  </span>
+                {/if}
               </div>
-              <div class="mt-0.5 text-[10px] text-muted-foreground/70">
-                {stopProgress.progress.toFixed(0)}% to target
+            {/if}
+
+            <!-- Progress Bar (when stop condition is active) -->
+            {#if !isCompact && stopProgress && instance.isRunning}
+              <div class="mt-2 pl-5">
+                <div class="h-1 bg-muted rounded-full overflow-hidden">
+                  <div
+                    class={cn(
+                      'h-full rounded-full transition-all duration-300',
+                      stopProgress.progress >= 100
+                        ? 'bg-stat-upload'
+                        : stopProgress.progress >= 75
+                          ? 'bg-stat-ratio'
+                          : 'bg-primary'
+                    )}
+                    style="width: {Math.min(100, stopProgress.progress)}%"
+                  ></div>
+                </div>
+                <div class="mt-0.5 text-[10px] text-muted-foreground/70">
+                  {stopProgress.progress.toFixed(0)}% to target
+                </div>
               </div>
-            </div>
-          {/if}
-        </div>
-      {/each}
-    </div>
-  {:else}
-    <!-- Grid Mode Sidebar Content -->
-    <div class="flex-1 overflow-y-auto min-h-0">
-      {#if isCompact}
-        <!-- Collapsed: compact aggregate rates -->
-        <div class="flex flex-col items-center gap-1 py-3 px-1">
-          <span class="text-stat-upload text-[10px] font-bold" title="Total upload rate">
-            ↑{formatRateCompact(gridStats().totalUploadRate)}
-          </span>
-          <span class="text-stat-leecher text-[10px] font-bold" title="Total download rate">
-            ↓{formatRateCompact(gridStats().totalDownloadRate)}
-          </span>
-          {#if gridStats().total > 0}
-            <span
-              class="text-muted-foreground text-[10px] mt-1"
-              title="{gridStats().total} instances"
-            >
-              {gridStats().total}
+            {/if}
+          </div>
+        {/each}
+      </div>
+    {:else}
+      <!-- Grid Mode Sidebar Content -->
+      <div
+        class={cn(
+          !isOpen && 'min-h-0 flex-1 overflow-y-auto',
+          'lg:min-h-0 lg:flex-1 lg:overflow-y-auto'
+        )}
+      >
+        {#if isCompact}
+          <!-- Collapsed: compact aggregate rates -->
+          <div class="flex flex-col items-center gap-1 py-3 px-1">
+            <span class="text-stat-upload text-[10px] font-bold" title="Total upload rate">
+              ↑{formatRateCompact(gridStats().totalUploadRate)}
             </span>
-          {/if}
-        </div>
-      {:else if !isWatchMode}
-        <div class="p-3 space-y-3">
-          <!-- Aggregate Rate Display -->
-          <div class="p-3 bg-muted/50 rounded-lg">
-            <div class="flex items-center justify-between mb-2">
-              <span class="text-[10px] font-medium text-muted-foreground uppercase tracking-wider"
-                >Live Rates</span
-              >
-              {#if gridStats().stateCounts['running'] > 0}
-                <span class="flex items-center gap-1 text-[10px] text-stat-upload">
-                  <Circle size={6} fill="currentColor" class="animate-pulse-slow" />
-                  {gridStats().stateCounts['running']} active
-                </span>
-              {/if}
-            </div>
-            <div class="flex items-baseline gap-2">
-              <span class="text-lg font-bold text-stat-upload"
-                >↑ {formatRate(gridStats().totalUploadRate)}</span
-              >
-            </div>
-            <div class="flex items-baseline gap-2 mt-0.5">
-              <span class="text-lg font-bold text-stat-leecher"
-                >↓ {formatRate(gridStats().totalDownloadRate)}</span
+            <span class="text-stat-leecher text-[10px] font-bold" title="Total download rate">
+              ↓{formatRateCompact(gridStats().totalDownloadRate)}
+            </span>
+            {#if gridStats().total > 0}
+              <span
+                class="text-muted-foreground text-[10px] mt-1"
+                title="{gridStats().total} instances"
               >
-            </div>
+                {gridStats().total}
+              </span>
+            {/if}
           </div>
-
-          <!-- Aggregate Stats Summary -->
-          {#if gridStats().total > 0}
-            <div class="p-2.5 bg-muted/50 rounded-lg text-xs space-y-1.5">
-              <div class="flex justify-between text-muted-foreground">
-                <span>Uploaded</span>
-                <span class="font-semibold text-stat-upload"
-                  >↑ {formatBytes(gridStats().totalUploaded)}</span
-                >
-              </div>
-              <div class="flex justify-between text-muted-foreground">
-                <span>Downloaded</span>
-                <span class="font-semibold text-stat-leecher"
-                  >↓ {formatBytes(gridStats().totalDownloaded)}</span
+        {:else if !isWatchMode}
+          <div class="p-3 space-y-3">
+            <!-- Aggregate Rate Display -->
+            <div class="p-3 bg-muted/50 rounded-lg">
+              <div class="flex items-center justify-between mb-2">
+                <span class="text-[10px] font-medium text-muted-foreground uppercase tracking-wider"
+                  >Live Rates</span
                 >
+                {#if gridStats().stateCounts['running'] > 0}
+                  <span class="flex items-center gap-1 text-[10px] text-stat-upload">
+                    <Circle size={6} fill="currentColor" class="animate-pulse-slow" />
+                    {gridStats().stateCounts['running']} active
+                  </span>
+                {/if}
               </div>
-              <div class="flex justify-between text-muted-foreground">
-                <span>Ratio</span>
-                <span
-                  class={cn(
-                    'font-bold',
-                    gridStats().ratio >= 1 ? 'text-stat-upload' : 'text-stat-ratio'
-                  )}
+              <div class="flex items-baseline gap-2">
+                <span class="text-lg font-bold text-stat-upload"
+                  >↑ {formatRate(gridStats().totalUploadRate)}</span
                 >
-                  {gridStats().ratio.toFixed(2)}x
-                </span>
               </div>
-              <div class="flex justify-between text-muted-foreground">
-                <span>Total Size</span>
-                <span class="font-semibold text-foreground"
-                  >{formatBytes(gridStats().totalSize)}</span
+              <div class="flex items-baseline gap-2 mt-0.5">
+                <span class="text-lg font-bold text-stat-leecher"
+                  >↓ {formatRate(gridStats().totalDownloadRate)}</span
                 >
               </div>
-              <div class="flex justify-between text-muted-foreground">
-                <span>Instances</span>
-                <span class="font-semibold text-foreground">{gridStats().total}</span>
-              </div>
-              {#if gridStats().downloadingCount > 0}
+            </div>
+
+            <!-- Aggregate Stats Summary -->
+            {#if gridStats().total > 0}
+              <div class="p-2.5 bg-muted/50 rounded-lg text-xs space-y-1.5">
                 <div class="flex justify-between text-muted-foreground">
-                  <span>Downloading</span>
-                  <span class="font-semibold text-stat-leecher">{gridStats().downloadingCount}</span
+                  <span>Uploaded</span>
+                  <span class="font-semibold text-stat-upload"
+                    >↑ {formatBytes(gridStats().totalUploaded)}</span
                   >
                 </div>
-              {/if}
-            </div>
-          {/if}
-
-          <!-- State Breakdown -->
-          {#if gridStats().total > 0}
-            <div class="space-y-0.5">
-              <span
-                class="text-[10px] font-medium text-muted-foreground uppercase tracking-wider px-1"
-                >States</span
-              >
-              {#each stateConfig as sc (sc.key)}
-                {@const count = gridStats().stateCounts[sc.key] || 0}
-                {#if count > 0}
-                  {@const StateIcon = sc.icon}
-                  <div
-                    class="w-full flex items-center gap-2 px-2 py-1.5 rounded-md text-xs text-muted-foreground"
+                <div class="flex justify-between text-muted-foreground">
+                  <span>Downloaded</span>
+                  <span class="font-semibold text-stat-leecher"
+                    >↓ {formatBytes(gridStats().totalDownloaded)}</span
                   >
-                    <span class={sc.color}>
-                      <StateIcon
-                        size={12}
-                        class={cn(
-                          (sc.key === 'starting' || sc.key === 'stopping') && 'animate-spin'
-                        )}
-                        fill={sc.key === 'running' || sc.key === 'idle' ? 'currentColor' : 'none'}
-                      />
-                    </span>
-                    <span class="flex-1 text-left">{sc.label}</span>
-                    <span class="font-mono font-semibold tabular-nums">{count}</span>
+                </div>
+                <div class="flex justify-between text-muted-foreground">
+                  <span>Ratio</span>
+                  <span
+                    class={cn(
+                      'font-bold',
+                      gridStats().ratio >= 1 ? 'text-stat-upload' : 'text-stat-ratio'
+                    )}
+                  >
+                    {gridStats().ratio.toFixed(2)}x
+                  </span>
+                </div>
+                <div class="flex justify-between text-muted-foreground">
+                  <span>Total Size</span>
+                  <span class="font-semibold text-foreground"
+                    >{formatBytes(gridStats().totalSize)}</span
+                  >
+                </div>
+                <div class="flex justify-between text-muted-foreground">
+                  <span>Instances</span>
+                  <span class="font-semibold text-foreground">{gridStats().total}</span>
+                </div>
+                {#if gridStats().downloadingCount > 0}
+                  <div class="flex justify-between text-muted-foreground">
+                    <span>Downloading</span>
+                    <span class="font-semibold text-stat-leecher"
+                      >{gridStats().downloadingCount}</span
+                    >
                   </div>
                 {/if}
-              {/each}
-            </div>
-          {/if}
-
-          <!-- Selection Summary -->
-          {#if selectionStats()}
-            <div class="p-2.5 bg-primary/5 border border-primary/20 rounded-lg text-xs space-y-1.5">
-              <div class="text-primary font-semibold text-[11px]">
-                {selectionStats().count} selected
-              </div>
-              <div class="flex justify-between text-muted-foreground">
-                <span>Size</span>
-                <span class="font-semibold text-foreground"
-                  >{formatBytes(selectionStats().size)}</span
-                >
               </div>
-              <div class="flex justify-between text-muted-foreground">
-                <span>Uploaded</span>
-                <span class="font-semibold text-stat-upload"
-                  >↑ {formatBytes(selectionStats().uploaded)}</span
+            {/if}
+
+            <!-- State Breakdown -->
+            {#if gridStats().total > 0}
+              <div class="space-y-0.5">
+                <span
+                  class="text-[10px] font-medium text-muted-foreground uppercase tracking-wider px-1"
+                  >States</span
                 >
+                {#each stateConfig as sc (sc.key)}
+                  {@const count = gridStats().stateCounts[sc.key] || 0}
+                  {#if count > 0}
+                    {@const StateIcon = sc.icon}
+                    <div
+                      class="w-full flex items-center gap-2 px-2 py-1.5 rounded-md text-xs text-muted-foreground"
+                    >
+                      <span class={sc.color}>
+                        <StateIcon
+                          size={12}
+                          class={cn(
+                            (sc.key === 'starting' || sc.key === 'stopping') && 'animate-spin'
+                          )}
+                          fill={sc.key === 'running' || sc.key === 'idle' ? 'currentColor' : 'none'}
+                        />
+                      </span>
+                      <span class="flex-1 text-left">{sc.label}</span>
+                      <span class="font-mono font-semibold tabular-nums">{count}</span>
+                    </div>
+                  {/if}
+                {/each}
               </div>
-              <div class="flex justify-between text-muted-foreground">
-                <span>Downloaded</span>
-                <span class="font-semibold text-stat-leecher"
-                  >↓ {formatBytes(selectionStats().downloaded)}</span
-                >
+            {/if}
+
+            <!-- Selection Summary -->
+            {#if selectionStats()}
+              <div
+                class="p-2.5 bg-primary/5 border border-primary/20 rounded-lg text-xs space-y-1.5"
+              >
+                <div class="text-primary font-semibold text-[11px]">
+                  {selectionStats().count} selected
+                </div>
+                <div class="flex justify-between text-muted-foreground">
+                  <span>Size</span>
+                  <span class="font-semibold text-foreground"
+                    >{formatBytes(selectionStats().size)}</span
+                  >
+                </div>
+                <div class="flex justify-between text-muted-foreground">
+                  <span>Uploaded</span>
+                  <span class="font-semibold text-stat-upload"
+                    >↑ {formatBytes(selectionStats().uploaded)}</span
+                  >
+                </div>
+                <div class="flex justify-between text-muted-foreground">
+                  <span>Downloaded</span>
+                  <span class="font-semibold text-stat-leecher"
+                    >↓ {formatBytes(selectionStats().downloaded)}</span
+                  >
+                </div>
               </div>
-            </div>
-          {/if}
-        </div>
-      {/if}
-    </div>
-  {/if}
+            {/if}
+          </div>
+        {/if}
+      </div>
+    {/if}
 
-  <!-- Footer with Network Status and Version -->
-  <div class="border-t border-border p-3 space-y-2">
-    <!-- Network Status -->
-    <NetworkStatus
-      isCollapsed={isCompact}
-      {networkStatus}
-      {networkStatusLoading}
-      {networkStatusError}
-      {onRefreshNetworkStatus}
-    />
-
-    <!-- Version + GitHub -->
-    {#if !isCompact}
-      <a
-        href={repository}
-        target="_blank"
-        rel="noopener noreferrer"
-        class="w-full flex items-center gap-2 px-3 py-2 rounded-lg bg-muted/60 hover:bg-muted transition-colors text-muted-foreground hover:text-foreground"
-        title="View Rustatio on GitHub"
-      >
-        <Github size={14} class="flex-shrink-0" />
-        <span class="flex flex-col leading-tight">
-          <span class="text-[10px] tracking-wider">
-            Version <span class="italic normal-case">{appVersion}</span>
-          </span>
-          <span class="text-sm font-semibold">Rustatio</span>
-        </span>
-      </a>
+    {#if isOpen}
+      <!-- Mobile footer stays in the scroll flow -->
+      <div class="border-t border-border bg-card p-3 space-y-2">
+        <NetworkStatus
+          isCollapsed={isCompact}
+          {networkStatus}
+          {networkStatusLoading}
+          {networkStatusError}
+          {onRefreshNetworkStatus}
+        />
+
+        {#if !isCompact}
+          <a
+            href={repository}
+            target="_blank"
+            rel="noopener noreferrer"
+            class="w-full flex items-center gap-2 rounded-lg bg-muted px-3 py-2 text-muted-foreground transition-colors hover:bg-muted/85 hover:text-foreground lg:bg-muted/60 lg:hover:bg-muted"
+            title="View Rustatio on GitHub"
+          >
+            <Github size={14} class="flex-shrink-0" />
+            <span class="flex flex-col leading-tight">
+              <span class="text-[10px] tracking-wider">
+                Version <span class="italic normal-case">{appVersion}</span>
+              </span>
+              <span class="text-sm font-semibold">Rustatio</span>
+            </span>
+          </a>
+        {/if}
+      </div>
     {/if}
   </div>
+
+  {#if !isOpen}
+    <!-- Desktop footer stays pinned below the scroll area -->
+    <div class="shrink-0 border-t border-border bg-card p-3 space-y-2">
+      <NetworkStatus
+        isCollapsed={isCompact}
+        {networkStatus}
+        {networkStatusLoading}
+        {networkStatusError}
+        {onRefreshNetworkStatus}
+      />
+
+      {#if !isCompact}
+        <a
+          href={repository}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="w-full flex items-center gap-2 rounded-lg bg-muted px-3 py-2 text-muted-foreground transition-colors hover:bg-muted/85 hover:text-foreground lg:bg-muted/60 lg:hover:bg-muted"
+          title="View Rustatio on GitHub"
+        >
+          <Github size={14} class="flex-shrink-0" />
+          <span class="flex flex-col leading-tight">
+            <span class="text-[10px] tracking-wider">
+              Version <span class="italic normal-case">{appVersion}</span>
+            </span>
+            <span class="text-sm font-semibold">Rustatio</span>
+          </span>
+        </a>
+      {/if}
+    </div>
+  {/if}
 </aside>
 
 <ConfirmDialog