From b2f0c446b196596c585e06533ba121a0b59cb6f4 Mon Sep 17 00:00:00 2001
From: Hibryda <hibryda@protonmail.com>
Date: Tue, 17 Mar 2026 06:20:44 +0100
Subject: [PATCH] fix(settings): use monolith's working dropdown pattern
 (onclick on container div)

---
 .../categories/AppearanceSettings.svelte      | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/lib/settings/categories/AppearanceSettings.svelte b/src/lib/settings/categories/AppearanceSettings.svelte
index 68acfac..1689095 100644
--- a/src/lib/settings/categories/AppearanceSettings.svelte
+++ b/src/lib/settings/categories/AppearanceSettings.svelte
@@ -100,17 +100,21 @@
   }
 
   function closeDropdowns() { themeOpen = false; uiFontOpen = false; termFontOpen = false; }
+
+  function handleClick(e: MouseEvent) {
+    const target = e.target as HTMLElement;
+    if (!target.closest('.custom-dropdown')) closeDropdowns();
+  }
+
+  function handleKey(e: KeyboardEvent) {
+    if (e.key === 'Escape') closeDropdowns();
+  }
 </script>
 
-<svelte:document onpointerdown={(e) => {
-    if (!(e.target as HTMLElement)?.closest('.dropdown')) closeDropdowns();
-  }} />
-<svelte:window onkeydown={(e) => { if (e.key === 'Escape') closeDropdowns(); }} />
-
-<div class="appearance">
+<div class="appearance" onclick={handleClick} onkeydown={handleKey}
   <h3>Theme</h3>
   <div class="field" id="setting-theme">
-    <div class="dropdown">
+    <div class="custom-dropdown">
       <button class="dropdown-btn" onclick={() => { uiFontOpen = false; termFontOpen = false; themeOpen = !themeOpen; }}>
         <span class="theme-dots">{@html (() => { const p = getPalette(selectedTheme); return [p.red, p.green, p.blue, p.yellow].map(c => `<span style="background:${c}" class="dot"></span>`).join(''); })()}</span>
         {themeLabel}
@@ -196,7 +200,7 @@
   .field { position: relative; }
   .row { display: flex; align-items: center; gap: 0.5rem; }
   .flex1 { flex: 1; }
-  .dropdown { position: relative; }
+  .custom-dropdown { position: relative; }
   .dropdown-btn { width: 100%; padding: 0.375rem 0.625rem; background: var(--ctp-mantle); border: 1px solid var(--ctp-surface0); border-radius: 0.25rem; color: var(--ctp-text); font-size: 0.8125rem; text-align: left; cursor: pointer; display: flex; align-items: center; gap: 0.375rem; }
   .dropdown-btn:hover { border-color: var(--ctp-surface1); }
   .dropdown-menu { position: absolute; top: 100%; left: 0; right: 0; z-index: 50; background: var(--ctp-mantle); border: 1px solid var(--ctp-surface0); border-radius: 0.25rem; max-height: 16rem; overflow-y: auto; margin-top: 0.125rem; }