Skip to content

fix(ui): device touch pass — real geometry for the deferred controls #533

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
chodeus wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix(ui): device touch pass — real geometry for the deferred controls #533

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions frontend/src/components/RecentQueries.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,19 +70,21 @@ export default function RecentQueries({ entries, onSelect, onClear, label = 'Rec
<button
type="button"
onClick={handleClearClick}
className="text-xs text-fg-subtle hover:text-fg underline-offset-2 hover:underline bg-transparent border-0 p-0 cursor-pointer"
className="touch-expand inline-flex items-center text-xs text-fg-subtle hover:text-fg underline-offset-2 hover:underline bg-transparent border-0 p-0 cursor-pointer"
>
Clear
</button>
)}
</div>
{/* min-w-11 keeps touch-expand's 44px box inside the chip, so a
one-character query can't reach into its neighbour. */}
<div className="flex flex-wrap items-center gap-2">
{entries.map(q => (
<button
key={q}
type="button"
onClick={() => onSelect(q)}
className="text-xs px-2.5 py-1 rounded-full bg-surface-alt text-fg-muted hover:bg-surface hover:text-fg border border-border-light"
className="touch-expand inline-flex items-center justify-center min-h-9 min-w-11 text-xs px-2.5 rounded-full bg-surface-alt text-fg-muted hover:bg-surface hover:text-fg border border-border-light"
>
{q}
</button>
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/fields/custom/ArrayObjectField.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -462,7 +462,7 @@ export const ArrayObjectField = ({
}));
const lbl = 'font-mono text-[10px] tracking-[0.8px] text-fg-subtle';
const ctrl =
'h-9 px-2.5 rounded-md bg-surface-inset border border-border text-fg text-sm outline-none focus:border-primary w-full';
'h-11 px-2.5 rounded-md bg-surface-inset border border-border text-fg text-sm outline-none focus:border-primary w-full';
return (
<div
key={index}
Expand Down Expand Up @@ -854,7 +854,7 @@ export const ArrayObjectField = ({
value={item.app_instance || ''}
onChange={e => set('app_instance', e.target.value)}
disabled={disabled}
className="h-9 px-2.5 rounded-md bg-surface border border-border text-fg text-sm font-semibold outline-none focus:border-primary min-w-[160px] flex-1"
className="h-11 px-2.5 rounded-md bg-surface border border-border text-fg text-sm font-semibold outline-none focus:border-primary min-w-[160px] flex-1"
>
<option value="">— Select —</option>
{instanceOptions.map(o => (
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/fields/custom/DirPickerField.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,7 @@ export const DirPickerField = React.memo(({ field, value, onChange, disabled = f
value={activeRoot || ''}
onChange={handleRootChange}
disabled={disabled || loading}
className="flex-1 px-2 py-1 text-xs bg-input border border-border rounded text-fg focus:border-primary focus:outline-none"
className="flex-1 h-11 px-2 text-xs bg-input border border-border rounded text-fg focus:border-primary focus:outline-none"
>
{roots.map(r => (
<option key={r} value={r}>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/fields/custom/InstancesField.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ const ArrInstancePills = React.memo(
onClick={() => onToggle(instance.type, instance.name, !isSelected)}
aria-pressed={isSelected}
title={instance.url || instance.name}
className={`inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-[12.5px] font-medium border transition-colors cursor-pointer disabled:opacity-50 ${
className={`inline-flex items-center gap-2 min-h-11 px-3 rounded-full text-[12.5px] font-medium border transition-colors cursor-pointer disabled:opacity-50 ${
isSelected
? 'bg-primary/15 border-primary text-fg'
: 'bg-surface-inset border-border text-fg-muted hover:border-primary'
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/components/fields/features/schedule/CronInput.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,13 +104,13 @@ export const CronInput = React.memo(
/>

{/* Help text */}
<div className="text-xs text-fg-subtle mt-1">
Format: minute hour day month weekday
<div className="flex flex-wrap items-center gap-2 text-xs text-fg-subtle mt-1">
<span>Format: minute hour day month weekday</span>
<a
href="https://crontab.guru"
target="_blank"
rel="noopener noreferrer"
className="ml-2 text-fg hover:text-primary-hover underline"
className="inline-flex items-center min-h-11 text-fg hover:text-primary-hover underline"
>
crontab.guru helper
</a>
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/components/fields/primitives/FieldLabel.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,9 @@ export const FieldLabel = ({ htmlFor, label, required = false, helpText, classNa
);
}

// gap-2.5 keeps the ⓘ's 44px coarse hit box off the label's own click area.
return (
<span className="mb-1 inline-flex items-center gap-1">
<span className="mb-1 inline-flex items-center gap-2.5">
{labelEl}
<InfoTooltip text={helpText} />
</span>
Expand Down
6 changes: 4 additions & 2 deletions frontend/src/components/fields/select/MultiSelectField.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,12 +64,14 @@ export const MultiSelectField = React.memo(
<FieldWrapper invalid={highlightInvalid}>
<FieldLabel htmlFor={inputId} label={field.label} required={field.required} />

{/* The × is a real 36px box, not a touch-expand: an expanded hit area
on a 26px chip reached across the row gap into the next chip's ×. */}
{selected.length > 0 && (
<div className="flex flex-wrap gap-2 mb-2">
{selected.map((v, i) => (
<span
key={v}
className="inline-flex items-center gap-1 px-2 py-1 rounded-md bg-primary/20 text-fg text-sm"
className="inline-flex items-center gap-1 min-h-11 px-2 rounded-md bg-primary/20 text-fg text-sm"
>
<span className="text-xs text-fg-subtle">{i + 1}.</span>
{labelFor(v)}
Expand All @@ -78,7 +80,7 @@ export const MultiSelectField = React.memo(
type="button"
onClick={() => removeValue(v)}
aria-label={`Remove ${labelFor(v)}`}
className="ml-1 inline-flex items-center justify-center leading-none hover:text-error"
className="ml-1 inline-flex items-center justify-center w-9 h-9 shrink-0 leading-none hover:text-error"
>
×
</button>
Expand Down
8 changes: 5 additions & 3 deletions frontend/src/components/instances/InstanceCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,8 +147,10 @@ export const InstanceCard = ({
? formatSecondsAgo(instanceStats.snapshot_age_seconds)
: null;

// 36px real box + touch-expand's 44px coarse hit area; the row's gap-2.5
// covers the 4px each neighbour reaches past its own edge.
const iconBtn =
'w-8 h-8 rounded-lg flex items-center justify-center text-fg-muted hover:text-fg hover:bg-row-hover transition-colors disabled:opacity-50';
'touch-expand w-9 h-9 rounded-lg flex items-center justify-center text-fg-muted hover:text-fg hover:bg-row-hover transition-colors disabled:opacity-50';

return (
<div className="rounded-xl bg-surface border border-border hover:border-[#3b3d72] transition-colors overflow-hidden">
Expand Down Expand Up @@ -195,7 +197,7 @@ export const InstanceCard = ({
)}
</div>

<div className="flex items-center gap-1.5 shrink-0 w-full justify-end sm:w-auto">
<div className="flex items-center gap-2.5 shrink-0 w-full justify-end sm:w-auto">
<Button variant="surface" size="small" onClick={onTest} disabled={isTesting}>
{isTesting ? 'Testing…' : 'Test'}
</Button>
Expand Down Expand Up @@ -376,7 +378,7 @@ export const InstanceCard = ({
onClick={() =>
onFetchLibraries && onFetchLibraries(instance.name)
}
className="text-xs text-fg-subtle hover:text-fg underline underline-offset-2"
className="inline-flex items-center min-h-11 text-xs text-fg-subtle hover:text-fg underline underline-offset-2"
>
Load libraries
</button>
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/logs/controls/LogFileSelect.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export const LogFileSelect = () => {

return (
<div
className={`flex items-center w-full h-9 px-3 rounded-lg bg-surface-inset border border-border focus-within:border-primary transition-colors ${
className={`flex items-center w-full h-11 px-3 rounded-lg bg-surface-inset border border-border focus-within:border-primary transition-colors ${
disabled ? 'opacity-50' : ''
}`}
>
Expand All @@ -20,7 +20,7 @@ export const LogFileSelect = () => {
disabled={disabled}
onChange={e => onLogFileChange(e.target.value)}
aria-label="Select log file"
className="flex-1 min-w-0 bg-transparent border-0 outline-none font-mono text-xs text-fg-muted cursor-pointer disabled:cursor-not-allowed"
className="flex-1 min-w-0 h-full bg-transparent border-0 outline-none font-mono text-xs text-fg-muted cursor-pointer disabled:cursor-not-allowed"
>
<option value="">Select log file</option>
{logFiles &&
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/logs/controls/ModuleSelect.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export const ModuleSelect = () => {
const { modules, selectedModule, onModuleChange } = useLogControls();

return (
<div className="flex items-center gap-2 w-full h-9 px-3 rounded-lg bg-surface-inset border border-border focus-within:border-primary transition-colors">
<div className="flex items-center gap-2 w-full h-11 px-3 rounded-lg bg-surface-inset border border-border focus-within:border-primary transition-colors">
<span
className={`w-[7px] h-[7px] rounded-full shrink-0 ${
selectedModule ? 'bg-accent' : 'bg-fg-faint'
Expand All @@ -21,7 +21,7 @@ export const ModuleSelect = () => {
value={selectedModule || ''}
onChange={e => onModuleChange(e.target.value)}
aria-label="Select module"
className="flex-1 min-w-0 bg-transparent border-0 outline-none text-[13px] text-fg cursor-pointer"
className="flex-1 min-w-0 h-full bg-transparent border-0 outline-none text-[13px] text-fg cursor-pointer"
>
<option value="">Select module</option>
{modules.map(module => (
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/maintenance/LibraryMaintenance.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -254,7 +254,7 @@ const IncompleteMetadataCard = () => {
key={f.key}
type="button"
onClick={() => toggleField(f.key)}
className="px-3 py-1.5 rounded-full text-sm cursor-pointer"
className="inline-flex items-center min-h-11 px-3 rounded-full text-sm cursor-pointer"
style={{
background: active
? 'color-mix(in srgb, var(--accent) 18%, transparent)'
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/modals/EditMediaModal.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -200,7 +200,7 @@ const EditMediaModal = ({ isOpen, onClose, item, onSave, isSaving = false }) =>
<select
value={formData[field.key] || ''}
onChange={e => handleChange(field.key, e.target.value)}
className="w-full px-3 py-2 bg-surface border border-border rounded-lg text-fg text-sm focus:border-primary outline-none"
className="w-full h-11 px-3 bg-surface border border-border rounded-lg text-fg text-sm focus:border-primary outline-none"
>
{field.options.map(opt => (
<option key={opt} value={opt}>
Expand All @@ -214,7 +214,7 @@ const EditMediaModal = ({ isOpen, onClose, item, onSave, isSaving = false }) =>
value={formData[field.key] || ''}
onChange={e => handleChange(field.key, e.target.value)}
placeholder={field.placeholder || ''}
className="w-full px-3 py-2 bg-surface border border-border rounded-lg text-fg text-sm focus:border-primary outline-none"
className="w-full h-11 px-3 bg-surface border border-border rounded-lg text-fg text-sm focus:border-primary outline-none"
/>
)}
</div>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/modules/ScheduleBlocksEditor.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@ export const ScheduleBlocksEditor = ({ blocks, onChange, disabled }) => {
value={b.mode}
disabled={disabled}
onChange={e => update(i, { mode: e.target.value })}
className="bg-surface border border-border rounded px-2 py-1 text-sm"
className="h-11 bg-surface border border-border rounded px-2 text-sm"
>
{MODE_OPTIONS.map(m => (
<option key={m} value={m}>
Expand Down
6 changes: 4 additions & 2 deletions frontend/src/components/modules/ScheduleCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,10 @@ export const ScheduleCard = React.memo(
},
[moduleKey, onCancel]
);
// 36px real box + touch-expand's 44px coarse hit area; the row's gap-2.5
// covers the 4px each neighbour reaches past its own edge.
const iconBtn =
'w-8 h-8 rounded-lg flex items-center justify-center text-fg-muted hover:text-fg hover:bg-row-hover transition-colors';
'touch-expand w-9 h-9 rounded-lg flex items-center justify-center text-fg-muted hover:text-fg hover:bg-row-hover transition-colors';

return (
<div
Expand Down Expand Up @@ -78,7 +80,7 @@ export const ScheduleCard = React.memo(
)}
</div>

<div className="flex items-center gap-1.5 shrink-0">
<div className="flex items-center gap-2.5 shrink-0">
{isRunning && onCancel && (
<Button variant="danger" size="small" onClick={handleCancelClick}>
Cancel
Expand Down
6 changes: 5 additions & 1 deletion frontend/src/components/ui/InfoTooltip.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,10 @@ import PropTypes from 'prop-types';
*
* Hover and focus-within alone left every field's helpText unreachable on a
* touch screen, so the button also toggles it outright.
*
* The 15px glyph sits in a real 24px box; touch-expand takes the coarse-pointer
* hit area to 44px, which reaches ~6px into the control below (a mis-tap opens
* the tooltip rather than focusing the field — the honest trade for a 15px icon).
*/
const InfoTooltip = ({ text, label = 'More info' }) => {
const [open, setOpen] = useState(false);
Expand All @@ -23,7 +27,7 @@ const InfoTooltip = ({ text, label = 'More info' }) => {
aria-describedby={open ? tooltipId : undefined}
onClick={() => setOpen(o => !o)}
onBlur={() => setOpen(false)}
className="inline-flex items-center justify-center text-fg-faint hover:text-fg-muted focus-visible:text-fg-muted outline-none cursor-help"
className="touch-expand inline-flex items-center justify-center w-6 h-6 shrink-0 text-fg-faint hover:text-fg-muted focus-visible:text-fg-muted outline-none cursor-help"
>
<span className="material-symbols-outlined text-[15px] leading-none">info</span>
</button>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/ui/Pagination.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ const Pagination = ({ currentPage, totalPages, onPageChange, className = '' }) =
value={currentPage}
onChange={handleSelect}
aria-label="Jump to page"
className="appearance-none bg-input border border-border rounded-md text-sm text-fg pl-2 pr-7 py-1 cursor-pointer hover:border-primary hover:bg-input-hover focus:ring-primary transition-colors"
className="appearance-none h-11 bg-input border border-border rounded-md text-sm text-fg pl-2 pr-7 cursor-pointer hover:border-primary hover:bg-input-hover focus:ring-primary transition-colors"
>
{Array.from({ length: totalPages }, (_, i) => i + 1).map(n => (
<option key={n} value={n}>
Expand Down
6 changes: 4 additions & 2 deletions frontend/src/components/ui/SegmentedControl.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,9 @@ const SegmentedControl = ({
fullWidth = false,
}) => {
const wrapH = size === 'sm' ? 'h-9' : 'h-11';
const segH = size === 'sm' ? 'h-7 px-3 text-xs' : 'h-9 px-3.5 text-[13px]';
// min-w-11 pins touch-expand's 44px box to the segment's own width, so a
// one-character schema label can't reach across gap-0.5 into its neighbour.
const segH = size === 'sm' ? 'h-7 min-w-11 px-3 text-xs' : 'h-9 min-w-11 px-3.5 text-[13px]';
const wrapLayout = fullWidth ? 'flex w-full' : 'inline-flex';
const segFlex = fullWidth ? 'flex-1' : '';
return (
Expand All @@ -48,7 +50,7 @@ const SegmentedControl = ({
role="tab"
aria-selected={active}
onClick={() => onChange(opt.value)}
className={`inline-flex items-center justify-center ${segFlex} ${segH} rounded-[7px] whitespace-nowrap transition-colors cursor-pointer ${stateCls}`}
className={`touch-expand inline-flex items-center justify-center ${segFlex} ${segH} rounded-[7px] whitespace-nowrap transition-colors cursor-pointer ${stateCls}`}
>
{opt.label}
</button>
Expand Down
Loading