From cfbe570fb2baad35ee1f386410277649d8d6845e Mon Sep 17 00:00:00 2001
From: Tero Halla-aho <thallaa@gmail.com>
Date: Sun, 21 Dec 2025 14:50:36 +0200
Subject: [PATCH] Use flex row for billing toggles

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

diff --git a/app/me/page.tsx b/app/me/page.tsx
index 7be2b24..cdedb48 100644
--- a/app/me/page.tsx
+++ b/app/me/page.tsx
@@ -226,25 +226,17 @@ export default function ProfilePage() {
             <form onSubmit={onSaveBilling} style={{ display: 'grid', gap: 14 }}>
               <label
                 className="amenity-option"
-                style={{
-                  maxWidth: 520,
-                  display: 'grid',
-                  gridTemplateColumns: 'auto 1fr auto',
-                  alignItems: 'center',
-                  columnGap: 12,
-                  minHeight: 52,
-                }}
+                style={{ maxWidth: 520, display: 'flex', alignItems: 'center', gap: 12, minHeight: 52, justifyContent: 'space-between' }}
               >
-                <div className="amenity-option-meta" style={{ fontWeight: 600, display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 8, alignItems: 'center', minWidth: 0 }}>
+                <div className="amenity-option-meta" style={{ fontWeight: 600, display: 'flex', alignItems: 'center', gap: 8, minWidth: 0, flex: 1 }}>
                   <span aria-hidden className="amenity-emoji">💸</span>
                   <span className="amenity-name">{t('billingEnableLabel')}</span>
                 </div>
-                <span />
                 <input
                   type="checkbox"
                   checked={billingEnabled}
                   onChange={(e) => setBillingEnabled(e.target.checked)}
-                  style={{ width: 22, height: 22, margin: 0, justifySelf: 'center' }}
+                  style={{ width: 22, height: 22, margin: 0, flexShrink: 0 }}
                 />
               </label>
               {billingEnabled ? (
@@ -260,25 +252,17 @@ export default function ProfilePage() {
                     </label>
                     <label
                       className="amenity-option"
-                      style={{
-                        maxWidth: 520,
-                        display: 'grid',
-                        gridTemplateColumns: 'auto 1fr auto',
-                        alignItems: 'center',
-                        columnGap: 12,
-                        minHeight: 52,
-                      }}
+                      style={{ maxWidth: 520, display: 'flex', alignItems: 'center', gap: 12, minHeight: 52, justifyContent: 'space-between' }}
                     >
-                      <div className="amenity-option-meta" style={{ fontWeight: 600, display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 8, alignItems: 'center', minWidth: 0 }}>
+                      <div className="amenity-option-meta" style={{ fontWeight: 600, display: 'flex', alignItems: 'center', gap: 8, minWidth: 0, flex: 1 }}>
                         <span aria-hidden className="amenity-emoji">🧾</span>
                         <span className="amenity-name">{t('billingIncludeVat')}</span>
                       </div>
-                      <span />
                       <input
                         type="checkbox"
                         checked={billingIncludeVatLine}
                         onChange={(e) => setBillingIncludeVatLine(e.target.checked)}
-                        style={{ width: 22, height: 22, margin: 0, justifySelf: 'center' }}
+                        style={{ width: 22, height: 22, margin: 0, flexShrink: 0 }}
                       />
                     </label>
                   </div>