From 8b2546faaf00a1907f4797c3c725660d52eb219c Mon Sep 17 00:00:00 2001
From: Tero Halla-aho <thallaa@gmail.com>
Date: Sun, 21 Dec 2025 11:59:12 +0200
Subject: [PATCH 01/11] Tighten billing checkbox alignment

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

diff --git a/app/me/page.tsx b/app/me/page.tsx
index 05fb5bc..68812ea 100644
--- a/app/me/page.tsx
+++ b/app/me/page.tsx
@@ -217,7 +217,7 @@ export default function ProfilePage() {
             {billingMessage ? <p style={{ color: 'green' }}>{billingMessage}</p> : null}
             {billingError ? <p style={{ color: 'red' }}>{billingError}</p> : null}
             <form onSubmit={onSaveBilling} style={{ display: 'grid', gap: 14, marginTop: 8 }}>
-              <label style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+              <label style={{ display: 'inline-flex', alignItems: 'center', columnGap: 6 }}>
                 <input type="checkbox" checked={billingEnabled} onChange={(e) => setBillingEnabled(e.target.checked)} />
                 <span>{t('billingEnableLabel')}</span>
               </label>
@@ -232,7 +232,7 @@ export default function ProfilePage() {
                       {t('billingIbanLabel')}
                       <input value={billingIban} onChange={(e) => setBillingIban(e.target.value)} placeholder="FI00 1234 5600 0007 85" />
                     </label>
-                    <label style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+                    <label style={{ display: 'inline-flex', alignItems: 'center', columnGap: 6 }}>
                       <input
                         type="checkbox"
                         checked={billingIncludeVatLine}
-- 
2.45.3


From c0ae6cc9a02b1b69f6c5205884202a7086b9e88a Mon Sep 17 00:00:00 2001
From: Tero Halla-aho <thallaa@gmail.com>
Date: Sun, 21 Dec 2025 12:12:38 +0200
Subject: [PATCH 02/11] Restyle billing toggles like amenity cards

---
 app/me/page.tsx | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/app/me/page.tsx b/app/me/page.tsx
index 68812ea..8c5f4c5 100644
--- a/app/me/page.tsx
+++ b/app/me/page.tsx
@@ -217,9 +217,16 @@ export default function ProfilePage() {
             {billingMessage ? <p style={{ color: 'green' }}>{billingMessage}</p> : null}
             {billingError ? <p style={{ color: 'red' }}>{billingError}</p> : null}
             <form onSubmit={onSaveBilling} style={{ display: 'grid', gap: 14, marginTop: 8 }}>
-              <label style={{ display: 'inline-flex', alignItems: 'center', columnGap: 6 }}>
-                <input type="checkbox" checked={billingEnabled} onChange={(e) => setBillingEnabled(e.target.checked)} />
-                <span>{t('billingEnableLabel')}</span>
+              <label className="amenity-option" style={{ maxWidth: 460, alignItems: 'center' }}>
+                <div className="amenity-option-meta" style={{ fontWeight: 600 }}>
+                  <span className="amenity-name">{t('billingEnableLabel')}</span>
+                </div>
+                <input
+                  type="checkbox"
+                  checked={billingEnabled}
+                  onChange={(e) => setBillingEnabled(e.target.checked)}
+                  style={{ width: 18, height: 18 }}
+                />
               </label>
               {billingEnabled ? (
                 <>
@@ -232,13 +239,16 @@ export default function ProfilePage() {
                       {t('billingIbanLabel')}
                       <input value={billingIban} onChange={(e) => setBillingIban(e.target.value)} placeholder="FI00 1234 5600 0007 85" />
                     </label>
-                    <label style={{ display: 'inline-flex', alignItems: 'center', columnGap: 6 }}>
+                    <label className="amenity-option" style={{ maxWidth: 460, alignItems: 'center' }}>
+                      <div className="amenity-option-meta" style={{ fontWeight: 600 }}>
+                        <span className="amenity-name">{t('billingIncludeVat')}</span>
+                      </div>
                       <input
                         type="checkbox"
                         checked={billingIncludeVatLine}
                         onChange={(e) => setBillingIncludeVatLine(e.target.checked)}
+                        style={{ width: 18, height: 18 }}
                       />
-                      <span>{t('billingIncludeVat')}</span>
                     </label>
                   </div>
                   <div style={{ border: '1px solid #eee', padding: 12, borderRadius: 6 }}>
-- 
2.45.3


From 3bf1b672560867fb0893e72a9802413e24e5dbbc Mon Sep 17 00:00:00 2001
From: Tero Halla-aho <thallaa@gmail.com>
Date: Sun, 21 Dec 2025 12:29:57 +0200
Subject: [PATCH 03/11] Refactor profile page layout

---
 app/me/page.tsx | 145 +++++++++++++++++++++++++-----------------------
 1 file changed, 75 insertions(+), 70 deletions(-)

diff --git a/app/me/page.tsx b/app/me/page.tsx
index 8c5f4c5..625ba75 100644
--- a/app/me/page.tsx
+++ b/app/me/page.tsx
@@ -157,67 +157,74 @@ export default function ProfilePage() {
   }
 
   return (
-    <main className="panel" style={{ maxWidth: 640, margin: '40px auto' }}>
-      <h1>{t('myProfileTitle')}</h1>
-      {message ? <p style={{ color: 'green' }}>{message}</p> : null}
+    <main style={{ maxWidth: 1040, margin: '32px auto', display: 'grid', gap: 18 }}>
+      <header className="panel" style={{ display: 'grid', gap: 12, padding: 18 }}>
+        <div>
+          <h1 style={{ margin: 0 }}>{t('myProfileTitle')}</h1>
+          {message ? <p style={{ color: 'green', margin: '6px 0 0' }}>{message}</p> : null}
+        </div>
+        {user ? (
+          <>
+            <div style={{ display: 'grid', gap: 6, gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))' }}>
+              <div><strong>{t('profileEmail')}:</strong> {user.email}</div>
+              <div><strong>{t('profileName')}:</strong> {user.name ?? '—'}</div>
+              <div><strong>{t('profilePhone')}:</strong> {user.phone ?? '—'}</div>
+              <div><strong>{t('profileRole')}:</strong> {user.role}</div>
+              <div><strong>{t('profileStatus')}:</strong> {user.status}</div>
+              <div><strong>{t('profileEmailVerified')}:</strong> {user.emailVerifiedAt ? t('yes') : t('no')}</div>
+              <div><strong>{t('profileApproved')}:</strong> {user.approvedAt ? t('yes') : t('no')}</div>
+            </div>
+            <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
+              <a className="button secondary" href="/listings/mine">
+                {t('navMyListings')}
+              </a>
+              <a className="button secondary" href="/listings/new">
+                {t('navNewListing')}
+              </a>
+            </div>
+          </>
+        ) : (
+          <p style={{ color: 'red', margin: 0 }}>{error ?? t('notLoggedIn')}</p>
+        )}
+      </header>
+
       {user ? (
         <>
-          <ul>
-            <li>
-              <strong>{t('profileEmail')}:</strong> {user.email}
-            </li>
-            <li>
-              <strong>{t('profileName')}:</strong> {user.name ?? '—'}
-            </li>
-            <li>
-              <strong>{t('profilePhone')}:</strong> {user.phone ?? '—'}
-            </li>
-            <li>
-              <strong>{t('profileRole')}:</strong> {user.role}
-            </li>
-            <li>
-              <strong>{t('profileStatus')}:</strong> {user.status}
-            </li>
-            <li>
-              <strong>{t('profileEmailVerified')}:</strong> {user.emailVerifiedAt ? t('yes') : t('no')}
-            </li>
-            <li>
-              <strong>{t('profileApproved')}:</strong> {user.approvedAt ? t('yes') : t('no')}
-            </li>
-          </ul>
-          <div style={{ marginTop: 16, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
-            <a className="button secondary" href="/listings/mine">
-              {t('navMyListings')}
-            </a>
-            <a className="button secondary" href="/listings/new">
-              {t('navNewListing')}
-            </a>
-          </div>
-          <form onSubmit={onSave} style={{ marginTop: 20, display: 'grid', gap: 10, maxWidth: 420 }}>
-            <label>
-              {t('profileName')}
-              <input value={name} onChange={(e) => setName(e.target.value)} />
-            </label>
-            <label>
-              {t('profilePhone')}
-              <input value={phone} onChange={(e) => setPhone(e.target.value)} />
-            </label>
-            <label>
-              {t('passwordLabel')} ({t('passwordHint')})
-              <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} minLength={8} />
-            </label>
-            <p style={{ fontSize: 12, color: '#666' }}>{t('emailLocked')}</p>
-            <button className="button" type="submit" disabled={saving}>
-              {saving ? t('saving') : t('save')}
-            </button>
-          </form>
-          <section style={{ marginTop: 30 }}>
-            <h2 style={{ marginBottom: 6 }}>{t('billingSettingsTitle')}</h2>
-            <p style={{ color: '#444', marginBottom: 12 }}>{t('billingSettingsLead')}</p>
-            {billingMessage ? <p style={{ color: 'green' }}>{billingMessage}</p> : null}
-            {billingError ? <p style={{ color: 'red' }}>{billingError}</p> : null}
-            <form onSubmit={onSaveBilling} style={{ display: 'grid', gap: 14, marginTop: 8 }}>
-              <label className="amenity-option" style={{ maxWidth: 460, alignItems: 'center' }}>
+          <section className="panel" style={{ padding: 18, display: 'grid', gap: 12 }}>
+            <h2 style={{ margin: 0 }}>{t('myProfileTitle')}</h2>
+            <form onSubmit={onSave} style={{ display: 'grid', gap: 12 }}>
+              <div style={{ display: 'grid', gap: 10, gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', maxWidth: 760 }}>
+                <label>
+                  {t('profileName')}
+                  <input value={name} onChange={(e) => setName(e.target.value)} />
+                </label>
+                <label>
+                  {t('profilePhone')}
+                  <input value={phone} onChange={(e) => setPhone(e.target.value)} />
+                </label>
+                <label>
+                  {t('passwordLabel')} ({t('passwordHint')})
+                  <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} minLength={8} />
+                </label>
+              </div>
+              <p style={{ fontSize: 12, color: '#666', margin: 0 }}>{t('emailLocked')}</p>
+              <div>
+                <button className="button" type="submit" disabled={saving} style={{ minWidth: 160 }}>
+                  {saving ? t('saving') : t('save')}
+                </button>
+              </div>
+            </form>
+          </section>
+
+          <section className="panel" style={{ padding: 18, display: 'grid', gap: 12 }}>
+            <div>
+              <h2 style={{ margin: 0 }}>{t('billingSettingsTitle')}</h2>
+              <p style={{ color: '#444', margin: '6px 0 0' }}>{t('billingSettingsLead')}</p>
+            </div>
+            {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 }}>
                   <span className="amenity-name">{t('billingEnableLabel')}</span>
                 </div>
@@ -230,7 +237,7 @@ export default function ProfilePage() {
               </label>
               {billingEnabled ? (
                 <>
-                  <div style={{ display: 'grid', gap: 8 }}>
+                  <div style={{ display: 'grid', gap: 10, gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', maxWidth: 760 }}>
                     <label>
                       {t('billingAccountNameLabel')}
                       <input value={billingAccountName} onChange={(e) => setBillingAccountName(e.target.value)} placeholder="Example Oy" />
@@ -239,7 +246,7 @@ 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: 460, alignItems: 'center' }}>
+                    <label className="amenity-option" style={{ maxWidth: 520, alignItems: 'center' }}>
                       <div className="amenity-option-meta" style={{ fontWeight: 600 }}>
                         <span className="amenity-name">{t('billingIncludeVat')}</span>
                       </div>
@@ -251,7 +258,7 @@ export default function ProfilePage() {
                       />
                     </label>
                   </div>
-                  <div style={{ border: '1px solid #eee', padding: 12, borderRadius: 6 }}>
+                  <div style={{ border: '1px solid rgba(148,163,184,0.3)', padding: 12, borderRadius: 8, background: 'rgba(255,255,255,0.02)' }}>
                     <div style={{ marginBottom: 8 }}>
                       <strong>{t('billingListingsTitle')}</strong>
                       <div style={{ color: '#555', fontSize: 13 }}>{t('billingListingsLead')}</div>
@@ -270,11 +277,11 @@ export default function ProfilePage() {
                                 ? 'yes'
                                 : 'no';
                           return (
-                            <div key={listing.id} style={{ border: '1px solid #f0f0f0', padding: 10, borderRadius: 4 }}>
-                              <div style={{ fontWeight: 600, marginBottom: 6 }}>
+                            <div key={listing.id} style={{ border: '1px solid #f0f0f0', padding: 10, borderRadius: 6, display: 'grid', gap: 8 }}>
+                              <div style={{ fontWeight: 600 }}>
                                 {listing.title} ({listing.slug})
                               </div>
-                              <div style={{ display: 'grid', gap: 8 }}>
+                              <div style={{ display: 'grid', gap: 8, gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))' }}>
                                 <label>
                                   {t('billingAccountNameLabel')}
                                   <input
@@ -331,19 +338,17 @@ export default function ProfilePage() {
                   </div>
                 </>
               ) : (
-                <p style={{ color: '#666' }}>{t('billingDisabledHint')}</p>
+                <p style={{ color: '#666', margin: 0 }}>{t('billingDisabledHint')}</p>
               )}
               <div>
-                <button className="button" type="submit" disabled={billingSaving}>
+                <button className="button" type="submit" disabled={billingSaving} style={{ minWidth: 160 }}>
                   {billingSaving ? t('saving') : t('save')}
                 </button>
               </div>
             </form>
           </section>
         </>
-      ) : (
-        <p style={{ color: 'red' }}>{error ?? t('notLoggedIn')}</p>
-      )}
+      ) : null}
     </main>
   );
 }
-- 
2.45.3


From e21155056926e0c00e46a93b693d9f7328f05557 Mon Sep 17 00:00:00 2001
From: Tero Halla-aho <thallaa@gmail.com>
Date: Sun, 21 Dec 2025 13:12:22 +0200
Subject: [PATCH 04/11] Add icon + larger toggles for billing cards

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

diff --git a/app/me/page.tsx b/app/me/page.tsx
index 625ba75..6fbca7a 100644
--- a/app/me/page.tsx
+++ b/app/me/page.tsx
@@ -226,13 +226,14 @@ export default function ProfilePage() {
             <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 }}>
+                  <span aria-hidden className="amenity-emoji">💸</span>
                   <span className="amenity-name">{t('billingEnableLabel')}</span>
                 </div>
                 <input
                   type="checkbox"
                   checked={billingEnabled}
                   onChange={(e) => setBillingEnabled(e.target.checked)}
-                  style={{ width: 18, height: 18 }}
+                  style={{ width: 22, height: 22 }}
                 />
               </label>
               {billingEnabled ? (
@@ -248,13 +249,14 @@ export default function ProfilePage() {
                     </label>
                     <label className="amenity-option" style={{ maxWidth: 520, alignItems: 'center' }}>
                       <div className="amenity-option-meta" style={{ fontWeight: 600 }}>
+                        <span aria-hidden className="amenity-emoji">🧾</span>
                         <span className="amenity-name">{t('billingIncludeVat')}</span>
                       </div>
                       <input
                         type="checkbox"
                         checked={billingIncludeVatLine}
                         onChange={(e) => setBillingIncludeVatLine(e.target.checked)}
-                        style={{ width: 18, height: 18 }}
+                        style={{ width: 22, height: 22 }}
                       />
                     </label>
                   </div>
-- 
2.45.3


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 05/11] 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>
-- 
2.45.3


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 06/11] 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>
-- 
2.45.3


From 1882d58474e3f8697a2c388f2710c8208e6b1f2d Mon Sep 17 00:00:00 2001
From: Tero Halla-aho <thallaa@gmail.com>
Date: Sun, 21 Dec 2025 14:01:57 +0200
Subject: [PATCH 07/11] Align billing toggles with flex layout

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

diff --git a/app/me/page.tsx b/app/me/page.tsx
index ab1080c..d7f82c0 100644
--- a/app/me/page.tsx
+++ b/app/me/page.tsx
@@ -226,7 +226,7 @@ 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: 10 }}
+                style={{ maxWidth: 520, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}
               >
                 <div className="amenity-option-meta" style={{ fontWeight: 600, minWidth: 0 }}>
                   <span aria-hidden className="amenity-emoji">💸</span>
@@ -252,7 +252,7 @@ export default function ProfilePage() {
                     </label>
                     <label
                       className="amenity-option"
-                      style={{ maxWidth: 520, display: 'grid', gridTemplateColumns: 'auto 1fr auto', alignItems: 'center', columnGap: 10 }}
+                      style={{ maxWidth: 520, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}
                     >
                       <div className="amenity-option-meta" style={{ fontWeight: 600, minWidth: 0 }}>
                         <span aria-hidden className="amenity-emoji">🧾</span>
-- 
2.45.3


From 6446b93950d92031331b1e7c35e333572993867b Mon Sep 17 00:00:00 2001
From: Tero Halla-aho <thallaa@gmail.com>
Date: Sun, 21 Dec 2025 14:12:57 +0200
Subject: [PATCH 08/11] Center billing toggle checkbox within card

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

diff --git a/app/me/page.tsx b/app/me/page.tsx
index d7f82c0..6eaf20b 100644
--- a/app/me/page.tsx
+++ b/app/me/page.tsx
@@ -226,7 +226,7 @@ export default function ProfilePage() {
             <form onSubmit={onSaveBilling} style={{ display: 'grid', gap: 14 }}>
               <label
                 className="amenity-option"
-                style={{ maxWidth: 520, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}
+                style={{ maxWidth: 520, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, minHeight: 52 }}
               >
                 <div className="amenity-option-meta" style={{ fontWeight: 600, minWidth: 0 }}>
                   <span aria-hidden className="amenity-emoji">💸</span>
@@ -236,7 +236,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, margin: 0, alignSelf: 'center' }}
                 />
               </label>
               {billingEnabled ? (
@@ -252,7 +252,7 @@ export default function ProfilePage() {
                     </label>
                     <label
                       className="amenity-option"
-                      style={{ maxWidth: 520, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}
+                      style={{ maxWidth: 520, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, minHeight: 52 }}
                     >
                       <div className="amenity-option-meta" style={{ fontWeight: 600, minWidth: 0 }}>
                         <span aria-hidden className="amenity-emoji">🧾</span>
@@ -262,7 +262,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, margin: 0, alignSelf: 'center' }}
                       />
                     </label>
                   </div>
-- 
2.45.3


From 5b08ca33b309cf4372c5e55a7f5a32b9a5b7ec82 Mon Sep 17 00:00:00 2001
From: Tero Halla-aho <thallaa@gmail.com>
Date: Sun, 21 Dec 2025 14:19:45 +0200
Subject: [PATCH 09/11] Force 3-column grid for billing toggles

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

diff --git a/app/me/page.tsx b/app/me/page.tsx
index 6eaf20b..7be2b24 100644
--- a/app/me/page.tsx
+++ b/app/me/page.tsx
@@ -226,17 +226,25 @@ export default function ProfilePage() {
             <form onSubmit={onSaveBilling} style={{ display: 'grid', gap: 14 }}>
               <label
                 className="amenity-option"
-                style={{ maxWidth: 520, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, minHeight: 52 }}
+                style={{
+                  maxWidth: 520,
+                  display: 'grid',
+                  gridTemplateColumns: 'auto 1fr auto',
+                  alignItems: 'center',
+                  columnGap: 12,
+                  minHeight: 52,
+                }}
               >
-                <div className="amenity-option-meta" style={{ fontWeight: 600, minWidth: 0 }}>
+                <div className="amenity-option-meta" style={{ fontWeight: 600, display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 8, alignItems: 'center', minWidth: 0 }}>
                   <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, alignSelf: 'center' }}
+                  style={{ width: 22, height: 22, margin: 0, justifySelf: 'center' }}
                 />
               </label>
               {billingEnabled ? (
@@ -252,17 +260,25 @@ export default function ProfilePage() {
                     </label>
                     <label
                       className="amenity-option"
-                      style={{ maxWidth: 520, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, minHeight: 52 }}
+                      style={{
+                        maxWidth: 520,
+                        display: 'grid',
+                        gridTemplateColumns: 'auto 1fr auto',
+                        alignItems: 'center',
+                        columnGap: 12,
+                        minHeight: 52,
+                      }}
                     >
-                      <div className="amenity-option-meta" style={{ fontWeight: 600, minWidth: 0 }}>
+                      <div className="amenity-option-meta" style={{ fontWeight: 600, display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 8, alignItems: 'center', minWidth: 0 }}>
                         <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, alignSelf: 'center' }}
+                        style={{ width: 22, height: 22, margin: 0, justifySelf: 'center' }}
                       />
                     </label>
                   </div>
-- 
2.45.3


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 10/11] 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>
-- 
2.45.3


From ab559b1a667e09c1ab2fecb630fb4a98aea13cba Mon Sep 17 00:00:00 2001
From: Tero Halla-aho <thallaa@gmail.com>
Date: Sun, 21 Dec 2025 15:08:05 +0200
Subject: [PATCH 11/11] Align VAT toggle with grid columns

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

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