[bugfix/frontend] Small safari + gnome web fixes (#3219)

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

* wee

* update comment

2 files changed, 30 insertions, 13 deletions

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 {