Prevent text blocks from wrapping

cheeaun · Aug 14, 2024 · f9b6768 · f9b6768
1 parent b16907d
commit f9b6768
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 8 deletions.
diff --git a/src/pages/settings.css b/src/pages/settings.css
@@ -34,6 +34,11 @@
   align-items: center;
   flex-wrap: wrap;
   border-bottom: var(--hairline-width) solid var(--outline-color);
+
+  &.block {
+    flex-direction: column;
+    align-items: flex-start;
+  }
 }
 #settings-container section > ul > li > div:last-child {
   text-align: end;

diff --git a/src/pages/settings.jsx b/src/pages/settings.jsx
@@ -317,7 +317,7 @@ function Settings({ onClose }) {
         </h3>
         <section>
           <ul>
-            <li>
+            <li class="block">
               <label>
                 <input
                   type="checkbox"
@@ -329,7 +329,7 @@ function Settings({ onClose }) {
                 <Trans>Auto refresh timeline posts</Trans>
               </label>
             </li>
-            <li>
+            <li class="block">
               <label>
                 <input
                   type="checkbox"
@@ -341,7 +341,7 @@ function Settings({ onClose }) {
                 <Trans>Boosts carousel</Trans>
               </label>
             </li>
-            <li>
+            <li class="block">
               <label>
                 <input
                   type="checkbox"
@@ -497,7 +497,7 @@ function Settings({ onClose }) {
               </div>
             </li>
             {!!GIPHY_API_KEY && authenticated && (
-              <li>
+              <li class="block">
                 <label>
                   <input
                     type="checkbox"
@@ -530,7 +530,7 @@ function Settings({ onClose }) {
               </li>
             )}
             {!!IMG_ALT_API_URL && authenticated && (
-              <li>
+              <li class="block">
                 <label>
                   <input
                     type="checkbox"
@@ -567,7 +567,7 @@ function Settings({ onClose }) {
               </li>
             )}
             {authenticated && supports('@mastodon/grouped-notifications') && (
-              <li>
+              <li class="block">
                 <label>
                   <input
                     type="checkbox"
@@ -590,7 +590,7 @@ function Settings({ onClose }) {
               </li>
             )}
             {authenticated && (
-              <li>
+              <li class="block">
                 <label>
                   <input
                     type="checkbox"
@@ -626,7 +626,7 @@ function Settings({ onClose }) {
                 </div>
               </li>
             )}
-            <li>
+            <li class="block">
               <label>
                 <input
                   type="checkbox"