feat: tweak file table col sizes

src/files/file-table.tsx

@@ -72,6 +72,7 @@ const columns: ColumnDef<DirectoryItem>[] = [
 		),
 		enableSorting: false,
 		enableHiding: false,
+		size: 24,
 	},
 	{
 		header: "Name",
@@ -82,13 +83,14 @@ const columns: ColumnDef<DirectoryItem>[] = [
 					return <FileNameCell initialName={row.original.doc.name} />
 				case "directory":
 					return (
-						<div className="flex items-center gap-2">
+						<div className="flex w-full items-center gap-2">
 							<DirectoryIcon className="size-4" />
 							{row.original.doc.name}
 						</div>
 					)
 			}
 		},
+		size: 1000,
 	},
 	{
 		header: "Size",
@@ -217,7 +219,10 @@ export function FileTableContent() {
 					{table.getHeaderGroups().map((headerGroup) => (
 						<TableRow key={headerGroup.id}>
 							{headerGroup.headers.map((header) => (
-								<TableHead key={header.id}>
+								<TableHead
+									key={header.id}
+									style={{ width: header.getSize() }}
+								>
 									{header.isPlaceholder
 										? null
 										: flexRender(
@@ -240,7 +245,10 @@ export function FileTableContent() {
 								}}
 							>
 								{row.getVisibleCells().map((cell) => (
-									<TableCell key={cell.id}>
+									<TableCell
+										key={cell.id}
+										style={{ width: cell.column.getSize() }}
+									>
 										{flexRender(
 											cell.column.columnDef.cell,
 											cell.getContext(),
@@ -250,14 +258,7 @@ export function FileTableContent() {
 							</TableRow>
 						))
 					) : (
-						<TableRow>
+						<NoResultsRow />
-							<TableCell
-								colSpan={columns.length}
-								className="text-center"
-							>
-								No results.
-							</TableCell>
-						</TableRow>
 					)}
 					<NewItemRow />
 				</TableBody>
@@ -266,6 +267,20 @@ export function FileTableContent() {
 	)
 }
 
+function NoResultsRow() {
+	const newItemKind = useAtomValue(newItemKindAtom)
+	if (newItemKind) {
+		return null
+	}
+	return (
+		<TableRow>
+			<TableCell colSpan={columns.length} className="text-center">
+				No results.
+			</TableCell>
+		</TableRow>
+	)
+}
+
 function NewItemRow() {
 	const inputRef = useRef<HTMLInputElement>(null)
 	const newItemFormId = useId()
@@ -363,7 +378,7 @@ function NewItemRow() {
 
 function FileNameCell({ initialName }: { initialName: string }) {
 	return (
-		<div className="flex items-center gap-2">
+		<div className="flex w-full items-center gap-2">
 			<TextFileIcon className="size-4" />
 			{initialName}
 		</div>