summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorLibravatar tobi <31960611+tsmethurst@users.noreply.github.com>2024-08-21 10:43:43 +0200
committerLibravatar GitHub <noreply@github.com>2024-08-21 10:43:43 +0200
commitffcf6e73f731894d5d278e6fff1fc055b367f1fe (patch)
tree5845b5aded718276613b374ec93a05a2c1bebf3d
parent[bugfix/frontend] Fix error on submitting domain perm with enter key (#3218) (diff)
downloadgotosocial-ffcf6e73f731894d5d278e6fff1fc055b367f1fe.tar.xz
[bugfix/frontend] Small safari + gnome web fixes (#3219)
* [bugfix/frontend] Small safari + gnome web fixes * wee * update comment
-rw-r--r--web/source/css/base.css10
-rw-r--r--web/source/css/status.css4
-rw-r--r--web/source/settings/components/form/inputs.tsx28
-rw-r--r--web/source/settings/style.css15
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 {