From 285684ad3c2eae47461adb5492a6ec06a95f98b2 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Thu, 10 Sep 2026 08:40:41 +0200
Subject: [PATCH] style(ui): unify view toggles at h-8 and View all buttons

Extract a shared view-toggle utility so list/grid switchers use the same 32px control height instead of mixed h-8/h-9 styles. Point section-heading View all links at the shared button class so they match other actions.
---
 resources/css/utilities.css                   |  4 +++
 .../components/section-heading.blade.php      |  4 +--
 .../shared-variables/view-controls.blade.php  |  2 +-
 .../views/livewire/project/index.blade.php    |  2 +-
 .../livewire/project/resource/index.blade.php |  2 +-
 .../project/service/configuration.blade.php   |  2 +-
 .../views/livewire/project/show.blade.php     |  2 +-
 .../views/livewire/server/index.blade.php     |  2 +-
 .../shared/list-search-controls.blade.php     |  2 +-
 resources/views/livewire/tags/show.blade.php  |  2 +-
 tests/Feature/DashboardNavbarLayoutTest.php   |  8 ++++++
 ...erviceComposeResourcesViewSwitcherTest.php |  2 +-
 tests/Feature/ViewToggleSizingTest.php        | 28 +++++++++++++++++++
 13 files changed, 51 insertions(+), 11 deletions(-)
 create mode 100644 tests/Feature/ViewToggleSizingTest.php

diff --git a/resources/css/utilities.css b/resources/css/utilities.css
index 297a5acc42..9851180c2b 100644
--- a/resources/css/utilities.css
+++ b/resources/css/utilities.css
@@ -137,6 +137,10 @@
     @apply bg-linear-to-b from-coollabs-100 to-coollabs-200 text-white;
 }
 
+@utility view-toggle {
+    @apply flex h-8 items-center rounded-lg border border-neutral-200 bg-white dark:border-white/[0.08] dark:bg-white/[0.06];
+}
+
 @utility loading-indicator {
     @apply text-coollabs dark:text-warning;
 }
diff --git a/resources/views/components/section-heading.blade.php b/resources/views/components/section-heading.blade.php
index 523808102f..6872dc1a30 100644
--- a/resources/views/components/section-heading.blade.php
+++ b/resources/views/components/section-heading.blade.php
@@ -8,7 +8,7 @@
 
 {{--
     Shared section heading: a 14px title, an optional 11px muted subtitle, and an
-    optional right-aligned action. Pass `href` for the default ghost "View all"
+    optional right-aligned action. Pass `href` for the default "View all"
     button, or an `<x-slot:actions>` for a custom control.
 --}}
 <div {{ $attributes->merge(['class' => 'mb-3 min-w-0']) }}>
@@ -20,7 +20,7 @@
             <div class="shrink-0">{{ $actions }}</div>
         @elseif (filled($href))
             <a href="{{ $href }}" {{ wireNavigate() }}
-                class="group inline-flex h-7 shrink-0 items-center gap-1.5 rounded-md border border-neutral-200 bg-white px-2.5 text-[12px] font-medium text-neutral-600 transition-[color,background-color,transform] duration-100 ease-out hover:bg-neutral-100 hover:text-black active:scale-[0.97] dark:border-white/[0.08] dark:bg-white/[0.06] dark:text-fg-dim dark:hover:bg-white/[0.1] dark:hover:text-fg">
+                class="button group">
                 {{ $actionLabel }}
                 @if ($icon)
                     <x-reicon :name="$icon" class="size-3 opacity-70 transition-transform duration-150 ease-out group-hover:translate-x-0.5" />
diff --git a/resources/views/components/shared-variables/view-controls.blade.php b/resources/views/components/shared-variables/view-controls.blade.php
index f409ea63a7..4a1dcbc0a0 100644
--- a/resources/views/components/shared-variables/view-controls.blade.php
+++ b/resources/views/components/shared-variables/view-controls.blade.php
@@ -14,7 +14,7 @@
     </div>
 
     <div
-        class="flex h-9 w-fit items-center rounded-lg border border-neutral-200 bg-white p-0.5 dark:border-white/[0.08] dark:bg-white/[0.035]">
+        class="view-toggle w-fit">
         <button type="button" @click="viewMode = 'list'; localStorage.setItem('{{ $storageKey }}', 'list')"
             class="flex size-7.5 items-center justify-center rounded-md transition-colors"
             :class="viewMode === 'list' ? 'control-selected' : 'text-neutral-400 hover:bg-neutral-100 hover:text-black dark:text-fg-faint dark:hover:bg-white/[0.06] dark:hover:text-fg'"
