From fe95211d5f5ee57ae037cbc893b13f75502fd097 Mon Sep 17 00:00:00 2001
From: Simon Ho <simon.dk.ho@gmail.com>
Date: Fri, 21 Aug 2026 23:34:43 -0400
Subject: [PATCH] fix(ui): align account balance and annual inputs on desktop,
 and stack form fields vertically on mobile

---
 frontend/src/components/dashboard/AccountCard.tsx | 4 ++--
 frontend/src/components/dashboard/PersonForm.tsx  | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/dashboard/AccountCard.tsx b/frontend/src/components/dashboard/AccountCard.tsx
index 0ff4786..4e1a96d 100644
--- a/frontend/src/components/dashboard/AccountCard.tsx
+++ b/frontend/src/components/dashboard/AccountCard.tsx
@@ -28,13 +28,13 @@ export function AccountCard({ account, onDelete, onUpdateBalance, onUpdateContri
 
       <div className="flex-1 grid grid-cols-1 xs:grid-cols-2 gap-2 w-full">
         <div className="flex items-center justify-between sm:justify-start gap-1.5 w-full">
-          <span className="text-xs text-gray-500 dark:text-gray-400 shrink-0 w-14 sm:w-auto">Balance</span>
+          <span className="text-xs text-gray-500 dark:text-gray-400 shrink-0 w-14">Balance</span>
           <div className="flex-1 w-full">
             <NumberInput value={account.balance || 0} onChange={onUpdateBalance} step={1000} min={0} />
           </div>
         </div>
         <div className="flex items-center justify-between sm:justify-start gap-1.5 w-full">
-          <span className="text-xs text-gray-500 dark:text-gray-400 shrink-0 w-14 sm:w-auto">Annual</span>
+          <span className="text-xs text-gray-500 dark:text-gray-400 shrink-0 w-14">Annual</span>
           <div className="flex-1 w-full">
             <NumberInput value={account.annualContribution || 0} onChange={onUpdateContribution} step={100} min={0} />
           </div>
diff --git a/frontend/src/components/dashboard/PersonForm.tsx b/frontend/src/components/dashboard/PersonForm.tsx
index 0c4b690..5e73fb0 100644
--- a/frontend/src/components/dashboard/PersonForm.tsx
+++ b/frontend/src/components/dashboard/PersonForm.tsx
@@ -59,7 +59,7 @@ export function PersonForm({
 
   return (
     <div ref={menuContainerRef} className="space-y-3">
-      <div className="grid grid-cols-2 gap-3">
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
         <div>
           <label className="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Name</label>
           <input