From c0ae50f1202360716ac970156539388352dfa582 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Sat, 24 Oct 2026 13:25:02 +0200
Subject: [PATCH] fix(ui): stop the list toolbar from shifting when the page
 loads

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 DESIGN.md                                                 | 1 +
 resources/css/app.css                                     | 6 +++---
 resources/views/components/canvas-view-toggle.blade.php   | 7 +++++--
 resources/views/livewire/project/resource/index.blade.php | 4 ++--
 4 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/DESIGN.md b/DESIGN.md
index f6d6afcd9f..633d9e0256 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -390,6 +390,7 @@ Class names below are examples. Keep the values and structure.
 
 - Use one primary button per area. Other actions are neutral buttons.
 - Destructive actions use the error color for text and focus ring.
+- With Appearance → Style → Flat, all buttons lose the raised edge.
 
 ### Menus, listboxes, and popovers
 
diff --git a/resources/css/app.css b/resources/css/app.css
index 7a03f29417..fe0e30c837 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -6583,15 +6583,15 @@ html.dark .view-toggle {
     border-color: color-mix(in srgb, var(--color-brand-light) 16%, transparent);
 }
 
-html.dark .view-toggle > :is(a, button) {
+html.dark .view-toggle :is(a, button) {
     color: oklch(from var(--color-brand-light) 80% 0.02 h);
 }
 
-html.dark .view-toggle > :is(a, button) svg {
+html.dark .view-toggle :is(a, button) svg {
     color: var(--color-brand-light);
 }
 
-html.dark .view-toggle > :is(a, button):not(.is-selected):hover {
+html.dark .view-toggle :is(a, button):not(.is-selected):hover {
     background-color: color-mix(in srgb, var(--color-brand) 14%, transparent);
     color: #fff;
 }
diff --git a/resources/views/components/canvas-view-toggle.blade.php b/resources/views/components/canvas-view-toggle.blade.php
index 37fc4cace1..744ab0ff26 100644
--- a/resources/views/components/canvas-view-toggle.blade.php
+++ b/resources/views/components/canvas-view-toggle.blade.php
@@ -22,8 +22,10 @@
             List view
         </a>
     @else
-        {{-- Only the views that are not current show, as icons: the button switches to that view. --}}
-        @unless ($singleList)
+        {{-- Only the view that is not current shows, as an icon: the button switches to that view.
+             The fixed-width slot keeps its width before Alpine starts, so the toolbar does not jump. --}}
+        @unless ($singleList || count($views) === 0)
+            <span class="flex w-7.5 shrink-0">
             @foreach ($views as $mode => [$label, $icon])
                 <button type="button" x-on:click="setViewMode(@js($mode))" x-show="viewMode !== @js($mode)" x-cloak
                     class="{{ $canvasItem }} {{ $idle }} w-7.5 justify-center px-0!"
@@ -31,6 +33,7 @@
                     <x-reicon :name="$icon" class="size-3.5" />
                 </button>
             @endforeach
+            </span>
         @endunless
         @if (filled($canvasUrl))
             {{-- A label and a purple "Try it" badge, so people notice the canvas view. --}}
diff --git a/resources/views/livewire/project/resource/index.blade.php b/resources/views/livewire/project/resource/index.blade.php
index cf7248a905..196f0ef1df 100644
--- a/resources/views/livewire/project/resource/index.blade.php
+++ b/resources/views/livewire/project/resource/index.blade.php
@@ -93,8 +93,8 @@
                                 <path d="M4 6h16M7 12h10M10 18h4" stroke="currentColor" stroke-width="1.7"
                                     stroke-linecap="round" />
                             </svg>
-                            <span class="truncate" x-text="activeFilterCount > 0 ? filterButtonText : 'Filter'"></span>
-                            <span x-show="activeFilterCount > 0"
+                            <span class="truncate" x-text="activeFilterCount > 0 ? filterButtonText : 'Filter'">Filter</span>
+                            <span x-show="activeFilterCount > 0" x-cloak
                                 class="shrink-0 rounded-full bg-neutral-100 px-1.5 py-0.5 text-[10px] font-medium text-neutral-500 dark:bg-white/[0.07] dark:text-fg-dim"
                                 x-text="activeFilterCount"></span>
                             </button>