fix(ui): stop the list toolbar from shifting when the page loads

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

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
 

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;
 }

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. --}}

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>