style: adjust file list styles

components/file/file-list.tsx

@@ -271,7 +271,7 @@ export default function UserFileList({
     <div className="overflow-hidden rounded-lg border bg-primary-foreground">
       <div className="text-mute-foreground grid grid-cols-5 gap-4 bg-neutral-100 px-6 py-3 text-sm font-medium dark:bg-neutral-800 sm:grid-cols-10">
         {showMutiCheckBox && (
-          <div className="col-span-1 flex">
+          <div className="col-end-1">
             <Checkbox
               className="mr-3 size-4 border-neutral-300 bg-neutral-100 data-[state=checked]:border-neutral-900 data-[state=checked]:bg-neutral-600 data-[state=checked]:text-neutral-100 dark:border-neutral-700 dark:bg-neutral-800 dark:data-[state=checked]:border-neutral-300 dark:data-[state=checked]:bg-neutral-300"
               checked={selectedFiles.length === files?.list.length}
@@ -279,9 +279,7 @@ export default function UserFileList({
             />
           </div>
         )}
-        <div className={cn(showMutiCheckBox ? "col-span-2" : "col-span-3")}>
-          {t("Name")}
-        </div>
+        <div className={cn("col-span-3")}>{t("Name")}</div>
         <div className="col-span-2 hidden sm:flex">{t("Type")}</div>
         <div className="col-span-1">{t("Size")}</div>
         <div className="col-span-1 hidden sm:flex">{t("User")}</div>
@@ -306,7 +304,7 @@ export default function UserFileList({
             >
               {showMutiCheckBox && (
                 <div
-                  className="col-span-1 flex items-center gap-2"
+                  className="col-end-1 flex items-center gap-2"
                   onClick={(e) => e.stopPropagation()}
                 >
                   <Checkbox
@@ -318,12 +316,7 @@ export default function UserFileList({
                   />
                 </div>
               )}
-              <div
-                className={cn(
-                  "items-center space-x-3 text-sm",
-                  showMutiCheckBox ? "col-span-2" : "col-span-3",
-                )}
-              >
+              <div className={cn("col-span-3 items-center space-x-3 text-sm")}>
                 <TooltipProvider>
                   <Tooltip delayDuration={0}>
                     <TooltipTrigger
@@ -662,23 +655,23 @@ export default function UserFileList({
 
 function TableColumnSekleton() {
   return (
-    <TableRow className="grid grid-cols-3 items-center sm:grid-cols-12">
-      <TableCell className="col-span-1 hidden sm:flex">
-        <Skeleton className="h-5 w-10" />
-      </TableCell>
-      <TableCell className="col-span-3 sm:col-span-2">
+    <TableRow className="grid grid-cols-5 items-center sm:grid-cols-10">
+      <TableCell className="col-span-3 flex">
         <Skeleton className="h-5 w-20" />
       </TableCell>
+      <TableCell className="col-span-2 hidden sm:flex">
+        <Skeleton className="h-5 w-16" />
+      </TableCell>
       <TableCell className="col-span-1 flex">
         <Skeleton className="h-5 w-16" />
       </TableCell>
-      <TableCell className="col-span-2 hidden sm:flex">
+      <TableCell className="col-span-1 hidden sm:flex">
         <Skeleton className="h-5 w-16" />
       </TableCell>
-      <TableCell className="col-span-2 hidden sm:flex">
+      <TableCell className="col-span-1 hidden sm:flex">
         <Skeleton className="h-5 w-16" />
       </TableCell>
-      <TableCell className="col-span-2 hidden sm:flex">
+      <TableCell className="col-span-1 hidden sm:flex">
         <Skeleton className="h-5 w-16" />
       </TableCell>
       <TableCell className="col-span-1 flex">