Skip to content

fix(mobile): give the Add Case modal a reachable submit button - #368

Open
shenlvkang-collab wants to merge 1 commit into
Ark0N:masterfrom
shenlvkang-collab:pr/mobile-add-case-submit
Open

fix(mobile): give the Add Case modal a reachable submit button#368
shenlvkang-collab wants to merge 1 commit into
Ark0N:masterfrom
shenlvkang-collab:pr/mobile-add-case-submit

Conversation

@shenlvkang-collab

Copy link
Copy Markdown
Contributor

fix(mobile): give the Add Case modal a reachable submit button

The bug

On a phone, the Add Case modal cannot be submitted at all — the Create/Link button does not
exist anywhere on screen.

mobile.css hides #createCaseModal's .set-foot below 860px:

:is(#appSettingsModal,#sessionOptionsModal,#createCaseModal) .set-foot { display: none; }

and, unlike the Settings modal, that modal's header carries no set-head-save. So the only
submit control is the one that was just hidden. Filling in a case name and tapping around
does nothing; the sheet can only be dismissed.

The fix

Add the header button, following the Settings modal's existing pattern (close first in the
DOM so the focus trap still lands on it; row-reverse puts save to its left), and drive both
buttons together in switchCaseModalTab() and submitCaseModal() — so whichever one is
pressed, the other shows the same pending label and is equally disabled. That matters because
the clone path holds the request open for minutes and a second click starts a second clone.

Following the Settings pattern also means Add Case picks up the existing
.set-head-actions:has(.set-head-save) tray and .set-head-save sizing with no new CSS.
The one CSS edit is a comment: mobile.css still described Add Case as one of "the two sheets
that carry a lone ×", which this change makes false, and it is exactly the comment a reviewer
would check.

Verification

Isolated worktree, clean npm ci:

npm run typecheck clean
npm run format:check All matched files use Prettier code style!
npm run check:frontend-syntax ✓ 34 frontend JS files parse cleanly
npm run check:public-assets Public asset checks passed (42 files).
npm test Test Files 325 passed | 1 skipped (326)
Tests 6340 passed | 12 skipped (6352)

Found while fixing the response viewer (#365) on a phone; unrelated to it, so it is its own PR.

mobile.css hides #createCaseModal's .set-foot below 860px, and that modal's
header — unlike Settings' — carries no set-head-save. So on a phone the
Create/Link button existed nowhere and the modal could not be submitted at all.
Adds the header button and drives both together through switchCaseModalTab()
and submitCaseModal(), so whichever one is pressed the other shows the same
pending state and is equally unclickable. Following the Settings pattern also
means Add Case picks up the existing .set-head-actions:has(.set-head-save) tray
and .set-head-save sizing with no new CSS; the mobile.css comment that still
listed Add Case as a lone-× sheet is corrected to match.
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant

@shenlvkang-collab