diff --git a/resources/views/livewire/project/index.blade.php b/resources/views/livewire/project/index.blade.php
index d3554b8828..4cd0e22d19 100644
--- a/resources/views/livewire/project/index.blade.php
+++ b/resources/views/livewire/project/index.blade.php
@@ -76,7 +76,7 @@
                     </x-table.dropdown>
 
                     <div
-                        class="flex h-9 items-center rounded-lg border border-neutral-200 bg-white p-0.5 dark:border-white/[0.08] dark:bg-white/[0.06]">
+                        class="view-toggle">
                         <button type="button" x-on:click="setViewMode('table')"
                             class="flex size-7.5 items-center justify-center rounded-md transition-colors"
                             :class="viewMode === 'table'
diff --git a/resources/views/livewire/project/resource/index.blade.php b/resources/views/livewire/project/resource/index.blade.php
index 025da57b27..8b422ac55e 100644
--- a/resources/views/livewire/project/resource/index.blade.php
+++ b/resources/views/livewire/project/resource/index.blade.php
@@ -142,7 +142,7 @@
                     </x-table.dropdown>
 
                     <div
-                        class="flex h-9 items-center rounded-lg border border-neutral-200 bg-white p-0.5 dark:border-white/[0.08] dark:bg-white/[0.06]">
+                        class="view-toggle">
                         <button type="button" x-on:click="setViewMode('table')"
                             class="flex size-7.5 items-center justify-center rounded-md transition-colors"
                             :class="viewMode === 'table'
diff --git a/resources/views/livewire/project/service/configuration.blade.php b/resources/views/livewire/project/service/configuration.blade.php
index 79cc5f437f..e88c5bc2f2 100644
--- a/resources/views/livewire/project/service/configuration.blade.php
+++ b/resources/views/livewire/project/service/configuration.blade.php
@@ -117,7 +117,7 @@
                             </div>
                             <div class="flex w-full items-center justify-between gap-2 sm:w-auto sm:justify-start">
                                 <div
-                                    class="flex h-8 items-center rounded-lg border border-neutral-200 bg-white dark:border-white/[0.08] dark:bg-white/[0.06]">
+                                    class="view-toggle">
                                     <button type="button" x-on:click="setViewMode('table')"
                                         class="flex size-7.5 items-center justify-center rounded-md transition-colors"
                                         :class="viewMode === 'table'
diff --git a/resources/views/livewire/project/show.blade.php b/resources/views/livewire/project/show.blade.php
index b5fbf3485f..e70400423a 100644
--- a/resources/views/livewire/project/show.blade.php
+++ b/resources/views/livewire/project/show.blade.php
@@ -96,7 +96,7 @@
                     </x-table.dropdown>
 
                     <div
-                        class="flex h-9 items-center rounded-lg border border-neutral-200 bg-white p-0.5 dark:border-white/[0.08] dark:bg-white/[0.06]">
+                        class="view-toggle">
                         <button type="button" x-on:click="setViewMode('table')"
                             class="flex size-7.5 items-center justify-center rounded-md transition-colors"
                             :class="viewMode === 'table'
diff --git a/resources/views/livewire/server/index.blade.php b/resources/views/livewire/server/index.blade.php
index 14de8dffab..9f5680160e 100644
--- a/resources/views/livewire/server/index.blade.php
+++ b/resources/views/livewire/server/index.blade.php
@@ -104,7 +104,7 @@
                         <span x-text="filteredServers.length === 1 ? 'server' : 'servers'"></span>
                     </span>
                     <div
-                        class="flex h-9 items-center rounded-lg border border-neutral-200 bg-white p-0.5 dark:border-white/[0.08] dark:bg-white/[0.035]">
+                        class="view-toggle">
                         <button type="button" x-on:click="setViewMode('table')"
                             class="flex size-7.5 items-center justify-center rounded-md transition-colors"
                             :class="viewMode === 'table'
diff --git a/resources/views/livewire/shared/list-search-controls.blade.php b/resources/views/livewire/shared/list-search-controls.blade.php
index 866097044b..d14ddc8f4b 100644
--- a/resources/views/livewire/shared/list-search-controls.blade.php
+++ b/resources/views/livewire/shared/list-search-controls.blade.php
@@ -6,7 +6,7 @@
     </div>
     <div class="flex items-center gap-3">
         <span class="text-[11px] text-neutral-500 dark:text-fg-faint"><span x-text="filteredItems.length"></span> <span x-text="filteredItems.length === 1 ? '{{ $singular }}' : '{{ $plural }}'"></span></span>
