From 966dc1c282635b899b822fabb6e0535bd76c0bbd Mon Sep 17 00:00:00 2001
From: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date: Sun, 12 Oct 2025 12:15:52 +0700
Subject: [PATCH 1/2] dev: hotfix, more standardization

---
 app/assets/css/main.css                             | 2 +-
 app/components/layout/SidebarNavGroup.vue           | 4 ++--
 app/components/layout/SidebarNavHeader.vue          | 6 +++---
 app/components/layout/SidebarNavLink.vue            | 2 +-
 app/components/pub/ui/input/Input.vue               | 2 +-
 app/components/pub/ui/sidebar/SidebarGroupLabel.vue | 2 +-
 app/components/pub/ui/sidebar/SidebarMenuBadge.vue  | 2 +-
 app/components/pub/ui/table/TableCell.vue           | 2 +-
 app/components/pub/ui/table/TableHead.vue           | 2 +-
 9 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index b5064af7..cab62d6e 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -174,7 +174,7 @@ body {
 }
 
 body, table, label {
-  @apply md:!text-xs xl:!text-sm 2xl:!text-sm;
+  @apply md:!text-xs 2xl:!text-sm; 
 }
 
 /* Container */
diff --git a/app/components/layout/SidebarNavGroup.vue b/app/components/layout/SidebarNavGroup.vue
index 60f46105..9b92e619 100644
--- a/app/components/layout/SidebarNavGroup.vue
+++ b/app/components/layout/SidebarNavGroup.vue
@@ -22,7 +22,7 @@ const openCollapsible = ref(false)
     <Collapsible :key="item.title" v-model:open="openCollapsible" as-child class="group/collapsible ">
       <SidebarMenuItem>
         <CollapsibleTrigger as-child>
-          <SidebarMenuButton :tooltip="item.title" :size="size" class="md:!text-xs xl:!text-sm 2xl:!text-base">
+          <SidebarMenuButton :tooltip="item.title" :size="size" class="md:!text-xs 2xl:!text-sm">
             <Icon :name="item.icon || ''" mode="svg" />
             <span class="mx-2">{{ item.title }}</span>
             <Icon
@@ -37,7 +37,7 @@ const openCollapsible = ref(false)
               <SidebarMenuSubButton as-child>
                 <NuxtLink
                   :to="subItem.link"
-                  class="mx-4 rounded-lg py-5 text-sm transition-all duration-200 md:!text-xs xl:!text-sm 2xl:!text-base"
+                  class="mx-4 rounded-lg py-2 2xl:py-2.5 text-sm transition-all duration-200 md:!text-xs 2xl:!text-sm 2xl:!text-base"
                   active-class="bg-primary text-white"
                   @click="setOpenMobile(false)"
                 >
diff --git a/app/components/layout/SidebarNavHeader.vue b/app/components/layout/SidebarNavHeader.vue
index 351f7d83..4dd56bdb 100644
--- a/app/components/layout/SidebarNavHeader.vue
+++ b/app/components/layout/SidebarNavHeader.vue
@@ -22,13 +22,13 @@ const activeTeam = ref(props.teams[0])
             <div
               class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg"
             >
-              <img :src="activeTeam.logo" class="h-full w-full" />
+              <img :src="activeTeam?.logo" class="h-full w-full" />
             </div>
             <div class="grid flex-1 text-left text-sm leading-tight">
               <span class="truncate font-semibold">
-                {{ activeTeam.name }}
+                {{ activeTeam?.name }}
               </span>
-              <span class="truncate text-xs">{{ activeTeam.plan }}</span>
+              <span class="truncate text-xs">{{ activeTeam?.plan }}</span>
             </div>
           </SidebarMenuButton>
         </DropdownMenuTrigger>
diff --git a/app/components/layout/SidebarNavLink.vue b/app/components/layout/SidebarNavLink.vue
index 260c48be..322a635b 100644
--- a/app/components/layout/SidebarNavLink.vue
+++ b/app/components/layout/SidebarNavLink.vue
@@ -21,7 +21,7 @@ const { setOpenMobile } = useSidebar()
       <SidebarMenuButton as-child :tooltip="item.title" :size="size" class="">
         <NuxtLink
           :to="item.link"
