Make the disk space meter visible and show used percent.

Use an inline-colored full-width progress bar so the fill renders without relying on purged Tailwind classes.

app/View/Components/DiskSpaceBar.php

@@ -33,24 +33,6 @@ class DiskSpaceBar extends Component
         return $this->disk !== null;
     }
 
-    /**
-     * Progress fill color based on remaining free space.
-     */
-    public function barColor(): string
-    {
-        $freePercent = $this->disk['free_percent'] ?? 100;
-
-        if ($freePercent <= 5) {
-            return 'bg-red-600';
-        }
-
-        if ($freePercent <= 15) {
-            return 'bg-amber-500';
-        }
-
-        return 'bg-teal-600';
-    }
-
     /**
      * Get the view / contents that represent the component.
      */

resources/views/components/disk-space-bar.blade.php

@@ -1,24 +1,33 @@
 @php
     /** @var array{used_percent: float, free_percent: float, free_human: string, total_human: string, used_human: string} $disk */
+    $usedPercent = min(100, max(0, (float) $disk['used_percent']));
+    $usedPercentLabel = rtrim(rtrim(number_format($usedPercent, 1, '.', ''), '0'), '.') ?: '0';
+    $freePercent = (float) ($disk['free_percent'] ?? 100);
+    // Inline colors so the fill is visible even before / without a Tailwind rebuild.
+    $fillColor = match (true) {
+        $freePercent <= 5 => '#dc2626',
+        $freePercent <= 15 => '#f59e0b',
+        default => '#0d9488',
+    };
 @endphp
 <div
-    class="flex items-center gap-2 rounded-lg border border-zinc-200 bg-zinc-50 px-2.5 py-1.5 dark:border-zinc-600 dark:bg-zinc-900/50"
+    class="flex min-w-36 flex-col gap-1 rounded-lg border border-zinc-200 bg-zinc-50 px-2.5 py-1.5 dark:border-zinc-600 dark:bg-zinc-900/50"
-    title="{{ $disk['free_human'] }} free of {{ $disk['total_human'] }} · {{ $disk['used_percent'] }}% used"
+    title="{{ $disk['free_human'] }} free of {{ $disk['total_human'] }} · {{ $usedPercentLabel }}% used"
 >
     <div
-        class="h-1.5 w-14 shrink-0 overflow-hidden rounded-full bg-zinc-200 dark:bg-zinc-700"
+        class="h-2 w-full overflow-hidden rounded-full bg-zinc-200 dark:bg-zinc-700"
         role="progressbar"
         aria-valuemin="0"
         aria-valuemax="100"
-        aria-valuenow="{{ (int) round($disk['used_percent']) }}"
+        aria-valuenow="{{ (int) round($usedPercent) }}"
-        aria-label="Disk space used"
+        aria-label="Disk space {{ $usedPercentLabel }}% used"
     >
         <div
-            class="h-full rounded-full transition-[width] duration-300 {{ $barColor }}"
+            class="h-full rounded-full transition-[width] duration-300"
-            style="width: {{ min(100, max(0, $disk['used_percent'])) }}%"
+            style="width: {{ $usedPercent }}%; background-color: {{ $fillColor }};"
         ></div>
     </div>
-    <span class="hidden text-xs font-medium tabular-nums text-zinc-600 sm:inline dark:text-zinc-300">
+    <span class="text-xs font-medium tabular-nums text-zinc-600 dark:text-zinc-300">
-        {{ $disk['free_human'] }} free
+        {{ $usedPercentLabel }}% used · {{ $disk['free_human'] }} free
     </span>
 </div>

tests/Feature/DiskSpaceTest.php

@@ -50,10 +50,17 @@ class DiskSpaceTest extends TestCase
     {
         Cache::flush();
 
-        $this->get(route('recordings.index'))
+        $response = $this->get(route('recordings.index'))
             ->assertOk()
-            ->assertSee('Disk space used', false)
+            ->assertSee('Disk space', false)
+            ->assertSee('% used', false)
             ->assertSee('free')
-            ->assertSee('role="progressbar"', false);
+            ->assertSee('role="progressbar"', false)
+            ->assertSee('background-color:', false);
+
+        $this->assertMatchesRegularExpression(
+            '/width:\s*[\d.]+%;\s*background-color:\s*#(0d9488|f59e0b|dc2626)/',
+            $response->getContent(),
+        );
     }
 }