table density

src/components/NavMenu.vue

@@ -186,12 +186,37 @@
                                 </DropdownMenuSubContent>
                             </DropdownMenuSub>
 
-                            <DropdownMenuCheckboxItem
-                                :model-value="compactTableMode"
-                                indicator-position="right"
-                                @update:modelValue="handleCompactModeToggle">
-                                <span>{{ t('view.settings.appearance.appearance.compact_table_mode') }}</span>
-                            </DropdownMenuCheckboxItem>
+                            <DropdownMenuSub>
+                                <DropdownMenuSubTrigger>
+                                    <span>{{ t('view.settings.appearance.appearance.table_density') }}</span>
+                                </DropdownMenuSubTrigger>
+                                <DropdownMenuSubContent side="right" align="start" class="w-54">
+                                    <DropdownMenuCheckboxItem
+                                        :model-value="tableDensity === 'standard'"
+                                        indicator-position="right"
+                                        @select="handleTableDensitySelect('standard')">
+                                        <span>{{
+                                            t('view.settings.appearance.appearance.table_density_standard')
+                                        }}</span>
+                                    </DropdownMenuCheckboxItem>
+                                    <DropdownMenuCheckboxItem
+                                        :model-value="tableDensity === 'comfortable'"
+                                        indicator-position="right"
+                                        @select="handleTableDensitySelect('comfortable')">
+                                        <span>{{
+                                            t('view.settings.appearance.appearance.table_density_comfortable')
+                                        }}</span>
+                                    </DropdownMenuCheckboxItem>
+                                    <DropdownMenuCheckboxItem
+                                        :model-value="tableDensity === 'compact'"
+                                        indicator-position="right"
+                                        @select="handleTableDensitySelect('compact')">
+                                        <span>{{
+                                            t('view.settings.appearance.appearance.table_density_compact')
+                                        }}</span>
+                                    </DropdownMenuCheckboxItem>
+                                </DropdownMenuSubContent>
+                            </DropdownMenuSub>
                             <DropdownMenuItem @click="handleOpenCustomNavDialog">
                                 <span>{{ t('nav_menu.custom_nav.header') }}</span>
                             </DropdownMenuItem>
@@ -329,12 +354,7 @@
     const { directAccessPaste } = useSearchStore();
     const { logout } = useAuthStore();
     const appearanceSettingsStore = useAppearanceSettingsStore();
-    const {
-        themeMode,
-        compactTableMode,
-        isDarkMode,
-        isNavCollapsed: isCollapsed
-    } = storeToRefs(appearanceSettingsStore);
+    const { themeMode, tableDensity, isDarkMode, isNavCollapsed: isCollapsed } = storeToRefs(appearanceSettingsStore);
     const navLayout = ref([]);
     const navLayoutReady = ref(false);
 
@@ -517,8 +537,8 @@
         appearanceSettingsStore.setThemeMode(isDarkMode.value ? 'light' : 'dark');
     };
 
-    const handleCompactModeToggle = () => {
-        appearanceSettingsStore.setCompactTableMode();
+    const handleTableDensitySelect = (density) => {
+        appearanceSettingsStore.setTableDensity(density);
     };
 
     const handleThemeColorSelect = async (theme) => {

src/components/ui/data-table/DataTableLayout.vue

@@ -5,7 +5,7 @@
         </div>
 
         <div class="rounded-md border">
-            <div class="overflow-auto" :style="tableStyle">
+            <ScrollArea class="max-w-full" :style="tableStyle">
                 <Table :class="tableClassValue" :style="tableElementStyle">
                     <colgroup>
                         <col v-for="col in table.getVisibleLeafColumns()" :key="col.id" :style="getColStyle(col)" />
@@ -65,7 +65,7 @@
                         </TableRow>
                     </TableBody>
                 </Table>
-            </div>
+            </ScrollArea>
         </div>
 
         <div v-if="showPagination" class="mt-4 flex w-full items-center gap-3">
@@ -124,6 +124,7 @@
         PaginationPrevious
     } from '../pagination';
     import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../table';
+    import { ScrollArea } from '../scroll-area';
     import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../select';
 
     const props = defineProps({
@@ -271,7 +272,6 @@
         const meta = columnDef?.meta ?? {};
         const pinned = getPinnedState(cell?.column);
         return joinClasses(
-            'py-1.5',
             pinned && 'sticky bg-background z-20',
             isSpacer(cell.column) && 'p-0',
             resolveClassValue(meta.class, cell?.getContext?.()),

src/components/ui/table/TableCell.vue

@@ -11,7 +11,7 @@
         data-slot="table-cell"
         :class="
             cn(
-                'p-2 align-middle whitespace-nowrap in-[.is-compact-table]:py-1! [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-0.5',
+                'p-2 align-middle whitespace-nowrap in-[.is-compact-table]:py-1! in-[.is-comfortable-table]:py-1.5! [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-0.5',
                 props.class
             )
         ">