💄 Force App to use 100% of the shortest side

frontend/src/App.tsx

@@ -1,4 +1,4 @@
-import { Component } from 'solid-js';
+import { Component, createSignal } from 'solid-js';
 import { IVisibilityActionRequest, MatrixCapabilities, WidgetApi, WidgetApiToWidgetAction } from 'matrix-widget-api';
 import { HopeProvider } from "@hope-ui/solid";
 
@@ -6,9 +6,10 @@ import { BusinessDataProvider } from './businessData';
 import { AppContextProvider } from './appContext';
 
 import { PassagesDisplay } from './passagesDisplay';
-import { StopsSearchMenu } from './stopsSearchMenu';
+import { StopsSearchMenu } from './stopsSearchMenu/stopsSearchMenu';
 
 import "./App.scss";
+import { onCleanup, onMount } from 'solid-js';
 
 
 function parseFragment() {
@@ -43,6 +44,33 @@ const App: Component = () => {
 		api.transport.reply(ev.detail, {});
 	});
 
+	createSignal({
+		height: window.innerHeight,
+		width: window.innerWidth
+	});
+
+	const onResize = () => {
+		const body = document.body;
+
+		if (window.innerWidth * 9 / 16 < window.innerHeight) {
+			body.style['height'] = 'auto';
+			body.style['width'] = '100vw';
+		}
+		else {
+			body.style['height'] = '100vh';
+			body.style['width'] = 'auto';
+		}
+	};
+
+	onMount(() => {
+		window.addEventListener('resize', onResize);
+		onResize();
+	});
+
+	onCleanup(() => {
+		window.removeEventListener('resize', onResize);
+	})
+
 	return (
 		<BusinessDataProvider>
 			<AppContextProvider>

frontend/src/index.scss

@@ -13,10 +13,8 @@
 	src: url(/public/fonts/IDFVoyageur-Medium.otf);
 }
 
-body {
+html, body {
 	aspect-ratio: 16/9;
-	width: 100vw;
-	height: none;
 
 	margin: 0;