From ae492a24971dbf23e6969d0f7f63534c97e66031 Mon Sep 17 00:00:00 2001 From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com> Date: Fri, 23 Oct 2026 21:40:01 +0200 Subject: [PATCH] fix(ui): link user menu Appearance to its page so the menu fits short screens --- .../views/components/theme-controls.blade.php | 466 +++++++----------- .../views/components/top-user-menu.blade.php | 31 +- resources/views/layouts/base.blade.php | 4 +- .../livewire/profile/appearance.blade.php | 2 +- 4 files changed, 198 insertions(+), 305 deletions(-) diff --git a/resources/views/components/theme-controls.blade.php b/resources/views/components/theme-controls.blade.php index e60d065e73..d72e1b25dd 100644 --- a/resources/views/components/theme-controls.blade.php +++ b/resources/views/components/theme-controls.blade.php @@ -1,323 +1,219 @@ -@props(['variant' => 'full']) - -@php($checkPath = 'm2.5 6.25 2.1 2.1 4.9-5') - -@if ($variant === 'menu') - {{-- Compact list for the profile dropdown. The parent controls visibility; - all theme state/logic comes from the shared window.themeControls(). --}} -
- @foreach ([ - ['value' => 'light', 'label' => 'Light'], - ['value' => 'system', 'label' => 'System'], - ['value' => 'dark', 'label' => 'Dark'], - ['value' => 'custom', 'label' => 'Custom'], - ] as $option) - @if ($option['value'] === 'custom') -
- - -
- @else - - @endif - @endforeach -
-
- Page width -
- @foreach ([ - ['value' => 'full', 'label' => 'Full width'], - ['value' => 'centered', 'label' => 'Centered'], - ] as $option) - - @endforeach -
-
- Navigation -
- @foreach ([ - ['value' => 'default', 'label' => 'Default'], - ['value' => 'floating', 'label' => 'Floating'], - ] as $option) - - @endforeach -
-
- Navigation items -
- @foreach ([ - ['value' => '3d', 'label' => '3D'], - ['value' => 'flat', 'label' => 'Flat'], - ] as $option) - - @endforeach -
-@else - {{-- Full card grid for the Appearance settings page. --}} -
-
-
-
-

Color theme

-

Choose the color scheme used in this browser.

-
+{{-- Full card grid for the Appearance settings page. --}} +
+
+
+
+

Color theme

+

Choose the color scheme used in this browser.

-
- @foreach ([ - ['value' => 'light', 'label' => 'Light', 'description' => 'Bright surfaces and dark text.', 'preview' => 'bg-white'], - ['value' => 'system', 'label' => 'System', 'description' => 'Follow your operating system.', 'preview' => 'bg-gradient-to-r from-white via-neutral-400 to-[#050505]'], - ['value' => 'dark', 'label' => 'Dark', 'description' => 'Dark surfaces and soft contrast.', 'preview' => 'bg-[#181818]'], - ['value' => 'custom', 'label' => 'Custom', 'description' => 'Tint light or dark surfaces with any color.', 'preview' => ''], - ] as $option) - @if ($option['value'] === 'custom') - {{-- Clicking the card opens the custom color picker popover (color + light/dark). --}} -
-
-
-
-
-
-
-
-
-
-
- {{ $option['label'] }} - -
-

- {{ $option['description'] }} -

-
-
- -
- @else -
+ @foreach ([ + ['value' => 'light', 'label' => 'Light', 'description' => 'Bright surfaces and dark text.', 'preview' => 'bg-white'], + ['value' => 'system', 'label' => 'System', 'description' => 'Follow your operating system.', 'preview' => 'bg-gradient-to-r from-white via-neutral-400 to-[#050505]'], + ['value' => 'dark', 'label' => 'Dark', 'description' => 'Dark surfaces and soft contrast.', 'preview' => 'bg-[#181818]'], + ['value' => 'custom', 'label' => 'Custom', 'description' => 'Tint light or dark surfaces with any color.', 'preview' => ''], + ] as $option) + @if ($option['value'] === 'custom') + {{-- Clicking the card opens the custom color picker popover (color + light/dark). --}} +
+
-
+
-
+
+
- - {{ $option['label'] }} - + {{ $option['label'] }} + x-show="theme === 'custom'" x-cloak />

{{ $option['description'] }}

- @endif - @endforeach -
-
- -
-
-
-

Page width

-

Choose how content uses the available browser width.

-
-
-
- @foreach ([ - ['value' => 'full', 'label' => 'Full width', 'description' => 'Use all available space for page content.'], - ['value' => 'centered', 'label' => 'Centered', 'description' => 'Keep content centered at a comfortable maximum width.'], - ] as $option) -
+ @else +
-
-
-
-
$option['value'] === 'full', - 'mx-auto w-2/3' => $option['value'] === 'centered', - ])>
+
+
+
+
- {{ $option['label'] }} + + {{ $option['label'] }} + + x-show="theme === '{{ $option['value'] }}'" x-cloak />
-

