Skip to content

fix: serial input bar height stretching with flash panel#57

Merged
zevorn merged 1 commit intomainfrom
fix/serial-panel-height
Mar 17, 2026
Merged

fix: serial input bar height stretching with flash panel#57
zevorn merged 1 commit intomainfrom
fix/serial-panel-height

Conversation

@zevorn
Copy link
Copy Markdown
Owner

@zevorn zevorn commented Mar 17, 2026

Summary

The grid layout (align-items: stretch) makes both panels equal height. The serial output area had a fixed height: 360px that didn't expand, causing flex to push extra space into the input bar, making it unnaturally tall.

Fix

  • serial-output: height: 360pxmin-height: 360px; flex: 1 (fills available space)
  • serial-titlebar: add flex-shrink: 0 (stays fixed)
  • serial-input-bar: add flex-shrink: 0 (stays fixed)
  • Expanded mode: min-height: 0 override (no minimum when fullscreen)

Test plan

  • Serial panel matches flash panel height without stretching input bar
  • Expand button still works correctly
  • Mobile layout (stacked) unaffected

The grid layout uses align-items:stretch to match panel heights.
The serial-output had fixed height:360px which didn't fill the
available space, causing flex to distribute the extra height to
the input bar.

Fix: serial-output uses min-height:360px + flex:1 to fill remaining
space. Titlebar and input bar get flex-shrink:0 to stay fixed height.

Signed-off-by: Chao Liu <chao.liu.zevorn@gmail.com>
@zevorn zevorn merged commit 8c6f1ee into main Mar 17, 2026
1 check passed
Sign up for free to 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