fix table-col

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}

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>