From d549de3747c01b30a52e5f2bf7d1fd04f2770d70 Mon Sep 17 00:00:00 2001
From: Tim Ittermann <tim.ittermann@gmail.com>
Date: Fri, 2 Aug 2024 16:40:45 +0200
Subject: [PATCH] feat: Update MealEntryComponent to use form element for
 better accessibility and maintainability

---
 src/components/mealPlan/MealEntry.tsx | 52 +++++++++++++--------------
 1 file changed, 26 insertions(+), 26 deletions(-)

diff --git a/src/components/mealPlan/MealEntry.tsx b/src/components/mealPlan/MealEntry.tsx
index ef2bc82..7668a58 100644
--- a/src/components/mealPlan/MealEntry.tsx
+++ b/src/components/mealPlan/MealEntry.tsx
@@ -48,7 +48,9 @@ export const MealEntryComponent: React.FC<MealEntryProps> = ({
   };
 
   return (
-    <div
+    <form
+      action={updateMealEntry}
+      ref={formRef}
       onClick={onClick}
       className={classNames({
         "box-border h-[30vh] w-full cursor-text border bg-base-100 p-1 transition md:h-32":
@@ -63,33 +65,31 @@ export const MealEntryComponent: React.FC<MealEntryProps> = ({
         "text-neutral-400": !isCurrentMonth,
       })}
     >
-      <form action={updateMealEntry} ref={formRef} className="h-100">
-        <input type="hidden" name="date" value={dateTime.toSQLDate()!} />
-        <input type="hidden" name="mealPlanId" value={mealPlanId} />
+      <input type="hidden" name="date" value={dateTime.toSQLDate()!} />
+      <input type="hidden" name="mealPlanId" value={mealPlanId} />
 
-        <div className="flex justify-between">
-          <div className="overflow-hidden text-xs font-extrabold lg:text-lg">
-            {dateTime.weekdayShort} {dateTime.day}
-          </div>
-          <div className="h-full w-5">
-            {isToday && <FontAwesomeIcon icon={faCalendar} />}
-          </div>
+      <div className="flex justify-between">
+        <div className="overflow-hidden text-xs font-extrabold lg:text-lg">
+          {dateTime.weekdayShort} {dateTime.day}
         </div>
+        <div className="h-full w-5">
+          {isToday && <FontAwesomeIcon icon={faCalendar} />}
+        </div>
+      </div>
 
-        <textarea
-          defaultValue={entry?.meal}
-          ref={textFieldRef}
-          onFocus={() => setHasFocus(true)}
-          name="meal"
-          onBlur={onBlur}
-          className={classNames({
-            "h-100 w-full flex-grow resize-none overflow-hidden break-words bg-transparent text-start text-xs focus:border-none focus:outline-none lg:text-base":
-              true,
-            "text-base-content": isCurrentMonth,
-            "text-neutral-400": !isCurrentMonth,
-          })}
-        />
-      </form>
-    </div>
+      <textarea
+        defaultValue={entry?.meal}
+        ref={textFieldRef}
+        onFocus={() => setHasFocus(true)}
+        name="meal"
+        onBlur={onBlur}
+        className={classNames({
+          "h-100 w-full flex-grow resize-none overflow-hidden break-words bg-transparent text-start text-xs focus:border-none focus:outline-none lg:text-base":
+            true,
+          "text-base-content": isCurrentMonth,
+          "text-neutral-400": !isCurrentMonth,
+        })}
+      />
+    </form>
   );
 };