From a2ccde16e5afb683b6ea06d018c0916fdb03989e Mon Sep 17 00:00:00 2001
From: Knee Cola <kneecola@duck.com>
Date: Mon, 24 Nov 2025 21:04:21 +0100
Subject: [PATCH] style: improve LocationEditForm fieldset styling and
 formatting
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Wrap location name input in styled fieldset matching other sections
- Add consistent bg-base-200 border styling to location name fieldset
- Fix indentation and whitespace for better code consistency
- Remove trailing whitespace throughout the file

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/ui/LocationEditForm.tsx | 140 ++++++++++++++++++------------------
 1 file changed, 71 insertions(+), 69 deletions(-)

diff --git a/app/ui/LocationEditForm.tsx b/app/ui/LocationEditForm.tsx
index 781812c..b2b8eb0 100644
--- a/app/ui/LocationEditForm.tsx
+++ b/app/ui/LocationEditForm.tsx
@@ -27,7 +27,7 @@ export type LocationEditFormProps = {
 
 export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMonth, userSettings }) => {
     const initialState = { message: null, errors: {} };
-    
+
     const handleAction = updateOrAddLocation.bind(null, location?._id, location?.yearMonth ?? yearMonth);
 
     const [state, dispatch] = useFormState(handleAction, initialState);
@@ -65,24 +65,26 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
                             <TrashIcon className="h-[1em] w-[1em] text-error text-2xl" />
                         </Link>
                     }
-                    <fieldset className="fieldset mt-2 p-2">
-                        <legend className="fieldset-legend font-semibold uppercase">{t("location-name-legend")}</legend>
-                        <input id="locationName"
-                            name="locationName"
-                            type="text"
-                            placeholder={t("location-name-placeholder")}
-                            className="input input-bordered w-full placeholder:text-gray-600"
-                            value={formValues.locationName}
-                            onChange={(e) => handleInputChange("locationName", e.target.value)}
+                    <fieldset className="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4 pb-2 pt-3 mt-4">
+                        <legend className="fieldset-legend font-semibold uppercase text-base">{t("location-name-legend")}</legend>
+                        <fieldset className="fieldset p-2 pt-0">
+                            <input id="locationName"
+                                name="locationName"
+                                type="text"
+                                placeholder={t("location-name-placeholder")}
+                                className="input input-bordered w-full placeholder:text-gray-600"
+                                value={formValues.locationName}
+                                onChange={(e) => handleInputChange("locationName", e.target.value)}
                             />
-                        <div id="status-error" aria-live="polite" aria-atomic="true">
-                            {state.errors?.locationName &&
-                                state.errors.locationName.map((error: string) => (
-                                    <p className="mt-2 text-sm text-red-500" key={error}>
-                                        {error}
-                                    </p>
-                                ))}
-                        </div>
+                            <div id="status-error" aria-live="polite" aria-atomic="true">
+                                {state.errors?.locationName &&
+                                    state.errors.locationName.map((error: string) => (
+                                        <p className="mt-2 text-sm text-red-500" key={error}>
+                                            {error}
+                                        </p>
+                                    ))}
+                            </div>
+                        </fieldset>
                     </fieldset>
 
                     <fieldset className="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4 pb-2 mt-4">
@@ -105,7 +107,7 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
                                             t("tenant-payment-instructions-method--iban") :
                                             t("tenant-payment-instructions-method--iban-disabled")
                                     }
