📱 Adds wrap mode for phones

app/src/lib/components/layout/DynamicLayout.svelte

@@ -5,10 +5,11 @@
 	export let container: WidgetContainerConfig;
 </script>
 
-<div class="w-full h-full flex flex-col">
+<div class="w-full h-full flex flex-col overflow-hidden">
 	{#if container.header}
-		<div class="bg-base-300">
+		<div role="tablist" class="tabs tabs-lifted w-min">
-			<div class="bg-base-100 p-2 w-min">{container.header}</div>
+			<a role="tab" class="tab">{container.header}</a>
+			<a role="tab" class="tab tab-active">{container.header}</a>
 		</div>
 	{/if}
 
@@ -16,6 +17,7 @@
 		class="flex w-full h-full"
 		class:flex-row={container.layout === 'column'}
 		class:flex-col={container.layout === 'row'}
+		class:flex-wrap={container.layout === 'wrap'}
 	>
 		{#each container.widgets as widget, index (widget.id + '-' + index)}
 			<Widget size={widget.size ?? 1}>

app/src/lib/components/layout/LayoutManager.ts

@@ -13,7 +13,7 @@ export interface WidgetConfig {
 
 export interface WidgetContainerConfig {
 	id: string | number;
-	layout: 'row' | 'column';
+	layout: 'row' | 'column' | 'wrap';
 	header?: string;
 	size?: number;
 	widgets: Array<WidgetConfig | WidgetContainerConfig>;
@@ -29,6 +29,18 @@ export const WidgetComponents = {
 	CpuUsageChart
 };
 
+export const phoneControllerLayout: Writable<WidgetContainerConfig> = persistentStore(
+	'phone_controller_layout',
+	{
+		id: 'root',
+		layout: 'wrap',
+		widgets: [
+			{ id: 2, component: 'Stream' },
+			{ id: 1, component: 'Visualization', props: { debug: true } }
+		]
+	} as WidgetContainerConfig
+);
+
 export const controllerLayout: Writable<WidgetContainerConfig> = persistentStore(
 	'controller_layout',
 	{

app/src/lib/components/layout/Widget.svelte

@@ -2,6 +2,6 @@
     export let size = 1;
 </script>
 
-<div class="box-border overflow-hidden" style="flex: {size}">
+<div class="box-border overflow-hidden min-w-96" style="flex: {size}">
     <slot></slot>
 </div>

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