From ffcf6e73f731894d5d278e6fff1fc055b367f1fe Mon Sep 17 00:00:00 2001
From: tobi <31960611+tsmethurst@users.noreply.github.com>
Date: Wed, 21 Aug 2024 10:43:43 +0200
Subject: [bugfix/frontend] Small safari + gnome web fixes (#3219)

* [bugfix/frontend] Small safari + gnome web fixes

* wee

* update comment
---
 web/source/settings/components/form/inputs.tsx | 28 ++++++++++++++------------
 web/source/settings/style.css                  | 15 ++++++++++++++
 2 files changed, 30 insertions(+), 13 deletions(-)

(limited to 'web/source/settings')

diff --git a/web/source/settings/components/form/inputs.tsx b/web/source/settings/components/form/inputs.tsx
index e6c530b53..06075ea87 100644
--- a/web/source/settings/components/form/inputs.tsx
+++ b/web/source/settings/components/form/inputs.tsx
@@ -170,19 +170,21 @@ export function Select({
 			<label>
 				{label}
 				{children}
-				<select
-					onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
-						onChange(e);
-						if (onChangeCallback !== undefined) {
-							onChangeCallback(e.target.value);
-						}
-					}}
-					value={value}
-					ref={ref as RefObject<HTMLSelectElement>}
-					{...props}
-				>
-					{options}
-				</select>
+				<div className="select-wrapper">
+					<select
+						onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
+							onChange(e);
+							if (onChangeCallback !== undefined) {
+								onChangeCallback(e.target.value);
+							}
+						}}
+						value={value}
+						ref={ref as RefObject<HTMLSelectElement>}
+						{...props}
+					>
+						{options}
+					</select>
+				</div>
 			</label>
 		</div>
 	);
diff --git a/web/source/settings/style.css b/web/source/settings/style.css
index ad4b1c3c5..d34dd0eb7 100644
--- a/web/source/settings/style.css
+++ b/web/source/settings/style.css
@@ -374,6 +374,21 @@ section.with-sidebar > form {
 		flex-wrap: wrap;
 		gap: 0.4rem;
 	}
+
+	.select-wrapper {
+		/*
+			Selects are normalized in base.css to not have a down arrow on the side.
+			Overcome this on settings panel forms by replacing the down arrow.
+		*/
+		position: relative;
+		&::after {
+			content: "▼";
+			font-size: 0.8rem;
+			top: 0.3rem;
+			right: 1rem;
+			position: absolute;
+		}
+	}
 }
 
 .form-flex {
-- 
cgit v1.2.3