[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,6 +170,7 @@ export function Select({
 			<label>
 				{label}
 				{children}
+				<div className="select-wrapper">
 					<select
 						onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
 							onChange(e);
@@ -183,6 +184,7 @@ export function 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 {