From f52e51677590555a189a7d014af596079bcc2cc9 Mon Sep 17 00:00:00 2001
From: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date: Sun, 12 Oct 2025 13:06:21 +0700
Subject: [PATCH] dev: hotfix, layout

---
 app/components/pub/ui/card/CardContent.vue        |  2 +-
 app/components/pub/ui/card/CardDescription.vue    |  2 +-
 app/components/pub/ui/card/CardFooter.vue         |  2 +-
 app/components/pub/ui/sidebar/Sidebar.vue         | 10 +++++-----
 app/components/pub/ui/sidebar/SidebarProvider.vue |  2 ++
 app/components/pub/ui/sidebar/utils.ts            |  3 ++-
 app/layouts/default.vue                           |  2 +-
 7 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/app/components/pub/ui/card/CardContent.vue b/app/components/pub/ui/card/CardContent.vue
index 2c5eda28..08b098f0 100644
--- a/app/components/pub/ui/card/CardContent.vue
+++ b/app/components/pub/ui/card/CardContent.vue
@@ -8,7 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div :class="cn('p-4 xl:p-5 2xl:p-6', props.class)">
+  <div :class="cn('p-4 2xl:p-5', props.class)"> 
     <slot />
   </div>
 </template>
diff --git a/app/components/pub/ui/card/CardDescription.vue b/app/components/pub/ui/card/CardDescription.vue
index b17e1d89..b20d2ad7 100644
--- a/app/components/pub/ui/card/CardDescription.vue
+++ b/app/components/pub/ui/card/CardDescription.vue
@@ -8,7 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <p :class="cn('text-sm text-muted-foreground', props.class)">
+  <p :class="cn('text-xs 2xl:text-sm text-muted-foreground', props.class)">
     <slot />
   </p>
 </template>
diff --git a/app/components/pub/ui/card/CardFooter.vue b/app/components/pub/ui/card/CardFooter.vue
index 08a2bd84..b2f2e110 100644
--- a/app/components/pub/ui/card/CardFooter.vue
+++ b/app/components/pub/ui/card/CardFooter.vue
@@ -8,7 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div :class="cn('flex items-center p-6 pt-0', props.class)">
+  <div :class="cn('flex items-center p-4 2xl:p-5 pt-0', props.class)">
     <slot />
   </div>
 </template>
diff --git a/app/components/pub/ui/sidebar/Sidebar.vue b/app/components/pub/ui/sidebar/Sidebar.vue
index f25e3b9c..d7a9d0d0 100644
--- a/app/components/pub/ui/sidebar/Sidebar.vue
+++ b/app/components/pub/ui/sidebar/Sidebar.vue
@@ -30,7 +30,7 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
 <template>
   <div
     v-if="collapsible === 'none'"
-    :class="cn('bg-sidebar text-sidebar-foreground flex h-full w-[--sidebar-width] flex-col', props.class)"
+    :class="cn('bg-sidebar text-sidebar-foreground flex h-full w-[--sidebar-width] 2xl:w-[--xxl-sidebar-width] flex-col', props.class)"  
     v-bind="$attrs"
   >
     <slot />
@@ -64,7 +64,7 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
     <div
       :class="
         cn(
-          'relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear',
+          'relative h-svh w-[--sidebar-width] 2xl:w-[--xxl-sidebar-width] bg-transparent transition-[width] duration-200 ease-linear',
           'group-data-[collapsible=offcanvas]:w-0',
           'group-data-[side=right]:rotate-180',
           variant === 'floating' || variant === 'inset'
@@ -76,10 +76,10 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
     <div
       :class="
         cn(
-          'fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex',
+          'fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] 2xl:w-[--xxl-sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex',
           side === 'left'
-            ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
-            : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
+            ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] group-data-[collapsible=offcanvas]:2xl:left-[calc(var(--xxl-sidebar-width)*-1)]'
+            : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] group-data-[collapsible=offcanvas]:2xl:right-[calc(var(--xxl-sidebar-width)*-1)]',
           // Adjust the padding for floating and inset variants.
           variant === 'floating' || variant === 'inset'
             ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_1rem_+_2px)]'
diff --git a/app/components/pub/ui/sidebar/SidebarProvider.vue b/app/components/pub/ui/sidebar/SidebarProvider.vue
index 0ef2a5b0..d8428d8d 100644
--- a/app/components/pub/ui/sidebar/SidebarProvider.vue
+++ b/app/components/pub/ui/sidebar/SidebarProvider.vue
@@ -11,6 +11,7 @@ import {
   SIDEBAR_COOKIE_NAME,
   SIDEBAR_KEYBOARD_SHORTCUT,
   SIDEBAR_WIDTH,
+  XXL_SIDEBAR_WIDTH,
   SIDEBAR_WIDTH_ICON,
 } from './utils'
 
@@ -87,6 +88,7 @@ provideSidebarContext({
     <div
       :style="{
         '--sidebar-width': SIDEBAR_WIDTH,
+        '--xxl-sidebar-width': XXL_SIDEBAR_WIDTH,
         '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
       }"
       :class="
diff --git a/app/components/pub/ui/sidebar/utils.ts b/app/components/pub/ui/sidebar/utils.ts
index 3ded66c4..768201dd 100644
--- a/app/components/pub/ui/sidebar/utils.ts
+++ b/app/components/pub/ui/sidebar/utils.ts
@@ -3,7 +3,8 @@ import { createContext } from 'radix-vue'
 
 export const SIDEBAR_COOKIE_NAME = 'sidebar:state'
 export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
-export const SIDEBAR_WIDTH = '16rem'
+export const SIDEBAR_WIDTH = '12rem'
+export const XXL_SIDEBAR_WIDTH = '14rem'
 export const SIDEBAR_WIDTH_MOBILE = '18rem'
 export const SIDEBAR_WIDTH_ICON = '3rem'
 export const SIDEBAR_KEYBOARD_SHORTCUT = 'b'
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index f26f0ca5..dd52a9c8 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -28,7 +28,7 @@ const contentFrameClass = computed(() => {
     <LayoutAppSidebar />
     <SidebarInset>
       <LayoutHeader />
-      <div :class="`w-full p-4 xl:p-5 2xl:p-6 flex justify-center ${contentFrameClass}`">
+      <div :class="`w-full p-4 2xl:p-5 flex justify-center ${contentFrameClass}`">
         <div v-if="contentFrame !== 'cf-no-frame'">
           <Card>
             <CardContent>