romfast/gomag-vending
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(design): FINDING-003+004 — fix touch targets and page title size

Browse Source 
- Preset buttons: add min-height 32px desktop, 44px mobile
- btn-sm: add min-height 44px on mobile
- Checkbox: increase min-size on mobile
- Mobile overrides placed AFTER base rules for correct cascade
- Page title h4: override Bootstrap default (24px/500) to match
  DESIGN.md spec (18px/600/Display)
- Cache-bust style.css v30

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude Agent
2026-04-01 20:26:12 +00:00
parent 7079e7a66a
commit b6a265dee6
2 changed files with 15 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
api/app/static/css/style.css
View File

@@ -158,6 +158,12 @@ h1, h2, h3, h4, h5, h6 {
text-wrap: balance; text-wrap: balance;
} }
/* Page titles — DESIGN.md: 18px/600 Display */
h4 {
font-size: 18px;
font-weight: 600;
}
/* Data font — selective: codes, numbers, sums, dates. NOT text names. */ /* Data font — selective: codes, numbers, sums, dates. NOT text names. */
.font-data, code, .dif-sku, .detail-item-card .card-sku { .font-data, code, .dif-sku, .detail-item-card .card-sku {
font-family: var(--font-data); font-family: var(--font-data);
@@ -1054,6 +1060,7 @@ tr.mapping-deleted td {
border: 1px solid var(--border); border: 1px solid var(--border);
color: var(--text-secondary); color: var(--text-secondary);
padding: 3px 10px; padding: 3px 10px;
min-height: 32px;
font-size: 0.78rem; font-size: 0.78rem;
cursor: pointer; cursor: pointer;
transition: all 0.15s; transition: all 0.15s;
@@ -1252,3 +1259,10 @@ tr.mapping-deleted td {
.addr-card-text { font-family: var(--font-body); font-size: 13px; } .addr-card-text { font-family: var(--font-body); font-size: 13px; }
.addr-card.mismatch { background: var(--warning-light); } .addr-card.mismatch { background: var(--warning-light); }
.addr-card.match .addr-match-label { font-size: 11px; color: var(--success-text); } .addr-card.match .addr-match-label { font-size: 11px; color: var(--success-text); }
/* ── Mobile touch targets (must be AFTER base rules for cascade) ── */
@media (max-width: 767.98px) {
.preset-btn { min-height: 44px; padding: 8px 12px; }
.btn-sm { min-height: 44px; }
input[type="checkbox"] { min-width: 20px; min-height: 20px; }
}

2
api/app/templates/base.html
View File

@@ -19,7 +19,7 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.css" rel="stylesheet">
{% set rp = request.scope.get('root_path', '') %} {% set rp = request.scope.get('root_path', '') %}
<link href="{{ rp }}/static/css/style.css?v=28" rel="stylesheet"> <link href="{{ rp }}/static/css/style.css?v=30" rel="stylesheet">
</head> </head>
<body> <body>
<!-- Top Navbar (hidden on mobile via CSS) --> <!-- Top Navbar (hidden on mobile via CSS) -->