-        <div class="flex h-9 items-center rounded-lg border border-neutral-200 bg-white p-0.5 dark:border-white/[0.08] dark:bg-white/[0.035]">
+        <div class="view-toggle">
             <button type="button" x-on:click="setViewMode('table')" class="flex size-7.5 items-center justify-center rounded-md transition-colors" :class="viewMode === 'table' ? 'control-selected' : 'text-neutral-400 hover:bg-neutral-100 hover:text-black dark:text-fg-faint dark:hover:bg-white/[0.06] dark:hover:text-fg'" aria-label="Table view"><x-reicon name="unordered-list" class="size-3.5" /></button>
             <button type="button" x-on:click="setViewMode('grid')" class="flex size-7.5 items-center justify-center rounded-md transition-colors" :class="viewMode === 'grid' ? 'control-selected' : 'text-neutral-400 hover:bg-neutral-100 hover:text-black dark:text-fg-faint dark:hover:bg-white/[0.06] dark:hover:text-fg'" aria-label="Grid view"><x-reicon name="grid" class="size-3.5" /></button>
         </div>
diff --git a/resources/views/livewire/tags/show.blade.php b/resources/views/livewire/tags/show.blade.php
index 38f5286ab3..842afac94b 100644
--- a/resources/views/livewire/tags/show.blade.php
+++ b/resources/views/livewire/tags/show.blade.php
@@ -69,7 +69,7 @@
                     </x-table.dropdown>
 
                     <div
-                        class="flex h-9 items-center rounded-lg border border-neutral-200 bg-white p-0.5 dark:border-white/[0.08] dark:bg-white/[0.035]">
+                        class="view-toggle">
                         <button type="button" x-on:click="setViewMode('table')"
                             class="flex size-7.5 items-center justify-center rounded-md transition-colors"
                             :class="viewMode === 'table'
diff --git a/tests/Feature/DashboardNavbarLayoutTest.php b/tests/Feature/DashboardNavbarLayoutTest.php
index 9d078a8409..5d613720f6 100644
--- a/tests/Feature/DashboardNavbarLayoutTest.php
+++ b/tests/Feature/DashboardNavbarLayoutTest.php
@@ -17,3 +17,11 @@ test('dashboard navbar keeps the original side-by-side tab and actions layout',
         ->toContain('flex w-full flex-col gap-2 sm:flex-row sm:items-center sm:justify-between')
         ->toContain('flex min-w-0 w-full items-center gap-0.5 overflow-x-auto');
 });
+
+test('dashboard view all links use the shared button style', function () {
+    $contents = file_get_contents(resource_path('views/components/section-heading.blade.php'));
+
+    expect($contents)
+        ->toContain('class="button group"')
+        ->not->toContain('class="group inline-flex h-7');
+});
diff --git a/tests/Feature/ServiceComposeResourcesViewSwitcherTest.php b/tests/Feature/ServiceComposeResourcesViewSwitcherTest.php
index 0a6bb78cf8..c281b330ce 100644
--- a/tests/Feature/ServiceComposeResourcesViewSwitcherTest.php
+++ b/tests/Feature/ServiceComposeResourcesViewSwitcherTest.php
@@ -12,7 +12,7 @@ it('provides grid and table views for compose resources without sorting controls
         ->toContain('aria-label="Grid view"')
         ->toContain('mb-3 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between')
         ->toContain('flex w-full items-center justify-between gap-2 sm:w-auto sm:justify-start')
-        ->toContain('flex h-8 items-center rounded-lg border border-neutral-200 bg-white')
+        ->toContain('class="view-toggle"')
         ->not->toContain('flex h-9 items-center rounded-lg border border-neutral-200 bg-white')
         ->toContain("localStorage.setItem('service-compose-resources-view', mode)")
         ->not->toContain('>Sort</button>')
diff --git a/tests/Feature/ViewToggleSizingTest.php b/tests/Feature/ViewToggleSizingTest.php
new file mode 100644
index 0000000000..1fe5146009
--- /dev/null
+++ b/tests/Feature/ViewToggleSizingTest.php
@@ -0,0 +1,28 @@
+<?php
+
+it('uses the shared button-height view toggle on every list and grid page', function () {
+    $paths = [
+        'views/components/shared-variables/view-controls.blade.php',
+        'views/livewire/project/index.blade.php',
+        'views/livewire/project/resource/index.blade.php',
+        'views/livewire/project/service/configuration.blade.php',
+        'views/livewire/project/show.blade.php',
+        'views/livewire/server/index.blade.php',
+        'views/livewire/shared/list-search-controls.blade.php',
+        'views/livewire/tags/show.blade.php',
+    ];
+
+    foreach ($paths as $path) {
+        $contents = file_get_contents(resource_path($path));
+
+        expect($contents)
+            ->toContain('class="view-toggle')
+            ->not->toContain('class="flex h-9 items-center rounded-lg border');
+    }
+
+    $utilities = file_get_contents(resource_path('css/utilities.css'));
+
+    expect($utilities)
+        ->toContain('@utility view-toggle')
+        ->toContain('h-8');
+});