From f9b676856edd6cb03fa26bd16ae40d42256ff798 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 14 Aug 2024 22:03:53 +0800
Subject: [PATCH] Prevent text blocks from wrapping

---
 src/pages/settings.css |  5 +++++
 src/pages/settings.jsx | 16 ++++++++--------
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/pages/settings.css b/src/pages/settings.css
index 9c221d63..9a4ef75f 100644
--- 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
index dacb49db..79067cb8 100644
--- 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"