feat: update responsive

Author: dianprata

components/settings/Layout.vue

@@ -13,10 +13,10 @@
       </p>
     </div>
     <Separator class="my-6" />
-    <div class="flex flex-col lg:flex-row space-y-8 lg:space-x-12 lg:space-y-0">
-      <ScrollArea class="lg:w-1/6">
+    <div class="flex flex-col lg:flex-row space-y-6 lg:space-x-12 lg:space-y-0">
+      <div class="w-full overflow-x-auto pb-2 lg:w-1/6 lg:pb-0">
         <SettingsSidebarNav />
-      </ScrollArea>
+      </div>
       <div class="flex-1 lg:max-w-2xl">
         <div class="space-y-6">
           <slot />

components/ui/sidebar/SidebarInset.vue

@@ -10,7 +10,7 @@ const props = defineProps<{
 <template>
   <main
     :class="cn(
-      'relative flex min-h-svh flex-1 flex-col bg-background',
+      'overflow-x-auto relative flex min-h-svh flex-1 flex-col bg-background',
       'peer-data-[variant=inset]:min-h-[calc(100svh-1rem)] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset][&>header]:rounded-t-xl md:peer-data-[variant=inset]:shadow',
       props.class,
     )"

components/ui/table/Table.vue

@@ -8,8 +8,8 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div class="relative w-full overflow-auto">
-    <table :class="cn('w-full caption-bottom text-sm', props.class)">
+  <div class="relative w-full overflow-x-auto">
+    <table :class="cn('min-w-full table-fixed caption-bottom text-sm', props.class)">
       <slot />
     </table>
   </div>

layouts/default.vue

@@ -6,7 +6,7 @@
     <LayoutAppSidebar />
     <SidebarInset>
       <LayoutHeader />
-      <div class="flex-1 p-4 lg:p-6">
+      <div class="min-w-0 w-full flex-1 overflow-x-auto p-4 lg:p-6">
         <slot />
       </div>
     </SidebarInset>

pages/tasks.vue

@@ -5,7 +5,7 @@ import tasks from '@/components/tasks/data/tasks.json'
 </script>
 
 <template>
-  <div class="w-full flex flex-col gap-4">
+  <div class="w-full flex flex-col items-stretch gap-4">
     <div class="flex flex-wrap items-end justify-between gap-2">
       <div>
         <h2 class="text-2xl font-bold tracking-tight">