fix: update spacing and layout styles

satnaing · satnaing · commit b1a8ef34634e · 2025-08-16T19:42:56.000+07:00
diff --git a/src/components/command-menu.tsx b/src/components/command-menu.tsx
@@ -46,7 +46,7 @@ export function CommandMenu() {
                         runCommand(() => navigate({ to: navItem.url }))
                       }}
                     >
-                      <div className='me-2 flex h-4 w-4 items-center justify-center'>
+                      <div className='flex size-4 items-center justify-center'>
                         <ArrowRight className='text-muted-foreground/80 size-2' />
                       </div>
                       {navItem.title}
@@ -61,7 +61,7 @@ export function CommandMenu() {
                       runCommand(() => navigate({ to: subItem.url }))
                     }}
                   >
-                    <div className='me-2 flex h-4 w-4 items-center justify-center'>
+                    <div className='flex size-4 items-center justify-center'>
                       <ArrowRight className='text-muted-foreground/80 size-2' />
                     </div>
                     {navItem.title} <ChevronRight /> {subItem.title}
diff --git a/src/components/config-drawer.tsx b/src/components/config-drawer.tsx
@@ -48,6 +48,7 @@ export function ConfigDrawer() {
           variant='ghost'
           aria-label='Open theme settings'
           aria-describedby='config-drawer-description'
+          className='rounded-full'
         >
           <Settings aria-hidden='true' />
         </Button>
diff --git a/src/components/layout/header.tsx b/src/components/layout/header.tsx
@@ -41,7 +41,7 @@ export function Header({ className, fixed, children, ...props }: HeaderProps) {
             'after:bg-background/20 after:absolute after:inset-0 after:-z-10 after:backdrop-blur-lg'
         )}
       >
-        <SidebarTrigger variant='outline' className='scale-125 sm:scale-100' />
+        <SidebarTrigger variant='outline' className='max-md:scale-125' />
         <Separator orientation='vertical' className='h-6' />
         {children}
       </div>
