Fix layout shift when closing embedded browser with Ctrl+Q #28

Merged

Copilot merged 2 commits from copilot/fix-gui-shift-issue into main

2025-11-18 08:40:23 -06:00

Copilot commented

2025-11-18 08:21:59 -06:00

(Migrated from github.com)

The home view shifts visually when toggling from embedded browser back to the main UI via Ctrl+Q. Icons move left, footer text moves right.

Root Cause

The home-view element lacks explicit layout properties. When its display toggles from none to flex, the browser reflows inconsistently.

Changes

Added CSS rule for .home-view:

.home-view {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

This ensures stable layout geometry across visibility changes.

Original prompt

This section details on the original issue you should resolve

<issue_title>the GUI shifts after using CTRL+Q to close the imbedded web browser</issue_title>
<issue_description>Issue:
The GUI shifts after using CTRL+Q to close the imbedded web browser
Icons shift to the left, instructions shift to the right

Replication:

Click any icon that launches the streaming service.

Press CTRL+Q to close the streaming service

Operating System:
Ubuntu Linux, version 25.10

Additional Notes:
This occurs with every streaming service and is not isolated to only 1.</issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes SluberskiHomeLab/castroix#27

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

The home view shifts visually when toggling from embedded browser back to the main UI via Ctrl+Q. Icons move left, footer text moves right. ## Root Cause The `home-view` element lacks explicit layout properties. When its `display` toggles from `none` to `flex`, the browser reflows inconsistently. ## Changes Added CSS rule for `.home-view`: ```css .home-view { display: flex; flex-direction: column; width: 100%; height: 100%; overflow-y: auto; } ``` This ensures stable layout geometry across visibility changes.  <details> <summary>Original prompt</summary> > > ---- > > *This section details on the original issue you should resolve* > > <issue_title>the GUI shifts after using CTRL+Q to close the imbedded web browser</issue_title> > <issue_description>Issue: > The GUI shifts after using CTRL+Q to close the imbedded web browser > Icons shift to the left, instructions shift to the right > > Replication: > 1. Click any icon that launches the streaming service. > 2. Press CTRL+Q to close the streaming service > > Operating System: > Ubuntu Linux, version 25.10 > > Additional Notes: > This occurs with every streaming service and is not isolated to only 1.</issue_description> > > ## Comments on the Issue (you are @copilot in this section) > > <comments> > </comments> > </details> - Fixes SluberskiHomeLab/castroix#27  --- ✨ Let Copilot coding agent [set things up for you](https://github.com/SluberskiHomeLab/castroix/issues/new?title=✨+Set+up+Copilot+instructions&body=Configure%20instructions%20for%20this%20repository%20as%20documented%20in%20%5BBest%20practices%20for%20Copilot%20coding%20agent%20in%20your%20repository%5D%28https://gh.io/copilot-coding-agent-tips%29%2E%0A%0A%3COnboard%20this%20repo%3E&assignees=copilot) — coding agent works faster and does higher quality work when set up for your repo.

SluberskiHomeLab (Migrated from github.com) reviewed

2025-11-18 08:21:59 -06:00