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

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

* wee

* update comment

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.
 */

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;

web/source/settings/components/form/inputs.tsx

@@ -170,19 +170,21 @@ export function Select({
 			<label>
 				{label}
 				{children}
-				<select
+				<div className="select-wrapper">
-					onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
+					<select
-						onChange(e);
+						onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
-						if (onChangeCallback !== undefined) {
+							onChange(e);
-							onChangeCallback(e.target.value);
+							if (onChangeCallback !== undefined) {
-						}
+								onChangeCallback(e.target.value);
-					}}
+							}
-					value={value}
+						}}
-					ref={ref as RefObject<HTMLSelectElement>}
+						value={value}
-					{...props}
+						ref={ref as RefObject<HTMLSelectElement>}
-				>
+						{...props}
-					{options}
+					>
-				</select>
+						{options}
+					</select>
+				</div>
 			</label>
 		</div>
 	);

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 {