From 43b29a78dd5d3d232d0c08fc69e4b6fafc8e4e7d Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Sun, 16 Jul 2023 23:02:10 +0200
Subject: [PATCH] fix table-col

---
 .../src/lib/components/DisplayResult.svelte    | 18 ++++--------------
 .../apps/editor/AppEditorHeader.svelte         | 10 +++++++---
 2 files changed, 11 insertions(+), 17 deletions(-)

diff --git a/frontend/src/lib/components/DisplayResult.svelte b/frontend/src/lib/components/DisplayResult.svelte
index 521b4c7807..2bc7d085f8 100644
--- a/frontend/src/lib/components/DisplayResult.svelte
+++ b/frontend/src/lib/components/DisplayResult.svelte
@@ -64,14 +64,8 @@
 		return obj as ArrayLike<ArrayLike<any>>
 	}
 
-	function isArrayofObjects(array: any[]): boolean {
-		if (!Array.isArray(array)) {
-			return false
-		}
-
-		return array.every((item) => {
-			return typeof item === 'object' && item !== null && !Array.isArray(item)
-		})
+	function isObjectOfArray(result: any[], keys: string[]): boolean {
+		return keys.map((k) => Array.isArray(result[k])).reduce((a, b) => a && b)
 	}
 
 	function inferResultKind(result: any) {
@@ -80,7 +74,7 @@
 				let keys = Object.keys(result)
 				if (isRectangularArray(result)) {
 					return 'table-row'
-				} else if (isArrayofObjects(result)) {
+				} else if (isObjectOfArray(result, keys)) {
 					return 'table-col'
 				} else if (keys.length == 1 && keys[0] == 'html') {
 					return 'html'
@@ -151,14 +145,10 @@
 						</div>
 						{#if Array.isArray(result[col])}
 							{#each result[col] as item}
-								<div class="px-12 text-left text-xs whitespace-nowrap">
+								<div class="px-12 text-left text-xs whitespace-nowrap overflow-auto pb-2">
 									{typeof item === 'string' ? item : JSON.stringify(item)}
 								</div>
 							{/each}
-						{:else}
-							<div class="px-12 text-left text-xs whitespace-nowrap overflow-auto pb-2">
-								{typeof result[col] === 'string' ? result[col] : JSON.stringify(result[col])}
-							</div>
 						{/if}
 					</div>
 				{/each}
diff --git a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
index 85a8d6f893..d2e5c32dbd 100644
--- a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
+++ b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
@@ -713,8 +713,8 @@
 
 		<div>
 			<ToggleButtonGroup class="h-[30px]" bind:selected={$breakpoint}>
-				<ToggleButton icon={Smartphone} value="sm" />
-				<ToggleButton icon={Laptop2} value="lg" />
+				<ToggleButton tooltip="Mobile View" icon={Smartphone} value="sm" />
+				<ToggleButton tooltip="Computer View" icon={Laptop2} value="lg" />
 			</ToggleButtonGroup>
 		</div>
 		{#if $app}
@@ -724,7 +724,11 @@
 					value={false}
 					tooltip="The max width is 1168px and the content stay centered instead of taking the full page width"
 				/>
-				<ToggleButton icon={Expand} value={true} />
+				<ToggleButton
+					tooltip="The width is of the app if the full width of its container"
+					icon={Expand}
+					value={true}
+				/>
 			</ToggleButtonGroup>
 		{/if}
 	</div>