📱 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 class="bg-base-100 p-2 w-min">{container.header}</div>
+		<div role="tablist" class="tabs tabs-lifted w-min">
+			<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>