feat: update sidebar and files page layout

src/dashboard/dashboard-sidebar.tsx

@@ -25,7 +25,7 @@ import {
 
 export function DashboardSidebar() {
 	return (
-		<Sidebar collapsible="icon">
+		<Sidebar variant="inset" collapsible="icon">
 			<SidebarHeader>
 				<SidebarMenu>
 					<SidebarMenuItem>

src/files/file-table.tsx

@@ -213,13 +213,14 @@ export function FileTableContent() {
 	}
 
 	return (
-		<div className="overflow-hidden rounded-md border">
+		<div className="overflow-hidden">
 			<Table>
 				<TableHeader>
 					{table.getHeaderGroups().map((headerGroup) => (
-						<TableRow key={headerGroup.id}>
+						<TableRow className="px-4" key={headerGroup.id}>
 							{headerGroup.headers.map((header) => (
 								<TableHead
+									className="first:pl-4 last:pr-4"
 									key={header.id}
 									style={{ width: header.getSize() }}
 								>
@@ -246,6 +247,7 @@ export function FileTableContent() {
 							>
 								{row.getVisibleCells().map((cell) => (
 									<TableCell
+										className="first:pl-4 last:pr-4"
 										key={cell.id}
 										style={{ width: cell.column.getSize() }}
 									>

src/files/files-page.tsx

@@ -33,7 +33,7 @@ export function FilesPage() {
 	return (
 		<>
 			<header className="flex py-2 shrink-0 items-center gap-2 border-b px-4 w-full">
-				<SidebarTrigger className="-ml-1" />
+				<SidebarTrigger className="-ml-1.5" />
 				<Breadcrumb>
 					<BreadcrumbList>
 						<BreadcrumbItem>
@@ -46,7 +46,7 @@ export function FilesPage() {
 					<UploadFileButton />
 				</div>
 			</header>
-			<div className="p-4 w-full">
+			<div className="w-full">
 				<FileTable />
 			</div>
 		</>