Responsive client UI

For visual reviews, select the impact scope, then apply these behavioral requirements and the UI review baseline. Compare affected wrapping and layout relationships in the whole page or modal's context while preserving drafts, focus and action access. Inspect all regions for an explicit full-interface review. Examples do not define coverage; fitting the viewport alone is insufficient.

1. Minimum viewport

Use a viewport width of 390 CSS px as the primary acceptance minimum. There must be no unintended overlap, clipping, page-wide horizontal scrolling, or inaccessible primary actions. Below 390px, layout requirements may be relaxed.

2. Decision order

1. First adjust space allocation or wrap elements onto another line; then consider text truncation, icon-only controls, or moving icons into the More menu.
2. Primary actions and primary states must not be omitted.
3. Do not hide conflicts through global clipping, reducing all font sizes, or shrinking click targets.
4. Reduce font sizes only when specifically required by product design.

3. Text truncation

1. Truncated content must be fully available on a secondary page or by opening a menu. Example: Session statistics below the input box.
2. Truncation must not lose errors or other key information.
3. Prefer single-line truncation for tab navigation, visible selectors, buttons, tags, and similar components.
4. Important information that is not available on another page must be displayed in full without truncation.

4. Titles

1. Prefer displaying page titles in full. Move the action area onto another line when necessary. Example: the Plugins page's title wrapping behavior.
2. Prefer natural wrapping for card titles. If the number of lines is limited, the full title must remain available to view.

5. Icon-only controls

1. Reducing a control to an icon requires both:
   • The icon clearly conveys its meaning, or the operation is familiar to users.
   • A tooltip appears on hover; add one if needed.
2. Do not reduce “More account information” to an icon, because it navigates to a separate page.
3. The model selector in the input box can be reduced to an icon because users see it frequently and can open its menu to switch models.
4. Another example is the linked conversation in an automation task.

6. Mobile hover behavior

1. Enable hover effects under @media (hover: hover), independently of viewport width. This queries the primary pointing device, not the current event; JavaScript hover handlers must ignore touch events on mixed-input devices.
2. Tapping on a phone must not leave behind backgrounds, highlights, or action-button visibility intended only for hover. Without hover, actions remain visible or reachable through an explicit control. Keyboard users can reach and reveal the same actions.
3. Preserve normal selected, expanded, enabled, and pressed states, as well as focus indicators. Keep these styles independent of hover capability. Do not clear focus to remove a hover effect; :focus-visible can also apply to text fields focused by touch.
4. Preserve focus during width changes when the control remains visible and interactive. Avoid remounting controls only to change layout. If the focused control is hidden or removed, move focus to a suitable remaining control without opening the mobile keyboard unnecessarily.

7. Mobile tooltips

1. Do not show tooltips that only provide auxiliary information such as action names or keyboard shortcuts on mobile. For example, omit the “Copy” tooltip on a copy button; tapping still performs the original action directly.
2. Tooltips that provide supplementary explanations must support tap-to-show on mobile. For example, the information tooltip beside the Plugins page description.

8. Mobile keyboard

On mobile, do not raise the input keyboard automatically unless it is explicitly intended.

9. Input capabilities and mobile text fields

1. Prefer CSS media features for presentation: (pointer: coarse) describes the primary pointer's accuracy, (hover: none) describes its inability to hover, and width queries select layout breaks. These queries do not detect a physical keyboard. Never branch layout on a parsed user agent.
2. Text fields take a 16px floor under (pointer: coarse) to avoid iOS Safari's focus zoom. Fine pointers keep the existing compact field sizes. Use the field rules in packages/client/ui-plugin-manager/src/client/PluginManagerPage.module.css as the reference.