feat(mobile): search box in the Select Case picker (#488)

The phone case picker had no way to narrow a long case list, so finding
one meant scrolling a sheet that showed about six rows at a time.

- A search field filters rows by name (every typed word must match, any
  order, case-insensitive), with a "No matching cases" state. Enter picks
  the case when exactly one row is left; Escape clears, then closes.
- The field is not auto-focused, so opening the picker does not raise the
  keyboard. The list holds its unfiltered height while searching so the
  sheet does not jump, and the input is 16px so iOS Safari does not zoom.
- Layout: the sheet padded the home-indicator inset on top of the footer
  already doing so, leaving a dead band under Create New Case; the sheet
  now grows to 80dvh and the list fills it instead of a separate 50vh cap.
- Opening scrolls the list (its own box, not scrollIntoView) to the
  currently selected case.

Co-authored-by: Codeman maintainer <noreply@anthropic.com>
This commit is contained in:
Ark0N
2026-09-24 23:08:53 +02:00
committed by GitHub
co-authored by Codeman maintainer
parent 8841bcc93f
commit d81a4a76de
5 changed files with 116 additions and 3 deletions
+50 -1
View File
@@ -7072,12 +7072,61 @@ body.touch-device .terminal-container .xterm .xterm-helper-textarea {
color: #fff;
}
.mobile-case-picker-search {
display: flex;
align-items: center;
gap: 8px;
margin: 12px 20px 4px;
padding: 0 12px;
background: var(--bg-input);
border: 1px solid var(--border-light);
border-radius: 8px;
color: var(--text-dim);
}
.mobile-case-picker-search:focus-within {
border-color: var(--accent, #22c55e);
}
.mobile-case-picker-search input {
flex: 1;
min-width: 0;
padding: 10px 0;
background: transparent;
border: none;
outline: none;
color: var(--text);
/* 16px keeps iOS Safari from zooming the page on focus */
font-size: 16px;
}
/* The wrapper draws the focus state; the global input focus ring doubled it */
#mobileCaseSearch:focus {
outline: none;
border: none;
box-shadow: none;
}
.mobile-case-empty {
padding: 20px;
text-align: center;
color: var(--text-dim);
font-size: 0.9rem;
}
.mobile-case-empty[hidden],
.mobile-case-item[hidden] {
display: none;
}
.mobile-case-picker-body {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 8px 0;
max-height: 50vh;
/* Fill the sheet (its max-height is the cap); a separate cap here left the
list shorter than the sheet could show. min-height lets flex shrink it. */
min-height: 0;
}
.mobile-case-list {