From ca82a029bc3828935146ba36fdedc81c885f3803 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A2u=20Cao?= <raucao@kosmos.org>
Date: Mon, 27 Apr 2026 21:50:47 +0100
Subject: [PATCH] Fix app menu section layout

---
 app/components/app-menu/settings/apis.gjs   | 2 +-
 app/components/app-menu/settings/map-ui.gjs | 2 +-
 app/components/app-menu/settings/nostr.gjs  | 2 +-
 app/styles/app.css                          | 3 +++
 4 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/app/components/app-menu/settings/apis.gjs b/app/components/app-menu/settings/apis.gjs
index 8231b34..77ca764 100644
--- a/app/components/app-menu/settings/apis.gjs
+++ b/app/components/app-menu/settings/apis.gjs
@@ -15,7 +15,7 @@ export default class AppMenuSettingsApis extends Component {
         <Icon @name="server" @size={{20}} />
         <span>API Providers</span>
       </summary>
-      <div class="details-content">
+      <div class="details-content form-layout">
         <div class="form-group">
           <label for="overpass-api">Overpass API Provider</label>
           <select
diff --git a/app/components/app-menu/settings/map-ui.gjs b/app/components/app-menu/settings/map-ui.gjs
index 451c407..d7dfd77 100644
--- a/app/components/app-menu/settings/map-ui.gjs
+++ b/app/components/app-menu/settings/map-ui.gjs
@@ -14,7 +14,7 @@ export default class AppMenuSettingsMapUi extends Component {
         <Icon @name="map" @size={{20}} />
         <span>Map & UI</span>
       </summary>
-      <div class="details-content">
+      <div class="details-content form-layout">
         <div class="form-group">
           <label for="show-quick-search">Quick search buttons visible</label>
           <select
diff --git a/app/components/app-menu/settings/nostr.gjs b/app/components/app-menu/settings/nostr.gjs
index 4260bf5..850a3d4 100644
--- a/app/components/app-menu/settings/nostr.gjs
+++ b/app/components/app-menu/settings/nostr.gjs
@@ -108,7 +108,7 @@ export default class AppMenuSettingsNostr extends Component {
         <Icon @name="zap" @size={{20}} />
         <span>Nostr</span>
       </summary>
-      <div class="details-content">
+      <div class="details-content form-layout">
         <div class="form-group">
           <label for="nostr-photo-fallback-uploads">Upload photos to fallback
             servers</label>
diff --git a/app/styles/app.css b/app/styles/app.css
index 7e4dde2..9779e7f 100644
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -594,6 +594,9 @@ body {
   padding: 0 1.4rem 1rem;
   animation: details-slide-down 0.2s ease-out;
   font-size: 0.9rem;
+}
+
+.sidebar-content details .details-content.form-layout {
   display: flex;
   flex-direction: column;
   gap: 16px;