Fix mobile unwanted scrolling

[ServeurpersoCom]

Make sure to read the contributing guidelines before submitting a PR

Description

This patch introduces dynamic viewport height handling in the main Svelte WebUI layout.

Problem

Using Tailwind’s h-screen relies on the CSS visual viewport height, which often doesn’t match the actual available space in the browser. On mobile devices (iOS/Android), the browser’s address bar appearing/disappearing leads to layout jumps, empty gaps, or hidden content. The UI isn’t always filling the screen as expected.

Solution

Added a reactive viewportHeight state, updated on every window.resize.

On onMount, the value is initialized with window.innerHeight.

The root container’s height is conditionally set with an inline style:height={viewportHeight}px.

Event listeners are properly cleaned up on unmount.

This ensures the layout always matches the real viewport height instead of relying on 100vh/h-screen quirks.

Benefits

Mobile UX is fixed: no more ghost scrollbars or clipped areas when the browser chrome toggles.

No regressions on desktop: viewportHeight just tracks the window height.

Lightweight, clean solution with minimal code changes.

[ServeurpersoCom]

Before:
https://github.com/user-attachments/assets/7a6fccfa-a655-4ffd-bc09-9500d18b04b7

After :
https://github.com/user-attachments/assets/64f19dee-f4d1-4e7f-96f5-03c912b7c91b

[allozaur]

@ServeurpersoCom It'd be much better to utilize <svelte:window bind:innerHeight>, like:

let innerHeight = $state<number | undefined>();

// ...

<svelte:window bind:innerHeight />

// ...

	<div
		class="flex h-screen w-full"
		style:height="{innerHeight}px"
	>

(conditional is not needed as Svelte ignores invalid values and doesn't add the style: if innerHeight is invalid)

[allozaur]

@ServeurpersoCom plz just run npm run format and build static output. Then we can merge :)

[allozaur]

@ServeurpersoCom let's address the merge conflict and merge this PR