Improve compact mobile UI controls#564
Conversation
Add an explicit AGENTS.md styling guideline that prevents agents from introducing rounded corners in UI changes unless the user asks for that specific exception. This keeps future UI work aligned with the project's square-corner visual direction and avoids regressions from default border-radius patterns in component styling.
Replace the always-visible message stream scroll button stack with a compact ArrowUpDown trigger that expands on hover or pointer interaction. This reduces overlap with message item controls while keeping hold, scroll-to-top, and scroll-to-bottom actions available from the same floating control area. Use pointer-up handlers for both opening the flyout and activating expanded controls so touch interactions do not accidentally trigger newly revealed buttons during the same press sequence. Touch and pen actions explicitly close the pinned-open state, while mouse hover can continue showing the expanded controls until the pointer leaves. Add a localized label for the collapsed trigger across existing locales and nudge the floating control anchor slightly left/up within safe-area bounds. Validation: npm run typecheck --workspace @codenomad/ui
Use the measured session center width to drive the narrow header layout instead of relying on phone layout alone. Move search and preview into the existing overflow menu when the center column is narrow, keep the command palette and connection status aligned in the top row, and place secondary actions on the second row. Add an opt-in ContextMeter layout that centers the used/available token pill with a balanced context indicator spacer, avoiding brittle negative margins. The compact header enables this centered-value mode so the token values remain visually centered while menu and fullscreen controls sit at the row edges. Validated with npm run typecheck --workspace @codenomad/ui.
Make the prompt input reduce its empty height only when the measured session center column is narrow and the prompt is in compact layout. The textarea now auto-grows from a smaller rows baseline up to the existing compact height cap before scrolling, and the behavior clears when the center column expands out of narrow mode or the prompt leaves compact layout. Keep the inline expand and clear controls visible through CSS-defined control-fit min-height instead of runtime control measurement. Manual resize and expanded prompt states continue to take precedence over autosizing. Validated with npm run typecheck --workspace @codenomad/ui.
Skip the automatic post-send textarea refocus on touch-only devices so mobile keyboards do not close and immediately reopen after sending a prompt. Desktop and hybrid devices with a fine pointer keep the existing refocus workflow. The guard uses pointer media queries to distinguish touch-only devices from laptops or tablets with mouse/trackpad input. Validation: npm run typecheck --workspace @codenomad/ui.
Keep shared tab action buttons at their intended 32px footprint in the flex tab strip by disabling flex shrink on the new-tab-button class. This keeps the new instance and settings controls consistent with notification and remote controls at narrow widths. Validated with npm run typecheck --workspace @codenomad/ui.
Render static app tabs instead of sortable drag targets on touch-only devices so horizontal swiping the tab bar is not confused with drag-reorder gestures. Desktop and hybrid devices with a fine pointer keep the existing drag-reorder behavior. The tab scroll container now explicitly opts into horizontal touch panning with momentum scrolling. Validation: npm run typecheck --workspace @codenomad/ui.
|
I want you to perform the gatekeeper checks for latest PR state check for regressions |
|
Gatekeeper review for latest PR state complete. Verdict: Request changes before merge. Findings:
Validation:
Scope reviewed:
Merge gate: fix the keyboard activation regression in -- |
|
PR builds are available as GitHub Actions artifacts: https://github.com/NeuralNomadsAI/CodeNomad/actions/runs/27826654445 Artifacts expire in 7 days.
|
1 participant
Summary
Validation