From 910b72ba8cfbc45b9fc52e3266afc3510de82420 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Mon, 27 Nov 2023 19:01:39 +0800
Subject: [PATCH] Make settings page work for very small viewports or super
large text sizes
---
src/pages/settings.css | 34 +++++++++++++++++++++++++++++++---
src/pages/settings.jsx | 1 +
2 files changed, 32 insertions(+), 3 deletions(-)
diff --git a/src/pages/settings.css b/src/pages/settings.css
index 3e21dedb..9a4e6dd5 100644
--- a/src/pages/settings.css
+++ b/src/pages/settings.css
@@ -66,15 +66,17 @@
#settings-container section select {
padding: 4px;
+ width: 100%;
}
#settings-container .radio-group {
display: inline-flex;
align-items: center;
- border-radius: 999px;
+ border-radius: 1.1em;
border: 1px solid var(--button-bg-color);
overflow: hidden;
padding: 1px;
+ flex-wrap: wrap;
}
#settings-container .radio-group input[type='radio'] {
opacity: 0;
@@ -85,6 +87,8 @@
display: inline-block;
padding: 6px 12px;
cursor: pointer;
+ flex-grow: 1;
+ text-align: center;
}
#settings-container .radio-group label input:checked + span {
color: var(--link-color);
@@ -94,7 +98,7 @@
color: var(--button-bg-color);
}
#settings-container .radio-group label:has(input:checked) {
- border-radius: 999px;
+ border-radius: 1.1em;
color: var(--button-text-color);
background-color: var(--button-bg-color);
}
@@ -105,10 +109,34 @@
#settings-container .range-group {
display: flex;
align-items: center;
- gap: 8px;
+ gap: 4px;
+
+ @media (width < 320px) {
+ display: grid;
+ gap: 0;
+ column-gap: 4px;
+ grid-template-areas:
+ 'label1 label2'
+ 'input input';
+ grid-template-columns: 1fr 1fr;
+ grid-template-rows: 1fr 1fr;
+
+ > span:first-child {
+ text-align: left;
+ }
+
+ > span:last-child {
+ text-align: right;
+ }
+ }
}
#settings-container .range-group input[type='range'] {
flex-grow: 1;
+ width: 100%;
+
+ @media (width < 320px) {
+ grid-area: input;
+ }
}
#settings-container .checkbox-fields {
diff --git a/src/pages/settings.jsx b/src/pages/settings.jsx
index e6c44595..23c37fd1 100644
--- a/src/pages/settings.jsx
+++ b/src/pages/settings.jsx
@@ -429,6 +429,7 @@ function Settings({ onClose }) {
<div
style={{
display: 'flex',
+ flexWrap: 'wrap',
gap: 8,
lineHeight: 1.25,
alignItems: 'center',