steve/pansy
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Touch-size the list-card footer actions (#105) #115

Merged
steve merged 2 commits from feat/responsive-polish into main 2026-07-22 13:51:54 +00:00
Conversation 3 Commits 2 Files Changed 2
+12 -5
2 changed files with 12 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/plants/PlantCard.tsx
+1 -1
View File
@@ -82,7 +82,7 @@ export function PlantCard({
<button
type="button"
onClick={() => setShowLots((v) => !v)}
className={`${cardActionClass} mr-auto flex items-center gap-1.5`}
className={`${cardActionClass} mr-auto gap-1.5`}
aria-expanded={showLots}
>
{lots.length === 0 ? (
web/src/components/ui/cardActions.ts
+11 -4
View File
@@ -1,10 +1,17 @@
// Shared footer-action button styling for list cards (garden/plant), so the
// verbatim class strings don't drift between them.
//
// Sized for touch: a ~40px-tall tap target (min-h + py-2) rather than the old
// ~28px text-link row, which was easy to mis-tap on a phone (#105). The min-h is
// what guarantees the target even when the label is short.
const cardActionBase =
gitea-actions commented 2026-07-22 13:49:46 +00:00
Review
Copy Link
Copy Source

⚪ Mixed string-concatenation and template-literal styling in same block

maintainability · flagged by 1 model

  • web/src/components/ui/cardActions.ts:8-15 — Minor style inconsistency: cardActionBase is defined with string concatenation ('...' + '...') while the two exports below it use template literals (`${...}`). The PR mixes the two forms within the same 8-line block. Trivial, but worth picking one form for readability.

🪰 Gadfly · advisory

⚪ **Mixed string-concatenation and template-literal styling in same block** _maintainability · flagged by 1 model_ - **`web/src/components/ui/cardActions.ts:8-15`** — Minor style inconsistency: `cardActionBase` is defined with string concatenation (`'...' + '...'`) while the two exports below it use template literals (`` `${...}` ``). The PR mixes the two forms within the same 8-line block. Trivial, but worth picking one form for readability. <sub>🪰 Gadfly · advisory</sub>
'inline-flex min-h-[2.5rem] items-center rounded-md px-3 py-2 text-sm font-medium ' +
'text-muted outline-none transition-colors focus-visible:ring-2 '
export const cardActionClass =
'rounded-md px-2.5 py-1 text-sm font-medium text-muted outline-none transition-colors ' +
'hover:bg-border/50 hover:text-fg focus-visible:ring-2 focus-visible:ring-accent/40'
cardActionBase + 'hover:bg-border/50 hover:text-fg focus-visible:ring-accent/40'
export const cardDangerClass =
'rounded-md px-2.5 py-1 text-sm font-medium text-muted outline-none transition-colors ' +
'hover:bg-red-500/10 hover:text-red-600 focus-visible:ring-2 focus-visible:ring-red-500/40 dark:hover:text-red-400'
cardActionBase +
'hover:bg-red-500/10 hover:text-red-600 focus-visible:ring-red-500/40 dark:hover:text-red-400'