mpckit/pull-requests/fit-window/fit-the-window-to-the-display.md

Fit the window to the display

Branch: fit-window → main

What changed

On bajdev's laptop (1920×1080 at about 150% scaling, so about 1280×690 in window units) the 1280×860 window was taller than the screen. It was clamped and the page scrolled. Also, the square pad cells made the grid grow with the window's width.

• Window size (main.go): the window starts hidden. When the app has started, it is sized to 16:9 at 90% of the primary screen's work area, at most 1280×720, then centred and shown. The minimum size is 960×540 (also 16:9). On a 1280×688 work area that gives 1100×619. fitSize is unit-tested for 100%, 125% and 150% scaling and for small screens.
• Layout:
  • The page is exactly the window's height and never scrolls. The header, tabs and footer keep their height, and the two panels take the rest.
  • The pad and sequence grids fill the panel height in four equal rows, instead of square cells sized by width. Long names are cut with an ellipsis.
  • The title row and the project-name row are now one bar: mpckit, project name, the four buttons, About. This is a change from the mockup, to save about 70px of height.
  • Buttons, inputs and tabs are 40px high (were 44–48). The bank buttons are 36px and the tuning sliders 28px. Semitones and Cents sit side by side.
  • Below 1100px wide the visible "Project name" label is hidden; screen readers still get it. Below 600px tall the hint under each grid is hidden.
  • The settings panel scrolls on its own if a window is shorter than the layout needs. It shouldn't at the default size.

Testing

go test ./... passes, including the new fitSize test. main.go vets for Windows. The frontend still can't be built on the server (no Node). Please check on the laptop:

1. wails3 dev: the window opens centred at about 1100×620 with no scrollbar, on both tabs.
2. Make the window as small as it goes (960×540): still no page scrollbar, and the grid shows all 16 cells.
3. Maximise: the layout fills the screen without a scrollbar.
4. npm run check in frontend reports no errors.