From e79f4c096666147f916d19b8947c84ff2f4f8d01 Mon Sep 17 00:00:00 2001
From: Tero Halla-aho <thallaa@gmail.com>
Date: Sun, 21 Dec 2025 13:53:46 +0200
Subject: [PATCH] Grid-align billing toggle cards

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

diff --git a/app/me/page.tsx b/app/me/page.tsx
index c294f4f..ab1080c 100644
--- a/app/me/page.tsx
+++ b/app/me/page.tsx
@@ -224,8 +224,11 @@ 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', flexWrap: 'nowrap' }}>
-                <div className="amenity-option-meta" style={{ fontWeight: 600, flex: 1, minWidth: 0 }}>
+              <label
+                className="amenity-option"
+                style={{ maxWidth: 520, display: 'grid', gridTemplateColumns: 'auto 1fr auto', alignItems: 'center', columnGap: 10 }}
+              >
+                <div className="amenity-option-meta" style={{ fontWeight: 600, minWidth: 0 }}>
                   <span aria-hidden className="amenity-emoji">💸</span>
                   <span className="amenity-name">{t('billingEnableLabel')}</span>
                 </div>
@@ -233,7 +236,7 @@ export default function ProfilePage() {
                   type="checkbox"
                   checked={billingEnabled}
                   onChange={(e) => setBillingEnabled(e.target.checked)}
-                  style={{ width: 22, height: 22, flexShrink: 0 }}
+                  style={{ width: 22, height: 22 }}
                 />
               </label>
               {billingEnabled ? (
@@ -247,8 +250,11 @@ 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', flexWrap: 'nowrap' }}>
-                      <div className="amenity-option-meta" style={{ fontWeight: 600, flex: 1, minWidth: 0 }}>
+                    <label
+                      className="amenity-option"
+                      style={{ maxWidth: 520, display: 'grid', gridTemplateColumns: 'auto 1fr auto', alignItems: 'center', columnGap: 10 }}
+                    >
+                      <div className="amenity-option-meta" style={{ fontWeight: 600, minWidth: 0 }}>
                         <span aria-hidden className="amenity-emoji">🧾</span>
                         <span className="amenity-name">{t('billingIncludeVat')}</span>
                       </div>
@@ -256,7 +262,7 @@ export default function ProfilePage() {
                         type="checkbox"
                         checked={billingIncludeVatLine}
                         onChange={(e) => setBillingIncludeVatLine(e.target.checked)}
-                        style={{ width: 22, height: 22, flexShrink: 0 }}
+                        style={{ width: 22, height: 22 }}
                       />
                     </label>
                   </div>