From c9b482cbe2482b2ea3214dddf450468aefba5309 Mon Sep 17 00:00:00 2001
From: hfcRed <hfcred@gmx.net>
Date: Sat, 7 Mar 2026 18:02:06 +0100
Subject: [PATCH] Global search styling

---
 app/components/layout/GlobalSearch.module.css | 13 +++++++++----
 app/components/layout/GlobalSearch.tsx        |  4 ++--
 app/components/layout/WeaponSearch.tsx        |  3 ++-
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/app/components/layout/GlobalSearch.module.css b/app/components/layout/GlobalSearch.module.css
index 8f7d1d39c..7bf40a9d0 100644
--- a/app/components/layout/GlobalSearch.module.css
+++ b/app/components/layout/GlobalSearch.module.css
@@ -49,8 +49,9 @@
 	display: flex;
 	align-items: flex-start;
 	justify-content: center;
-	padding-top: 15vh;
 	backdrop-filter: blur(10px);
+	padding: var(--layout-main-padding);
+	padding-top: 15vh;
 }
 
 .overlay[data-entering] {
@@ -109,6 +110,10 @@
 	& input::placeholder {
 		color: var(--color-text-high);
 	}
+
+	&:focus-within {
+		outline: none;
+	}
 }
 
 .inputIcon {
@@ -132,7 +137,7 @@
 }
 
 .listBoxItem[data-focused] {
-	background-color: var(--color-bg-higher);
+	background-color: var(--color-bg-high);
 }
 
 .listBoxItem[data-selected] {
@@ -140,7 +145,7 @@
 }
 
 .searchTypeContainer {
-	padding: calc(var(--s-2) + 1px) var(--s-4) var(--s-2);
+	padding: var(--s-4);
 	border-bottom: 1px solid var(--color-border);
 }
 
@@ -181,7 +186,7 @@
 }
 
 .searchTypeRadioHovered {
-	background-color: var(--color-bg-higher);
+	background-color: var(--color-bg-high);
 }
 
 .searchTypeRadioFocusVisible {
diff --git a/app/components/layout/GlobalSearch.tsx b/app/components/layout/GlobalSearch.tsx
index 0ea3a9b73..d80b9dc29 100644
--- a/app/components/layout/GlobalSearch.tsx
+++ b/app/components/layout/GlobalSearch.tsx
@@ -134,7 +134,7 @@ export function GlobalSearch() {
 				<span className={styles.searchPlaceholder}>{t("common:search")}</span>
 				<kbd className={styles.searchKbd}>{isMac ? "Cmd+K" : "Ctrl+K"}</kbd>
 			</button>
-			<ModalOverlay className={styles.overlay}>
+			<ModalOverlay className={styles.overlay} isDismissable>
 				<Modal className={styles.modal}>
 					<Dialog className={styles.dialog} aria-label={t("common:search")}>
 						<GlobalSearchContent
@@ -319,7 +319,7 @@ function GlobalSearchContent({
 			) : (
 				<ListBox
 					ref={listBoxRef}
-					className={styles.listBox}
+					className={clsx(styles.listBox, "scrollbar")}
 					aria-label={t("common:search")}
 					selectionMode="single"
 					onAction={handleSelect}
diff --git a/app/components/layout/WeaponSearch.tsx b/app/components/layout/WeaponSearch.tsx
index 0d944ec79..b7542ebf1 100644
--- a/app/components/layout/WeaponSearch.tsx
+++ b/app/components/layout/WeaponSearch.tsx
@@ -1,3 +1,4 @@
+import { clsx } from "clsx";
 import type { TFunction } from "i18next";
 import {
 	Calculator,
@@ -215,7 +216,7 @@ export function WeaponResultsList({
 	return (
 		<ListBox
 			ref={listBoxRef}
-			className={styles.listBox}
+			className={clsx(styles.listBox, "scrollbar")}
 			aria-label={t("common:search")}
 			selectionMode="single"
 			onAction={onSelect}