Table tweaks (#1195)

* ensure table scrolls

* tweaks

* fix overflow on columns

* layout tweaks

ui/packages/app/src/components/Column/Column.svelte

@@ -6,6 +6,7 @@
 	export let parent: string | null = null;
 
 	if (default_value) value = default_value;
+	console.log(parent);
 </script>
 
 <div
@@ -14,7 +15,7 @@
 	class:bg-gray-50={variant === "panel"}
 	class:p-2={variant === "panel"}
 	class:rounded-lg={variant === "panel"}
-	class="flex flex-col gr-gap gr-form-gap relative col"
+	class="flex flex-col gr-gap gr-form-gap relative col overflow-auto"
 	class:flex-1={parent === "row" || !parent}
 >
 	<slot />

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

@@ -14,6 +14,7 @@
 	export let mode: "static" | "dynamic";
 	export let col_count: [number, "fixed" | "dynamic"];
 	export let row_count: [number, "fixed" | "dynamic"];
+	export let parent: string | null = null;
 
 	if (default_value) value = default_value;
 
@@ -38,7 +39,10 @@
 	}
 </script>
 
-<div class="relative">
+<div
+	class="relative overflow-hidden"
+	class:flex-1={parent === "row" || !parent}
+>
 	<StatusTracker {...loading_status} />
 	<Table
 		{row_count}

ui/packages/app/src/components/Row/Row.svelte

@@ -10,7 +10,7 @@
 <div
 	{style}
 	class:hidden={!value}
-	class="flex flex-col md:flex-row gr-gap gr-form-gap row w-full"
+	class="flex flex-col md:flex-row gr-gap gr-form-gap row w-full flex-none"
 	class:flex-1={parent === "row"}
 >
 	<slot />

ui/packages/button/src/Button.svelte

@@ -4,6 +4,10 @@
 	export let size: "sm" | "lg" = "lg";
 </script>
 
-<button on:click {style} class="gr-button gr-button-{size} gr-button-{variant}">
+<button
+	on:click
+	{style}
+	class="gr-button gr-button-{size} gr-button-{variant} self-start flex-1"
+>
 	<slot />
 </button>

ui/packages/table/src/EditableCell.svelte

@@ -7,7 +7,7 @@
 
 {#if edit}
 	<input
-		class="absolute flex-1 outline-none inset-2 bg-transparent border-0 translate-x-px flex-1"
+		class="absolute outline-none inset-2 bg-transparent border-0 translate-x-px flex-1"
 		class:translate-x-px={!header}
 		class:font-bold={header}
 		tabindex="-1"

ui/packages/table/src/Table.svelte

@@ -360,7 +360,7 @@
 			data[i].push({ id: _id, value: "" });
 		}
 
-		const _id = `h-${headers.length}`;
+		const _id = `h-${_headers.length}`;
 		els[_id] = { cell: null, input: null };
 		_headers.push({ id: _id, value: `Header ${_headers.length + 1}` });
 
@@ -430,12 +430,12 @@
 	function blob_to_string(blob: Blob) {
 		const reader = new FileReader();
 
-		function handle_read(e) {
-			const [delimiter] = guess_delimitaor(e.srcElement.result, [",", "\t"]);
+		function handle_read(e: ProgressEvent<FileReader>) {
+			if (!e?.target?.result || typeof e.target.result !== "string") return;
 
-			const [head, ...rest] = dsvFormat(delimiter).parseRows(
-				e.srcElement.result
-			);
+			const [delimiter] = guess_delimitaor(e.target.result, [",", "\t"]);
+
+			const [head, ...rest] = dsvFormat(delimiter).parseRows(e.target.result);
 
 			_headers = make_headers(
 				col_count[1] === "fixed" ? head.slice(0, col_count[0]) : head
@@ -456,10 +456,11 @@
 <svelte:window on:click={handle_click_outside} />
 
 <div
-	class="overflow-hidden rounded-lg relative border transition-colors"
+	class="scroll-hide whitespace-nowrap overflow-hidden rounded-lg relative border transition-colors overflow-x-scroll"
 	class:border-green-400={dragging}
 >
 	<Upload
+		flex={false}
 		center={false}
 		boundedheight={false}
 		click={false}
@@ -467,7 +468,7 @@
 		bind:dragging
 	>
 		<table
-			class="table-auto font-mono w-full text-gray-900 text-sm transition-opacity"
+			class="table-auto font-mono w-full text-gray-900 text-sm transition-opacity overflow-hidden "
 			class:opacity-40={dragging}
 		>
 			<thead class="sticky top-0 left-0 right-0 bg-white shadow-sm z-10">
@@ -519,7 +520,7 @@
 				</tr>
 			</thead>
 
-			<tbody class="overflow-scroll">
+			<tbody class="overflow-y-scroll">
 				{#each data as row, i (row)}
 					<tr
 						class="group border-b last:border-none divide-x dark:divide-gray-800 space-x-4 odd:bg-gray-50 dark:odd:bg-gray-900 group focus:bg-gradient-to-b focus:from-blue-100 dark:focus:from-blue-900 focus:to-blue-50 dark:focus:to-gray-900 focus:odd:bg-white"

ui/packages/tabs/src/TabItem.svelte

@@ -19,7 +19,7 @@
 </script>
 
 {#if $selected_tab === id}
-	<div class="p-2 border-2 border-t-0 border-gray-200 relative">
+	<div class="tabitem p-2 border-2 border-t-0 border-gray-200 relative flex">
 		<slot />
 	</div>
 {/if}

ui/packages/tabs/src/Tabs.svelte

@@ -40,7 +40,7 @@
 	}
 </script>
 
-<div class="flex flex-col my-4">
+<div class="tabs flex flex-col my-4">
 	<div class="flex border-b-2">
 		{#each tabs as t, i}
 			{#if t.id === $selected_tab}

ui/packages/upload/src/Upload.svelte

@@ -11,6 +11,7 @@
 	export let boundedheight: boolean = true;
 	export let click: boolean = true;
 	export let center: boolean = true;
+	export let flex: boolean = true;
 
 	let hidden_upload: HTMLInputElement;
 	let file_count: "multiple" | "directory" | "single";
@@ -68,10 +69,11 @@
 </script>
 
 <div
-	class="w-full cursor-pointer h-full flex items-center justify-center text-gray-400 md:text-xl {boundedheight
+	class="w-full cursor-pointer h-full  items-center justify-center text-gray-400 md:text-xl {boundedheight
 		? 'min-h-[10rem] md:min-h-[15rem] max-h-[15rem] xl:max-h-[18rem] 2xl:max-h-[20rem]'
 		: ''}"
 	class:text-center={center}
+	class:flex
 	{theme}
 	on:drag|preventDefault|stopPropagation
 	on:dragstart|preventDefault|stopPropagation