From 34b429c50ff21544e9f957bc5d7c49ddc2cc3ee2 Mon Sep 17 00:00:00 2001
From: Tero Halla-aho <thallaa@gmail.com>
Date: Sun, 21 Dec 2025 13:21:13 +0200
Subject: [PATCH] Prevent billing toggles from wrapping

---
 app/me/page.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/me/page.tsx b/app/me/page.tsx
index 6fbca7a..c294f4f 100644
--- a/app/me/page.tsx
+++ b/app/me/page.tsx
@@ -224,8 +224,8 @@ export default function ProfilePage() {
             {billingMessage ? <p style={{ color: 'green', margin: 0 }}>{billingMessage}</p> : null}
             {billingError ? <p style={{ color: 'red', margin: 0 }}>{billingError}</p> : null}
             <form onSubmit={onSaveBilling} style={{ display: 'grid', gap: 14 }}>
-              <label className="amenity-option" style={{ maxWidth: 520, alignItems: 'center' }}>
-                <div className="amenity-option-meta" style={{ fontWeight: 600 }}>
+              <label className="amenity-option" style={{ maxWidth: 520, alignItems: 'center', flexWrap: 'nowrap' }}>
+                <div className="amenity-option-meta" style={{ fontWeight: 600, flex: 1, minWidth: 0 }}>
                   <span aria-hidden className="amenity-emoji">💸</span>
                   <span className="amenity-name">{t('billingEnableLabel')}</span>
                 </div>
@@ -233,7 +233,7 @@ export default function ProfilePage() {
                   type="checkbox"
                   checked={billingEnabled}
                   onChange={(e) => setBillingEnabled(e.target.checked)}
-                  style={{ width: 22, height: 22 }}
+                  style={{ width: 22, height: 22, flexShrink: 0 }}
                 />
               </label>
               {billingEnabled ? (
@@ -247,8 +247,8 @@ export default function ProfilePage() {
                       {t('billingIbanLabel')}
                       <input value={billingIban} onChange={(e) => setBillingIban(e.target.value)} placeholder="FI00 1234 5600 0007 85" />
                     </label>
-                    <label className="amenity-option" style={{ maxWidth: 520, alignItems: 'center' }}>
-                      <div className="amenity-option-meta" style={{ fontWeight: 600 }}>
+                    <label className="amenity-option" style={{ maxWidth: 520, alignItems: 'center', flexWrap: 'nowrap' }}>
+                      <div className="amenity-option-meta" style={{ fontWeight: 600, flex: 1, minWidth: 0 }}>
                         <span aria-hidden className="amenity-emoji">🧾</span>
                         <span className="amenity-name">{t('billingIncludeVat')}</span>
                       </div>
@@ -256,7 +256,7 @@ export default function ProfilePage() {
                         type="checkbox"
                         checked={billingIncludeVatLine}
                         onChange={(e) => setBillingIncludeVatLine(e.target.checked)}
-                        style={{ width: 22, height: 22 }}
+                        style={{ width: 22, height: 22, flexShrink: 0 }}
                       />
                     </label>
                   </div>