feat(ui): add configurable page widths and searchable controls

Add full-width and centered layout preferences across the app shell and workspaces.
Replace page-size selects with dropdowns and add searchable breadcrumb switching.

tests/Feature/BreadcrumbSelectionStyleTest.php

@@ -57,3 +57,16 @@ test('top breadcrumb lets users switch between resources in the current environm
         ->toContain("'database' => route('project.database.configuration'")
         ->toContain("'service' => route('project.service.configuration'");
 });
+
+test('breadcrumb switchers let users search their items', function () {
+    $switcher = file_get_contents(resource_path('views/components/breadcrumb-switcher.blade.php'));
+
+    expect($switcher)
+        ->toContain('x-model.debounce.150ms="search"')
+        ->toContain('type="search"')
+        ->toContain('placeholder="Search {{ strtolower($title) }}"')
+        ->toContain('class="searchable-listbox-search"')
+        ->toContain('class="searchable-listbox-search-input"')
+        ->toContain('<x-reicon name="search"')
+        ->toContain('.includes(search.toLowerCase())');
+});

tests/Feature/FullWidthResourceLayoutTest.php

@@ -0,0 +1,16 @@
+<?php
+
+test('the application shell and resource workspaces use the full available width', function () {
+    $appLayout = file_get_contents(resource_path('views/layouts/app.blade.php'));
+    $applicationConfiguration = file_get_contents(resource_path('views/livewire/project/application/configuration.blade.php'));
+    $serverConfiguration = file_get_contents(resource_path('views/livewire/server/show.blade.php'));
+
+    expect($appLayout)
+        ->toContain("pageWidth === 'centered' ? 'mx-auto max-w-[1400px]' : 'max-w-none'")
+        ->and($applicationConfiguration)
+        ->not->toContain('max-w-[1180px]')
+        ->toContain('xl:gap-8')
+        ->and($serverConfiguration)
+        ->not->toContain('max-w-[1180px]')
+        ->toContain('xl:gap-8');
+});

tests/Feature/ProfileAppearanceNavigationTest.php

@@ -34,23 +34,23 @@ it('does not show a redundant enabled badge for two-factor authentication', func
         ->not->toContain('<x-status-badge status="Enabled" type="success" />');
 });
 
-it('keeps color theme preferences on the profile appearance view without page width or density controls', function () {
+it('offers full and centered page width preferences on the profile appearance view', function () {
     $appearanceView = file_get_contents(resource_path('views/livewire/profile/appearance.blade.php'));
+    $appLayout = file_get_contents(resource_path('views/layouts/app.blade.php'));
 
     expect($appearanceView)
         ->not->toContain('<x-profile.navbar />')
         ->toContain('Color theme')
-        ->toContain("setTheme('{{ \$option['value'] }}')")
-        ->toContain("['value' => 'light'")
-        ->toContain("['value' => 'system'")
-        ->toContain('to-[#050505]')
-        ->toContain("['value' => 'dark'")
-        ->not->toContain('Page width')
+        ->toContain('Page width')
+        ->toContain("pageWidth: localStorage.getItem('pageWidth') || 'full'")
+        ->toContain("['value' => 'full'")
+        ->toContain("['value' => 'centered'")
+        ->toContain("@click=\"setWidth('{{ \$option['value'] }}')\"")
+        ->toContain("localStorage.setItem('pageWidth', width)")
         ->not->toContain('Interface density')
-        ->not->toContain('setWidth(')
         ->not->toContain('setZoom(')
-        ->not->toContain('pageWidth')
-        ->not->toContain("localStorage.getItem('zoom')")
-        ->not->toContain("localStorage.setItem('pageWidth'")
-        ->not->toContain("localStorage.setItem('zoom'");
+        ->and($appLayout)
+        ->toContain("pageWidth: localStorage.getItem('pageWidth') || 'full'")
+        ->toContain('@page-width-changed.window="pageWidth = $event.detail"')
+        ->toContain("pageWidth === 'centered' ? 'mx-auto max-w-[1400px]' : 'max-w-none'");
 });

tests/Feature/TablePaginationLoadingTest.php

@@ -7,25 +7,25 @@ it('renders the shared page size selector', function () {
 
     expect($html)
         ->toContain('aria-label="Items per page"')
+        ->toContain('aria-haspopup="listbox"')
+        ->toContain('role="listbox"')
         ->toContain("\$wire.set('perPage'")
         ->toContain('h-7!')
         ->toContain('w-12!')
-        ->toContain('opacity-0')
         ->toContain('selectedPageSize')
         ->toContain('border-0')
         ->toContain('text-[11px]!')
         ->toContain('mb-0!')
+        ->not->toContain('<select')
         ->toContain("localStorage.getItem('tests.page-size')")
         ->toContain("localStorage.setItem('tests.page-size'")
-        ->toContain('value="10"')
-        ->toContain('value="25"')
-        ->toContain('value="50"')
-        ->toContain('value="100"');
+        ->toContain('applyPageSize(10)')
+        ->toContain('applyPageSize(25)')
+        ->toContain('applyPageSize(50)')
+        ->toContain('applyPageSize(100)')
+        ->not->toContain('>Rows</span>');
     expect($html)
-        ->toContain('value="custom"')
-        ->toContain('data-custom-page-size')
-        ->toContain('customOption?.remove()')
-        ->not->toContain('<option value="" disabled selected>')
+        ->toContain('Custom…')
         ->toContain('min="1"')
         ->toContain('max="100"');
 });

tests/Feature/TopUserMenuTest.php

@@ -65,3 +65,17 @@ it('changes appearance from a submenu instead of navigating to a separate page',
         ->toContain('hover:bg-neutral-200 hover:text-neutral-950')
         ->not->toContain("route('profile.appearance')");
 });
+
+it('offers page width controls inside the appearance menu', function () {
+    $menu = file_get_contents(resource_path('views/components/top-user-menu.blade.php'));
+
+    expect($menu)
+        ->toContain("pageWidth: localStorage.getItem('pageWidth') || 'full'")
+        ->toContain("['value' => 'full', 'label' => 'Full width']")
+        ->toContain("['value' => 'centered', 'label' => 'Centered']")
+        ->toContain("@click=\"setWidth('{{ \$option['value'] }}')\"")
+        ->toContain('Full width')
+        ->toContain('Centered')
+        ->toContain("localStorage.setItem('pageWidth', width)")
+        ->toContain("new CustomEvent('page-width-changed', { detail: width })");
+});