-                                    </option>
+                                </option>
                                 <option value="revolut" disabled={!userSettings?.enableRevolutPayment}>
                                     {
                                         userSettings?.enableRevolutPayment ?
@@ -116,7 +118,7 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
                             </select>
                         </fieldset>
 
-                        { formValues.tenantPaymentMethod === "iban" && userSettings?.enableIbanPayment ? (
+                        {formValues.tenantPaymentMethod === "iban" && userSettings?.enableIbanPayment ? (
                             <>
                                 <div className="divider mt-4 mb-2 font-bold uppercase">{t("iban-payment--form-title")}</div>
                                 <div className="form-control w-full">
@@ -192,30 +194,30 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
                                 </div>
                             </>
                         ) :   // ELSE include hidden inputs to preserve existing values
-                        <>
-                            <input
-                                id="tenantName"
-                                name="tenantName"
-                                type="hidden"
-                                maxLength={30}
-                                defaultValue={formValues.tenantName}
-                            />
-                            <input
-                                id="tenantStreet"
-                                name="tenantStreet"
-                                type="hidden"
-                                className="input input-bordered w-full placeholder:text-gray-600"
-                                defaultValue={formValues.tenantStreet}
-                            />
-                            <input
-                                id="tenantTown"
-                                name="tenantTown"
-                                type="hidden"
-                                defaultValue={formValues.tenantTown}
-                            />
-                        </>
+                            <>
+                                <input
+                                    id="tenantName"
+                                    name="tenantName"
+                                    type="hidden"
+                                    maxLength={30}
+                                    defaultValue={formValues.tenantName}
+                                />
+                                <input
+                                    id="tenantStreet"
+                                    name="tenantStreet"
+                                    type="hidden"
+                                    className="input input-bordered w-full placeholder:text-gray-600"
+                                    defaultValue={formValues.tenantStreet}
+                                />
+                                <input
+                                    id="tenantTown"
+                                    name="tenantTown"
+                                    type="hidden"
+                                    defaultValue={formValues.tenantTown}
+                                />
+                            </>
                         }
-                </fieldset>
+                    </fieldset>
                     <fieldset className="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4 pb-2 mt-4">
                         <legend className="fieldset-legend font-semibold uppercase text-base">{t("auto-utility-bill-forwarding-legend")}</legend>
                         <InfoBox>{t("auto-utility-bill-forwarding-info")}</InfoBox>
@@ -270,7 +272,7 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
                                     <select defaultValue={formValues.rentDueDay}
                                         className="select input-bordered w-full"
                                         name="rentDueDay"
-                                        onChange={(e) => handleInputChange("rentDueDay", parseInt(e.target.value,10))
+                                        onChange={(e) => handleInputChange("rentDueDay", parseInt(e.target.value, 10))
                                         }>
                                         {Array.from({ length: 28 }, (_, i) => i + 1).map(day => (
                                             <option key={day} value={day}>{day}</option>
@@ -328,31 +330,31 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
 
                     <fieldset className="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4 pb-2 mt-4">
                         <legend className="fieldset-legend font-semibold uppercase text-base">{t("scope-legend")}</legend>
-                            {!location ? (
-                                <fieldset className="fieldset">
-                                    <label className="label cursor-pointer justify-start gap-3">
-                                        <input
-                                            type="checkbox"
-                                            name="addToSubsequentMonths"
-                                            className="toggle toggle-primary"
-                                        />
-                                        <legend className="fieldset-legend">{t("add-to-subsequent-months")}</legend>
-                                    </label>
-                                </fieldset>
+                        {!location ? (
+                            <fieldset className="fieldset">
+                                <label className="label cursor-pointer justify-start gap-3">
+                                    <input
+                                        type="checkbox"
+                                        name="addToSubsequentMonths"
+                                        className="toggle toggle-primary"
+                                    />
+                                    <legend className="fieldset-legend">{t("add-to-subsequent-months")}</legend>
+                                </label>
+                            </fieldset>
 
-                            ) : (
-                                <>
-                                    <InfoBox>{t("update-scope-info")}</InfoBox>
-                                    <fieldset className="fieldset mt-2 p-2">
-                                        <legend className="fieldset-legend">{t("update-scope-legend")}</legend>
-                                        <select defaultValue="current" className="select input-bordered w-full" name="updateScope">
-                                            <option value="current">{t("update-current-month")}</option>
-                                            <option value="subsequent">{t("update-subsequent-months")}</option>
-                                            <option value="all">{t("update-all-months")}</option>
-                                        </select>
-                                    </fieldset>
-                                </>
-                            )}
+                        ) : (
+                            <>
+                                <InfoBox>{t("update-scope-info")}</InfoBox>
+                                <fieldset className="fieldset mt-2 p-2">
+                                    <legend className="fieldset-legend">{t("update-scope-legend")}</legend>
+                                    <select defaultValue="current" className="select input-bordered w-full" name="updateScope">
+                                        <option value="current">{t("update-current-month")}</option>
+                                        <option value="subsequent">{t("update-subsequent-months")}</option>
+                                        <option value="all">{t("update-all-months")}</option>
+                                    </select>
+                                </fieldset>
+                            </>
+                        )}
                     </fieldset>
 
                     <div id="status-error" aria-live="polite" aria-atomic="true">
@@ -378,7 +380,7 @@ export const LocationEditFormSkeleton: FC = () => {
 
     return (
         <div className="card card-compact card-bordered min-w-[20em] max-w-[90em] bg-base-100 shadow-s my-1">
-            
+
             <div className="card-body">
                 <fieldset className="fieldset mt-2 p-2">
                     <legend className="fieldset-legend font-semibold uppercase">{t("location-name-legend")}</legend>