fix: improve some tailwind classes (#729)

fix: some tailwind className

Author: yoannfleurydev

src/components/ui/sidebar.tsx

@@ -316,7 +316,7 @@ function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {
       onClick={toggleSidebar}
       title="Toggle Sidebar"
       className={cn(
-        'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex',
+        'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-0.5 hover:after:bg-sidebar-border sm:flex',
         'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
         '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
         'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar',

src/features/auth/page-login-verify.tsx

@@ -88,7 +88,7 @@ export default function PageLoginVerify({
         <h1 className="text-lg font-bold text-balance">
           {t(`${I18N_KEY_PAGE_PREFIX}.title`)}
         </h1>
-        <p className="text-sm text-balance break-words text-muted-foreground">
+        <p className="text-sm text-balance wrap-break-word text-muted-foreground">
           <Trans
             t={t}
             i18nKey={`${I18N_KEY_PAGE_PREFIX}.description`}

src/layout/app/main-nav-desktop.tsx

@@ -48,8 +48,8 @@ const Item = ({
       {...linkProps}
       className="flex items-center justify-center gap-2 rounded-md px-2.5 py-2 text-neutral-500 transition hover:bg-black/5 dark:text-neutral-400 dark:hover:bg-white/5 [&.active]:text-primary"
     >
-      <Icon className="size-4 opacity-60 [.active_&]:hidden" />
-      <IconActive className="hidden size-4 [.active_&]:block" />
+      <Icon className="size-4 opacity-60 in-[.active]:hidden" />
+      <IconActive className="hidden size-4 in-[.active]:block" />
       <span className="text-sm font-medium">{children}</span>
     </Link>
   );

src/layout/app/main-nav-mobile.tsx

@@ -40,8 +40,8 @@ const Item = ({
       {...linkProps}
       className="flex flex-1 flex-col items-center justify-center text-neutral-500 dark:text-neutral-400 [&.active]:text-primary"
     >
-      <Icon className="size-6 opacity-60 [.active_&]:hidden" />
-      <IconActive className="hidden size-6 [.active_&]:block" />
+      <Icon className="size-6 opacity-60 in-[.active]:hidden" />
+      <IconActive className="hidden size-6 in-[.active]:block" />
       <span className="text-2xs font-medium">{children}</span>
     </Link>
   );