diff --git a/DECISIONS.md b/DECISIONS.md index 7d78665..9b84911 100644 --- a/DECISIONS.md +++ b/DECISIONS.md @@ -118,3 +118,9 @@ Implementation details: - The round resets when all distinct user IDs present in the topic's entries have been picked. - Toggling fair mode off clears the tracking array. - State is persisted in localStorage alongside existing topic data. + +## Responsive Add-Entry / Add-User / Add-Topic Forms + +_Date: 2026-05-07_ + +Made the add-entry form (`.add-entry-form`) and the sidebar input rows (`.input-row`) wrap on narrow viewports so the **Add** button is never pushed off-screen on mobile. Specifically, `flex-wrap: wrap` is enabled on both rows; `.input-field` uses `flex: 1 1 120px` with `min-width: 0` so inputs can shrink and reflow instead of overflowing; and on viewports ≤ 480px the entry form's submit button stretches to full width on its own row for an easier mobile tap target. Rationale: the previous fixed single-row flex layout assumed enough horizontal space for input + user-select + button, which fails on phone-width screens. Wrapping is preferred over horizontal scrolling for accessibility and usability. diff --git a/css/styles.css b/css/styles.css index 556b93f..bc71262 100644 --- a/css/styles.css +++ b/css/styles.css @@ -359,11 +359,13 @@ body { .input-row { display: flex; + flex-wrap: wrap; gap: 8px; } .input-field { - flex: 1; + flex: 1 1 120px; + min-width: 0; background: var(--clr-input-bg); border: 2px solid var(--clr-border); border-radius: var(--radius-sm); @@ -535,9 +537,14 @@ body { /* ---------- Add Entry Form ---------- */ .add-entry-form { display: flex; + flex-wrap: wrap; gap: 8px; } +.add-entry-form .btn { + flex: 0 0 auto; +} + /* ---------- Entries List ---------- */ .entries-list { display: flex; @@ -888,4 +895,8 @@ body { .topic-item { flex-shrink: 0; } + + .add-entry-form .btn[type="submit"] { + flex: 1 1 100%; + } }