Fixing webcam flip (#774)

* frontend fixes

* format fix

Co-authored-by: Ali Abid <aliabid94@gmail.com>

ui/packages/app/src/components/input/DataFrame/DataFrame.svelte

@@ -358,12 +358,12 @@
 									/>
 								{/if}
 								<span
-									class=" cursor-default w-full"
+									class="cursor-default w-full"
 									class:opacity-0={editing === id}
 									tabindex="-1"
 									role="button"
 								>
-									{value}
+									{value ?? ""}
 								</span>
 							</div>
 						</td>

ui/packages/app/src/components/input/DataFrame/Example.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	export let value: Array<Array<string | number>>;
+</script>
+
+<table class="input-dataframe-example">
+	{#each value.slice(0, 3) as row}
+		<tr>
+			{#each row.slice(0, 3) as cell}
+				<td class="p-2">{cell}</td>
+			{/each}
+			{#if row.length > 3}
+				<td class="p-2">...</td>
+			{/if}
+		</tr>
+	{/each}
+	{#if value.length > 3}
+		<tr>
+			{#each Array(Math.min(4, value[0].length)) as _}
+				<td class="p-2">...</td>
+			{/each}
+		</tr>
+	{/if}
+</table>

ui/packages/app/src/components/input/DataFrame/config.ts

@@ -1,5 +1,7 @@
 import Component from "./DataFrame.svelte";
+import ExampleComponent from "./Example.svelte";
 
 export default {
-	component: Component
+	component: Component,
+	example: ExampleComponent
 };

ui/packages/app/src/components/input/Image/Image.svelte

@@ -85,6 +85,8 @@
 				{static_src}
 			/>
 
+			<img class="w-full h-full object-contain" src={value} alt="" />
+		{:else}
 			<img class="w-full h-full object-contain" src={value} alt="" />
 		{/if}
 	</div>

ui/packages/app/src/components/utils/Webcam.svelte

@@ -66,10 +66,3 @@
 		/>
 	</button>
 </div>
-
-<style lang="postcss">
-	video {
-		-webkit-transform: scaleX(-1);
-		transform: scaleX(-1);
-	}
-</style>