-          class="group flex items-center gap-3 rounded-lg px-2 py-4 text-sm transition-all duration-200 md:!text-xs xl:!text-sm 2xl:!text-base"
+          class="group flex items-center gap-3 rounded-lg px-2 py-2 2xl:py-2.5 text-sm transition-all duration-200 md:!text-xs 2xl:!text-sm"
           active-class="bg-primary text-white"
           @click="setOpenMobile(false)"
         >
diff --git a/app/components/pub/ui/input/Input.vue b/app/components/pub/ui/input/Input.vue
index c00ba9d7..0e9ec0bf 100644
--- a/app/components/pub/ui/input/Input.vue
+++ b/app/components/pub/ui/input/Input.vue
@@ -24,7 +24,7 @@ const modelValue = useVModel(props, 'modelValue', emits, {
     v-model="modelValue"
     :class="
       cn(
-        'border-input dark:bg-slate-950 ring-offset-background placeholder:text-muted-foreground flex h-8 xl:h-9 w-full rounded-md border border-gray-400 px-3 py-2 md:text-xs xl:text-sm file:border-0 file:bg-transparent md:file:text-xs xl:file:text-sm file:font-medium  disabled:cursor-not-allowed disabled:opacity-50',
+        'border-input dark:bg-slate-950 ring-offset-background placeholder:text-muted-foreground flex h-8 2xl:h-9 w-full rounded-md border border-gray-400 px-3 py-2 md:text-xs 2xl:text-sm file:border-0 file:bg-transparent md:file:text-xs xl:file:text-sm file:font-medium  disabled:cursor-not-allowed disabled:opacity-50',
         props.class,
       )
     "
diff --git a/app/components/pub/ui/sidebar/SidebarGroupLabel.vue b/app/components/pub/ui/sidebar/SidebarGroupLabel.vue
index 162e04e0..0479b7a9 100644
--- a/app/components/pub/ui/sidebar/SidebarGroupLabel.vue
+++ b/app/components/pub/ui/sidebar/SidebarGroupLabel.vue
@@ -15,7 +15,7 @@ const props = defineProps<PrimitiveProps & {
     :as="as"
     :as-child="asChild"
     :class="cn(
-      'duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+      'duration-200 flex h-8 shrink-0 items-center rounded-md px-2 md:text-xs 2xl:text-sm font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
       'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
       props.class)"
   >
diff --git a/app/components/pub/ui/sidebar/SidebarMenuBadge.vue b/app/components/pub/ui/sidebar/SidebarMenuBadge.vue
index 80862e1a..8503f0c4 100644
--- a/app/components/pub/ui/sidebar/SidebarMenuBadge.vue
+++ b/app/components/pub/ui/sidebar/SidebarMenuBadge.vue
@@ -11,7 +11,7 @@ const props = defineProps<{
   <div
     data-sidebar="menu-badge"
     :class="cn(
-      'absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none',
+      'absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 md:text-xs 2xl:text-sm  font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none',
       'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
       'peer-data-[size=sm]/menu-button:top-1',
       'peer-data-[size=default]/menu-button:top-1.5',
diff --git a/app/components/pub/ui/table/TableCell.vue b/app/components/pub/ui/table/TableCell.vue
index d292236f..288cef77 100644
--- a/app/components/pub/ui/table/TableCell.vue
+++ b/app/components/pub/ui/table/TableCell.vue
@@ -11,7 +11,7 @@ const props = defineProps<{
   <td
     :class="
       cn(
-        'p-4 align-middle [&:has([role=checkbox])]:pr-0',
+        'p-4 align-middle md:text-xs 2xl:text-sm [&:has([role=checkbox])]:pr-0',
         props.class,
       )
     "
diff --git a/app/components/pub/ui/table/TableHead.vue b/app/components/pub/ui/table/TableHead.vue
index 624955d6..cf2cfcf2 100644
--- a/app/components/pub/ui/table/TableHead.vue
+++ b/app/components/pub/ui/table/TableHead.vue
@@ -8,7 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <th :class="cn('h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0', props.class)">
+  <th :class="cn('h-12 px-4 text-left md:text-xs 2xl:text-sm align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0', props.class)">
     <slot />
   </th>
 </template>

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 2/2] 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>