From b595744882ac4a8af57c87850406a5b3f9d700bd Mon Sep 17 00:00:00 2001
From: Adam Moussa <166072409+amoussa1229@users.noreply.github.com>
Date: Fri, 7 Aug 2026 18:04:45 -0400
Subject: [PATCH] fix(form): refine meal description More/Less formatting
 (DEV-24) (#121)

* fix(form): align More/Less spacing with meal card rhythm

* fix(form): lighten More/Less typography underline treatment

* fix(form): add More/Less focus-visible and coarse-pointer hit target

* fix(form): stop meal cards stretching on description expand
---
 src/server/templates/form.css | 23 ++++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/server/templates/form.css b/src/server/templates/form.css
index a7d832c..230084e 100644
--- a/src/server/templates/form.css
+++ b/src/server/templates/form.css
@@ -26,6 +26,7 @@ body {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
   gap: 12px;
+  align-items: start;
 }
 
 header {
@@ -152,6 +153,10 @@ header p { font-size: 0.85rem; opacity: 0.8; }
   overflow: hidden;
 }
 
+.meal-desc:has(+ .meal-desc-toggle) {
+  margin-bottom: 2px;
+}
+
 .meal-desc.is-expanded {
   display: block;
   -webkit-line-clamp: unset;
@@ -159,7 +164,7 @@ header p { font-size: 0.85rem; opacity: 0.8; }
 }
 
 .meal-desc-toggle {
-  display: inline-block;
+  display: block;
   margin: 0 0 4px;
   padding: 0;
   border: none;
@@ -169,11 +174,27 @@ header p { font-size: 0.85rem; opacity: 0.8; }
   font-weight: 600;
   font-family: inherit;
   cursor: pointer;
+  text-decoration: none;
+}
+
+.meal-desc-toggle:hover,
+.meal-desc-toggle:focus-visible {
   text-decoration: underline;
 }
 
 .meal-desc-toggle:hover { opacity: 0.85; }
 
+.meal-desc-toggle:focus-visible {
+  outline: 2px solid var(--color-brand);
+  outline-offset: 2px;
+}
+
+@media (pointer: coarse) {
+  .meal-desc-toggle {
+    padding: 8px 0;
+  }
+}
+
 .qty-control {
   display: flex;
   align-items: center;