fix(form): refine meal description More/Less formatting (DEV-24) (#121)
Some checks failed
Deploy / deploy (push) Has been cancelled

* 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
This commit is contained in:
Adam Moussa 2026-08-07 18:04:45 -04:00 • committed by GitHub
parent 357318ef28
commit b595744882
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -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;