From 451167bde34e018ec3896406e77a7c468ff4323d Mon Sep 17 00:00:00 2001
From: Maurice <mauriceboe@icloud.com>
Date: Sun, 18 Oct 2026 22:04:40 +0200
Subject: [PATCH] fix(trips): the settings button as a pill beside the trip's,
 and the dialog centred

The settings button was a bare round icon next to the trip's back pill; it is the same pill now, with the gear and the word Settings. The settings dialog opens centred again: its fixed height already keeps it from jumping between areas, so it does not need to be pinned to the top.
---
 client/src/components/Layout/Navbar.tsx       | 21 +++++++++----------
 .../src/components/Trips/TripShareDialog.tsx  |  1 -
 2 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/client/src/components/Layout/Navbar.tsx b/client/src/components/Layout/Navbar.tsx
index ac68d7861..6d9cef4d4 100644
--- a/client/src/components/Layout/Navbar.tsx
+++ b/client/src/components/Layout/Navbar.tsx
@@ -7,7 +7,6 @@ import { useAddonStore } from '../../store/addonStore'
 import { usePluginStore } from '../../store/pluginStore'
 import { useTranslation } from '../../i18n'
 import { Plane, LogOut, Settings, ChevronDown, Shield, ArrowLeft, ChevronLeft, Moon, Sun, Monitor, CalendarDays, Briefcase, Globe, Compass, BookOpen, Bookmark } from 'lucide-react'
-import { Tooltip } from '../shared/Tooltip'
 import type { LucideIcon } from 'lucide-react'
 import InAppNotificationBell from './InAppNotificationBell.tsx'
 import HelpButton from '../Help/HelpButton'
@@ -179,16 +178,16 @@ export default function Navbar({ tripTitle, tripId, onBack, showBack, onSettings
         {/* The trip's Settings sit with the trip, beside its pill: they are about this
             trip, not about the app the right side of the bar belongs to. */}
         {onSettings && (
-          <Tooltip label={t('trip.settings.title')}>
-            <button
-              type="button"
-              onClick={onSettings}
-              aria-label={t('trip.settings.title')}
-              className="inline-flex h-[30px] w-[30px] flex-none items-center justify-center rounded-full bg-surface-card text-content-muted shadow-sm ring-1 ring-inset ring-edge-faint transition-colors hover:bg-surface-hover hover:text-content focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent"
-            >
-              <Settings className="h-4 w-4" aria-hidden="true" />
-            </button>
-          </Tooltip>
+          // The same pill as the trip's own beside it, so the two read as one pair.
+          <button
+            type="button"
+            onClick={onSettings}
+            aria-label={t('trip.settings.title')}
+            className="inline-flex flex-none items-center gap-1.5 rounded-full bg-surface-card py-1 ps-2 pe-3 text-content shadow-sm ring-1 ring-inset ring-edge-faint transition-colors hover:bg-surface-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent"
+          >
+            <Settings className="h-4 w-4 flex-none text-content-muted" aria-hidden="true" />
+            <span className="text-caption font-semibold">{t('nav.settings')}</span>
+          </button>
         )}
       </div>
 
diff --git a/client/src/components/Trips/TripShareDialog.tsx b/client/src/components/Trips/TripShareDialog.tsx
index 0e5d7053e..e08913fba 100644
--- a/client/src/components/Trips/TripShareDialog.tsx
+++ b/client/src/components/Trips/TripShareDialog.tsx
@@ -72,7 +72,6 @@ function OpenDialog({ onClose, tripId, tripTitle, onMembersChanged }: TripShareD
         onClose={onClose}
         labelledBy={labelId}
         width={areas.length > 1 ? 'wide' : 'detail'}
-        align="top"
         blocked={!!ask}
         bodyClassName={BODY}
         header={(