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

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

* wee

* update comment
This commit is contained in:
tobi 2024-08-21 10:43:43 +02:00 committed by GitHub
parent 9b2f14b131
commit ffcf6e73f7
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 44 additions and 13 deletions

View file

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

View file

@ -308,6 +308,10 @@ main {
"eye sensitive ."
". sensitive .";
&::-webkit-details-marker {
display: none; /* Safari */
}
.eye.button {
grid-area: eye;
align-self: start;

View file

@ -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>
);

View file

@ -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 {