📱 Adds wrap mode for phones

app/src/routes/controller/+layout.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
 	import Controls from './Controls.svelte';
 	import WidgetContainer from '$lib/components/layout/DynamicLayout.svelte';
-	import { controllerLayout} from '$lib/components/layout/LayoutManager';
+	import { controllerLayout, phoneControllerLayout} from '$lib/components/layout/LayoutManager';
 </script>
 
 <div class="absolute top-0 select-none w-screen h-screen">
 	<Controls />
 	<!-- <button class="absolute z-20 btn" on:click={addWidget}>Add Widget</button> -->
 	<div class="absolute w-full h-screen top-0 overflow-hidden lg:pt-16 pt-12">
-		<WidgetContainer container={$controllerLayout} />
+		<WidgetContainer container={$phoneControllerLayout} />
 	</div>
 </div>

app/src/routes/controller/Controls.svelte

@@ -113,7 +113,7 @@
 			<VerticalSlider min={0} max={100} on:input={(e) => handleRange(e, 'height')} />
 			<label for="height">Ht</label>
 		</div>
-		<div class="flex items-end gap-4 bg-base-300 bg-opacity-50 h-min rounded-tr-xl pl-0 p-3">
+		<div class="flex items-end gap-4 bg-base-300 bg-opacity-50 h-min rounded-tr-xl pl-0 p-3 portrait:hidden">
 			<div class="join">
 				{#each modes as modeValue}
 					<button