only scroll data table horizontally on small screens

Co-authored-by: Gemini 3 <google-gemini-noreply@google.com>

src/components/admin/table/DataTable.svelte

@@ -27,15 +27,18 @@
   let { data, count, keys, onClick, onEdit, onDelete, extraActions }: Props<any> = $props();
 </script>
 
-<div class="max-h-full overflow-x-auto">
-  <table class="table table-pin-rows w-full table-auto lg:w-fit lg:min-w-full mx-auto">
+<div class="max-h-full overflow-x-auto lg:overflow-x-visible">
+  <table class="table table-pin-rows w-full table-auto mx-auto">
     <thead>
       <SortableTr {data}>
         {#if count}
           <SortableTh style="width: 1%" class="text-left">#</SortableTh>
         {/if}
         {#each keys as key (key.key)}
-          <SortableTh class="text-left whitespace-nowrap" key={key.sortable ? key.key : undefined}>
+          <SortableTh
+            class="text-left whitespace-nowrap lg:whitespace-normal"
+            key={key.sortable ? key.key : undefined}
+          >
             {key.label}
           </SortableTh>
         {/each}
@@ -51,7 +54,7 @@
             <td class="text-left">{i + 1}</td>
           {/if}
           {#each keys as key (key.key)}
-            <td class="text-left whitespace-nowrap">
+            <td class="text-left whitespace-nowrap lg:whitespace-normal">
               {#if key.transform}
                 {@render key.transform(getObjectEntryByKey(key.key, d))}
               {:else}