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: [PATCH] [bugfix/frontend] Small safari + gnome web fixes (#3219)

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

* wee

* update comment
---
 web/source/css/base.css                       | 10 +++++++
 web/source/css/status.css                     |  4 +++
 .../settings/components/form/inputs.tsx       | 28 ++++++++++---------
 web/source/settings/style.css                 | 15 ++++++++++
 4 files changed, 44 insertions(+), 13 deletions(-)

diff --git a/web/source/css/base.css b/web/source/css/base.css
index 630e4a6d2..e1ac7f82e 100644
--- a/web/source/css/base.css
+++ b/web/source/css/base.css
@@ -178,6 +178,16 @@ input, select, textarea, .input {
 	}
 }
 
+select {
+	/*
+		By default this looks awful on Gnome
+		Web so restyle a bit to try to make
+		it consistent with firefox + chrome.
+	*/
+	appearance: none;
+	line-height: 1.5rem;
+}
+
 /*
 	Squeeze emojis so they fit inline in text.
 */
diff --git a/web/source/css/status.css b/web/source/css/status.css
index 21dc3416e..a9ffbf7dd 100644
--- a/web/source/css/status.css
+++ b/web/source/css/status.css
@@ -308,6 +308,10 @@ main {
 						"eye sensitive ."
 						".   sensitive  .";
 
+					&::-webkit-details-marker {
+						display: none; /* Safari */
+					}
+
 					.eye.button {
 						grid-area: eye;
 						align-self: start;
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 {