{{ $option['description'] }}

+

+ {{ $option['description'] }} +

- - @endforeach -
-
+
+ @endif + @endforeach +
+
-
-
-
-

Navigation style

-

Choose how the top bar and sidebars sit on the page.

-
+
+
+
+

Page width

+

Choose how content uses the available browser width.

-
- @foreach ([ - ['value' => 'default', 'label' => 'Default', 'description' => 'Top bar and sidebars run edge to edge.'], - ['value' => 'floating', 'label' => 'Floating', 'description' => 'Framed panels float on a dotted backdrop, like the canvas.'], - ] as $option) - - @endforeach -
-
+

{{ $option['description'] }}

+
+ + @endforeach +
+ -
-
-
-

Navigation items

-

Choose how the main sidebar shows its items.

-
+
+
+
+

Navigation style

+

Choose how the top bar and sidebars sit on the page.

-
- @foreach ([ - ['value' => '3d', 'label' => '3D', 'description' => 'Each icon sits in a raised tile that lifts on hover.'], - ['value' => 'flat', 'label' => 'Flat', 'description' => 'Plain rows with a highlight for the current page.'], - ] as $option) - - @endforeach +

{{ $option['description'] }}

+
+ + @endforeach +
+
+ +
+
+
+

Navigation items

+

Choose how the main sidebar shows its items.

-
-
-@endif + +
+ @foreach ([ + ['value' => '3d', 'label' => '3D', 'description' => 'Each icon sits in a raised tile that lifts on hover.'], + ['value' => 'flat', 'label' => 'Flat', 'description' => 'Plain rows with a highlight for the current page.'], + ] as $option) + + @endforeach +
+
+ diff --git a/resources/views/components/top-user-menu.blade.php b/resources/views/components/top-user-menu.blade.php index 9973b4a1aa..3f856e6cf6 100644 --- a/resources/views/components/top-user-menu.blade.php +++ b/resources/views/components/top-user-menu.blade.php @@ -10,16 +10,21 @@ @endphp
$sidebar]) x-data="{ open: false, - appearanceOpen: false, + panelMaxHeight: null, avatarUrl: @js($user?->avatar_path ? profile_avatar_url($user) : null), openPanel() { - this.appearanceOpen = false; + this.fitPanel(); this.open = true; }, + fitPanel() { + const rect = this.$refs.userMenuButton.getBoundingClientRect(); + const space = @js($sidebar) ? rect.top : window.innerHeight - rect.bottom; + this.panelMaxHeight = Math.max(space - 12, 160) + 'px'; + }, closePanel() { this.open = false; }, -}" @avatar-updated.window="avatarUrl = $event.detail.url" @keydown.escape.window="closePanel()" +}" @avatar-updated.window="avatarUrl = $event.detail.url" @keydown.escape.window="closePanel()" @resize.window="open && fitPanel()" @click.outside="closePanel()"> - {{-- In the sidebar the panel is fixed to the button, so the scrolling sidebar does not clip it. --}} -
! $sidebar, 'top-user-menu-panel-sidebar origin-bottom-left' => $sidebar, 'origin-top-right' => ! $sidebar, @@ -69,21 +75,12 @@ Profile - -
- -
+
diff --git a/resources/views/layouts/base.blade.php b/resources/views/layouts/base.blade.php index a9d3246c83..6d90cf784a 100644 --- a/resources/views/layouts/base.blade.php +++ b/resources/views/layouts/base.blade.php @@ -54,8 +54,8 @@ document.documentElement.style.setProperty('--theme-accent-foreground', window.themeAccentForeground(themeColor)); document.querySelector('meta[name=theme-color]')?.setAttribute('content', isDark ? '#101010' : '#ffffff'); }; - // Single source for the theme controls Alpine state, shared by the - // Appearance page and the profile dropdown via x-data="themeControls()". + // Alpine state for the theme controls, used by the + // Appearance page via x-data="themeControls()". window.themeControls = () => ({ theme: localStorage.getItem('theme') === 'purple' ? 'custom' : (localStorage.getItem('theme') || 'dark'), themeColor: window.normalizeThemeColor(localStorage.getItem('themeColor')), diff --git a/resources/views/livewire/profile/appearance.blade.php b/resources/views/livewire/profile/appearance.blade.php index ef29f72653..038334bbbf 100644 --- a/resources/views/livewire/profile/appearance.blade.php +++ b/resources/views/livewire/profile/appearance.blade.php @@ -1,4 +1,4 @@
Appearance | Coolify - +