diff --git a/src/components/profile-dropdown.tsx b/src/components/profile-dropdown.tsx
@@ -25,7 +25,7 @@ export function ProfileDropdown() {
       </DropdownMenuTrigger>
       <DropdownMenuContent className='w-56' align='end' forceMount>
         <DropdownMenuLabel className='font-normal'>
-          <div className='flex flex-col space-y-1'>
+          <div className='flex flex-col gap-1.5'>
             <p className='text-sm leading-none font-medium'>satnaing</p>
             <p className='text-muted-foreground text-xs leading-none'>
               satnaingdev@gmail.com
diff --git a/src/components/search.tsx b/src/components/search.tsx
@@ -18,7 +18,7 @@ export function Search({
     <Button
       variant='outline'
       className={cn(
-        'bg-muted/25 group text-muted-foreground hover:bg-accent relative h-8 w-full flex-1 justify-start rounded-md text-sm font-normal shadow-none sm:pe-12 md:w-40 md:flex-none lg:w-56 xl:w-64',
+        'bg-muted/25 group text-muted-foreground hover:bg-accent relative h-8 w-full flex-1 justify-start rounded-md text-sm font-normal shadow-none sm:w-40 sm:pe-12 md:flex-none lg:w-56 xl:w-64',
         className
       )}
       onClick={() => setOpen(true)}
@@ -28,7 +28,7 @@ export function Search({
         className='absolute start-1.5 top-1/2 -translate-y-1/2'
         size={16}
       />
-      <span className='ms-3'>{placeholder}</span>
+      <span className='ms-4'>{placeholder}</span>
       <kbd className='bg-muted group-hover:bg-accent pointer-events-none absolute end-[0.3rem] top-[0.3rem] hidden h-5 items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100 select-none sm:flex'>
         <span className='text-xs'>⌘</span>K
       </kbd>
diff --git a/src/features/auth/forgot-password/components/forgot-password-form.tsx b/src/features/auth/forgot-password/components/forgot-password-form.tsx
@@ -52,7 +52,7 @@ export function ForgotPasswordForm({
           control={form.control}
           name='email'
           render={({ field }) => (
-            <FormItem className='space-y-1'>
+            <FormItem>
               <FormLabel>Email</FormLabel>
               <FormControl>
                 <Input placeholder='name@example.com' {...field} />
diff --git a/src/features/settings/account/account-form.tsx b/src/features/settings/account/account-form.tsx
@@ -145,7 +145,7 @@ export function AccountForm() {
                           >
                             <CheckIcon
                               className={cn(
-                                'me-2 h-4 w-4',
+                                'size-4',
                                 language.value === field.value
                                   ? 'opacity-100'
                                   : 'opacity-0'
diff --git a/src/features/settings/appearance/appearance-form.tsx b/src/features/settings/appearance/appearance-form.tsx
@@ -87,7 +87,7 @@ export function AppearanceForm() {
           control={form.control}
           name='theme'
           render={({ field }) => (
-            <FormItem className='space-y-1'>
+            <FormItem>
               <FormLabel>Theme</FormLabel>
               <FormDescription>
                 Select the theme for the dashboard.
diff --git a/src/features/settings/display/display-form.tsx b/src/features/settings/display/display-form.tsx
@@ -86,7 +86,7 @@ export function DisplayForm() {
                     return (
                       <FormItem
                         key={item.id}
-                        className='flex flex-row items-start space-y-0 space-x-3'
+                        className='flex flex-row items-start'
                       >
                         <FormControl>
                           <Checkbox
diff --git a/src/features/settings/notifications/notifications-form.tsx b/src/features/settings/notifications/notifications-form.tsx
@@ -63,25 +63,25 @@ export function NotificationsForm() {
                 <RadioGroup
                   onValueChange={field.onChange}
                   defaultValue={field.value}
-                  className='flex flex-col space-y-1'
+                  className='flex flex-col gap-2'
                 >
-                  <FormItem className='flex items-center space-y-0 space-x-3'>
+                  <FormItem className='flex items-center'>
                     <FormControl>
                       <RadioGroupItem value='all' />
                     </FormControl>
                     <FormLabel className='font-normal'>
                       All new messages
                     </FormLabel>
                   </FormItem>
-                  <FormItem className='flex items-center space-y-0 space-x-3'>
+                  <FormItem className='flex items-center'>
                     <FormControl>
                       <RadioGroupItem value='mentions' />
                     </FormControl>
                     <FormLabel className='font-normal'>
                       Direct messages and mentions
                     </FormLabel>
                   </FormItem>
-                  <FormItem className='flex items-center space-y-0 space-x-3'>
+                  <FormItem className='flex items-center'>
                     <FormControl>
                       <RadioGroupItem value='none' />
                     </FormControl>
@@ -188,7 +188,7 @@ export function NotificationsForm() {
           control={form.control}
           name='mobile'
           render={({ field }) => (
-            <FormItem className='relative flex flex-row items-start space-y-0 space-x-3'>
+            <FormItem className='relative flex flex-row items-start'>
               <FormControl>
                 <Checkbox
                   checked={field.value}
diff --git a/src/features/tasks/components/data-table-bulk-actions.tsx b/src/features/tasks/components/data-table-bulk-actions.tsx
@@ -100,7 +100,7 @@ export function DataTableBulkActions<TData>({
                 onClick={() => handleBulkStatusChange(status.value)}
               >
                 {status.icon && (
-                  <status.icon className='text-muted-foreground me-2 h-4 w-4' />
+                  <status.icon className='text-muted-foreground size-4' />
                 )}
                 {status.label}
               </DropdownMenuItem>
@@ -136,7 +136,7 @@ export function DataTableBulkActions<TData>({
                 onClick={() => handleBulkPriorityChange(priority.value)}
               >
                 {priority.icon && (
-                  <priority.icon className='text-muted-foreground me-2 h-4 w-4' />
+                  <priority.icon className='text-muted-foreground size-4' />
                 )}
                 {priority.label}
               </DropdownMenuItem>
diff --git a/src/features/tasks/components/data-table-column-header.tsx b/src/features/tasks/components/data-table-column-header.tsx
@@ -51,18 +51,18 @@ export function DataTableColumnHeader<TData, TValue>({
         </DropdownMenuTrigger>
         <DropdownMenuContent align='start'>
           <DropdownMenuItem onClick={() => column.toggleSorting(false)}>
-            <ArrowUpIcon className='text-muted-foreground/70 me-2 h-3.5 w-3.5' />
+            <ArrowUpIcon className='text-muted-foreground/70 size-3.5' />
             Asc
           </DropdownMenuItem>
           <DropdownMenuItem onClick={() => column.toggleSorting(true)}>
-            <ArrowDownIcon className='text-muted-foreground/70 me-2 h-3.5 w-3.5' />
+            <ArrowDownIcon className='text-muted-foreground/70 size-3.5' />
             Desc
           </DropdownMenuItem>
           {column.getCanHide() && (
             <>
               <DropdownMenuSeparator />
               <DropdownMenuItem onClick={() => column.toggleVisibility(false)}>
-                <EyeNoneIcon className='text-muted-foreground/70 me-2 h-3.5 w-3.5' />
+                <EyeNoneIcon className='text-muted-foreground/70 size-3.5' />
                 Hide
               </DropdownMenuItem>
             </>
diff --git a/src/features/tasks/components/data-table-faceted-filter.tsx b/src/features/tasks/components/data-table-faceted-filter.tsx
@@ -42,7 +42,7 @@ export function DataTableFacetedFilter<TData, TValue>({
     <Popover>
       <PopoverTrigger asChild>
         <Button variant='outline' size='sm' className='h-8 border-dashed'>
-          <PlusCircledIcon className='me-2 h-4 w-4' />
+          <PlusCircledIcon className='size-4' />
           {title}
           {selectedValues?.size > 0 && (
             <>
@@ -104,7 +104,7 @@ export function DataTableFacetedFilter<TData, TValue>({
                   >
                     <div
                       className={cn(
-                        'border-primary me-2 flex h-4 w-4 items-center justify-center rounded-sm border',
+                        'border-primary flex size-4 items-center justify-center rounded-sm border',
                         isSelected
                           ? 'bg-primary text-primary-foreground'
                           : 'opacity-50 [&_svg]:invisible'
@@ -113,7 +113,7 @@ export function DataTableFacetedFilter<TData, TValue>({
                       <CheckIcon className={cn('text-background h-4 w-4')} />
                     </div>
                     {option.icon && (
-                      <option.icon className='text-muted-foreground me-2 h-4 w-4' />
+                      <option.icon className='text-muted-foreground size-4' />
                     )}
                     <span>{option.label}</span>
                     {facets?.get(option.value) && (
diff --git a/src/features/tasks/components/data-table-view-options.tsx b/src/features/tasks/components/data-table-view-options.tsx
@@ -25,7 +25,7 @@ export function DataTableViewOptions<TData>({
           size='sm'
           className='ms-auto hidden h-8 lg:flex'
         >
-          <MixerHorizontalIcon className='me-2 h-4 w-4' />
+          <MixerHorizontalIcon className='size-4' />
           View
         </Button>
       </DropdownMenuTrigger>
diff --git a/src/features/tasks/components/tasks-columns.tsx b/src/features/tasks/components/tasks-columns.tsx
@@ -73,9 +73,9 @@ export const tasksColumns: ColumnDef<Task>[] = [
       }
 
       return (
-        <div className='flex w-[100px] items-center'>
+        <div className='flex w-[100px] items-center gap-2'>
           {status.icon && (
-            <status.icon className='text-muted-foreground me-2 h-4 w-4' />
+            <status.icon className='text-muted-foreground size-4' />
           )}
           <span>{status.label}</span>
         </div>
@@ -100,9 +100,9 @@ export const tasksColumns: ColumnDef<Task>[] = [
       }
 
       return (
-        <div className='flex items-center'>
+        <div className='flex items-center gap-2'>
           {priority.icon && (
-            <priority.icon className='text-muted-foreground me-2 h-4 w-4' />
+            <priority.icon className='text-muted-foreground size-4' />
           )}
           <span>{priority.label}</span>
         </div>
diff --git a/src/features/tasks/components/tasks-import-dialog.tsx b/src/features/tasks/components/tasks-import-dialog.tsx
@@ -85,7 +85,7 @@ export function TasksImportDialog({
               control={form.control}
               name='file'
               render={() => (
-                <FormItem className='mb-2 space-y-1'>
+                <FormItem className='my-2'>
                   <FormLabel>File</FormLabel>
                   <FormControl>
                     <Input type='file' {...fileRef} className='h-8 py-0' />
diff --git a/src/features/tasks/components/tasks-mutate-drawer.tsx b/src/features/tasks/components/tasks-mutate-drawer.tsx
@@ -85,13 +85,13 @@ export function TasksMutateDrawer({
           <form
             id='tasks-form'
             onSubmit={form.handleSubmit(onSubmit)}
-            className='flex-1 space-y-5 px-4'
+            className='flex-1 space-y-6 overflow-y-auto px-4'
           >
             <FormField
               control={form.control}
               name='title'
               render={({ field }) => (
-                <FormItem className='space-y-1'>
+                <FormItem>
                   <FormLabel>Title</FormLabel>
                   <FormControl>
                     <Input {...field} placeholder='Enter a title' />
@@ -104,7 +104,7 @@ export function TasksMutateDrawer({
               control={form.control}
               name='status'
               render={({ field }) => (
-                <FormItem className='space-y-1'>
+                <FormItem>
                   <FormLabel>Status</FormLabel>
                   <SelectDropdown
                     defaultValue={field.value}
@@ -126,29 +126,29 @@ export function TasksMutateDrawer({
               control={form.control}
               name='label'
               render={({ field }) => (
-                <FormItem className='relative space-y-3'>
+                <FormItem className='relative'>
                   <FormLabel>Label</FormLabel>
                   <FormControl>
                     <RadioGroup
                       onValueChange={field.onChange}
                       defaultValue={field.value}
                       className='flex flex-col space-y-1'
                     >
-                      <FormItem className='flex items-center space-y-0 space-x-3'>
+                      <FormItem className='flex items-center'>
                         <FormControl>
                           <RadioGroupItem value='documentation' />
                         </FormControl>
                         <FormLabel className='font-normal'>
                           Documentation
                         </FormLabel>
                       </FormItem>
-                      <FormItem className='flex items-center space-y-0 space-x-3'>
+                      <FormItem className='flex items-center'>
                         <FormControl>
                           <RadioGroupItem value='feature' />
                         </FormControl>
                         <FormLabel className='font-normal'>Feature</FormLabel>
                       </FormItem>
-                      <FormItem className='flex items-center space-y-0 space-x-3'>
+                      <FormItem className='flex items-center'>
                         <FormControl>
                           <RadioGroupItem value='bug' />
                         </FormControl>
@@ -164,27 +164,27 @@ export function TasksMutateDrawer({
               control={form.control}
               name='priority'
               render={({ field }) => (
-                <FormItem className='relative space-y-3'>
+                <FormItem className='relative'>
                   <FormLabel>Priority</FormLabel>
                   <FormControl>
                     <RadioGroup
                       onValueChange={field.onChange}
                       defaultValue={field.value}
                       className='flex flex-col space-y-1'
                     >
-                      <FormItem className='flex items-center space-y-0 space-x-3'>
+                      <FormItem className='flex items-center'>
                         <FormControl>
                           <RadioGroupItem value='high' />
                         </FormControl>
                         <FormLabel className='font-normal'>High</FormLabel>
                       </FormItem>
-                      <FormItem className='flex items-center space-y-0 space-x-3'>
+                      <FormItem className='flex items-center'>
                         <FormControl>
                           <RadioGroupItem value='medium' />
                         </FormControl>
                         <FormLabel className='font-normal'>Medium</FormLabel>
                       </FormItem>
-                      <FormItem className='flex items-center space-y-0 space-x-3'>
+                      <FormItem className='flex items-center'>
                         <FormControl>
                           <RadioGroupItem value='low' />
                         </FormControl>
diff --git a/src/features/users/components/data-table-column-header.tsx b/src/features/users/components/data-table-column-header.tsx
@@ -51,18 +51,18 @@ export function DataTableColumnHeader<TData, TValue>({
         </DropdownMenuTrigger>
         <DropdownMenuContent align='start'>
           <DropdownMenuItem onClick={() => column.toggleSorting(false)}>
-            <ArrowUpIcon className='text-muted-foreground/70 me-2 h-3.5 w-3.5' />
+            <ArrowUpIcon className='text-muted-foreground/70 size-3.5' />
             Asc
           </DropdownMenuItem>
           <DropdownMenuItem onClick={() => column.toggleSorting(true)}>
-            <ArrowDownIcon className='text-muted-foreground/70 me-2 h-3.5 w-3.5' />
+            <ArrowDownIcon className='text-muted-foreground/70 size-3.5' />
             Desc
           </DropdownMenuItem>
           {column.getCanHide() && (
             <>
               <DropdownMenuSeparator />
               <DropdownMenuItem onClick={() => column.toggleVisibility(false)}>
-                <EyeNoneIcon className='text-muted-foreground/70 me-2 h-3.5 w-3.5' />
+                <EyeNoneIcon className='text-muted-foreground/70 size-3.5' />
                 Hide
               </DropdownMenuItem>
             </>
diff --git a/src/features/users/components/data-table-view-options.tsx b/src/features/users/components/data-table-view-options.tsx
@@ -25,7 +25,7 @@ export function DataTableViewOptions<TData>({
           size='sm'
           className='ms-auto hidden h-8 lg:flex'
         >
-          <MixerHorizontalIcon className='me-2 h-4 w-4' />
+          <MixerHorizontalIcon className='size-4' />
           View
         </Button>
       </DropdownMenuTrigger>
diff --git a/src/features/users/components/users-invite-dialog.tsx b/src/features/users/components/users-invite-dialog.tsx
@@ -102,7 +102,7 @@ export function UsersInviteDialog({
               control={form.control}
               name='role'
               render={({ field }) => (
-                <FormItem className='space-y-1'>
+                <FormItem>
                   <FormLabel>Role</FormLabel>
                   <SelectDropdown
                     defaultValue={field.value}

Original file line number	Diff line number	Diff line change
`@@ -48,6 +48,7 @@ export function ConfigDrawer() {`
`48`	`48`	`variant='ghost'`
`49`	`49`	`aria-label='Open theme settings'`
`50`	`50`	`aria-describedby='config-drawer-description'`
	`51`	`+ className='rounded-full'`
`51`	`52`	`>`
`52`	`53`	`<Settings aria-hidden='true' />`
`53`	`54`	`</Button>`
Original file line number	Diff line number	Diff line change
`@@ -41,7 +41,7 @@ export function Header({ className, fixed, children, ...props }: HeaderProps) {`
`41`	`41`	`'after:bg-background/20 after:absolute after:inset-0 after:-z-10 after:backdrop-blur-lg'`
`42`	`42`	`)}`
`43`	`43`	`>`
`44`		`- <SidebarTrigger variant='outline' className='scale-125 sm:scale-100' />`
	`44`	`+ <SidebarTrigger variant='outline' className='max-md:scale-125' />`
`45`	`45`	`<Separator orientation='vertical' className='h-6' />`
`46`	`46`	`{children}`
`47`	`47`	`</div>`
Original file line number	Diff line number	Diff line change
`@@ -145,7 +145,7 @@ export function AccountForm() {`
`145`	`145`	`>`
`146`	`146`	`<CheckIcon`
`147`	`147`	`className={cn(`
`148`		`- 'me-2 h-4 w-4',`
	`148`	`+ 'size-4',`
`149`	`149`	`language.value === field.value`
`150`	`150`	`? 'opacity-100'`
`151`	`151`	`: 'opacity-0'`
Original file line number	Diff line number	Diff line change
`@@ -86,7 +86,7 @@ export function DisplayForm() {`
`86`	`86`	`return (`
`87`	`87`	`<FormItem`
`88`	`88`	`key={item.id}`
`89`		`- className='flex flex-row items-start space-y-0 space-x-3'`
	`89`	`+ className='flex flex-row items-start'`
`90`	`90`	`>`
`91`	`91`	`<FormControl>`
`92`	`92`	`<Checkbox`