refactor(tailwind): apply canonical logical inset utilities (#295)

- Replace directional Tailwind utilities (`start-*`, `end-*`)
  with canonical logical equivalents (`inset-s-*`, `inset-e-*`)
  across components and styles.
- Update a few responsive/sticky positioning classes to use
  the canonical logical inset forms.

src/components/search.tsx

@@ -22,11 +22,11 @@ export function Search({
     >
       <SearchIcon
         aria-hidden='true'
-        className='absolute start-1.5 top-1/2 -translate-y-1/2'
+        className='absolute inset-s-1.5 top-1/2 -translate-y-1/2'
         size={16}
       />
       <span className='ms-4'>{placeholder}</span>
-      <kbd className='pointer-events-none absolute end-[0.3rem] top-[0.3rem] hidden h-5 items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 select-none group-hover:bg-accent sm:flex'>
+      <kbd className='pointer-events-none absolute inset-e-[0.3rem] top-[0.3rem] hidden h-5 items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 select-none group-hover:bg-accent sm:flex'>
         <span className='text-xs'>⌘</span>K
       </kbd>
     </Button>

src/components/skip-to-main.tsx

@@ -1,7 +1,7 @@
 export function SkipToMain() {
   return (
     <a
-      className={`fixed start-44 z-999 -translate-y-52 bg-primary px-4 py-2 text-sm font-medium whitespace-nowrap text-primary-foreground opacity-95 shadow-sm transition hover:bg-primary/90 focus:translate-y-3 focus:transform focus-visible:ring-1 focus-visible:ring-ring`}
+      className={`fixed inset-s-44 z-999 -translate-y-52 bg-primary px-4 py-2 text-sm font-medium whitespace-nowrap text-primary-foreground opacity-95 shadow-sm transition hover:bg-primary/90 focus:translate-y-3 focus:transform focus-visible:ring-1 focus-visible:ring-ring`}
       href='#content'
     >
       Skip to Main

src/features/chats/index.tsx

@@ -161,7 +161,7 @@ export function Chats() {
             <div
               className={cn(
                 'absolute inset-0 start-full z-50 hidden w-full flex-1 flex-col border bg-background shadow-xs sm:static sm:z-auto sm:flex sm:rounded-md',
-                mobileSelectedUser && 'start-0 flex'
+                mobileSelectedUser && 'inset-s-0 flex'
               )}
             >
               {/* Top Part */}

src/features/settings/appearance/appearance-form.tsx

@@ -74,7 +74,7 @@ export function AppearanceForm() {
                     ))}
                   </select>
                 </FormControl>
-                <ChevronDownIcon className='absolute end-3 top-2.5 h-4 w-4 opacity-50' />
+                <ChevronDownIcon className='absolute inset-e-3 top-2.5 h-4 w-4 opacity-50' />
               </div>
               <FormDescription className='font-manrope'>
                 Set the font you want to use in the dashboard.

src/features/users/components/users-columns.tsx

@@ -23,7 +23,7 @@ export const usersColumns: ColumnDef<User>[] = [
       />
     ),
     meta: {
-      className: cn('max-md:sticky start-0 z-10 rounded-tl-[inherit]'),
+      className: cn('max-md:sticky inset-s-0 z-10 rounded-tl-[inherit]'),
     },
     cell: ({ row }) => (
       <Checkbox
@@ -47,7 +47,7 @@ export const usersColumns: ColumnDef<User>[] = [
     meta: {
       className: cn(
         'drop-shadow-[0_1px_2px_rgb(0_0_0_/_0.1)] dark:drop-shadow-[0_1px_2px_rgb(255_255_255_/_0.1)]',
-        'ps-0.5 max-md:sticky start-6 @4xl/content:table-cell @4xl/content:drop-shadow-none'
+        'ps-0.5 max-md:sticky inset-s-6 @4xl/content:table-cell @4xl/content:drop-shadow-none'
       ),
     },
     enableHiding: false,

src/routes/clerk/(auth)/route.tsx

@@ -38,7 +38,7 @@ function ClerkAuthLayout() {
           <LearnMore
             defaultOpen
             triggerProps={{
-              className: 'absolute -top-12 end-0 sm:end-20 size-6',
+              className: 'absolute -top-12 inset-e-0 sm:inset-e-20 size-6',
             }}
             contentProps={{ side: 'top', align: 'end', className: 'w-auto' }}
           >

src/styles/index.css

@@ -54,7 +54,7 @@
 }
 
 @utility faded-bottom {
-  @apply after:pointer-events-none after:absolute after:start-0 after:bottom-0 after:hidden after:h-32 after:w-full after:rounded-b-2xl after:bg-[linear-gradient(180deg,transparent_10%,var(--background)_70%)] md:after:block;
+  @apply after:pointer-events-none after:absolute after:inset-s-0 after:bottom-0 after:hidden after:h-32 after:w-full after:rounded-b-2xl after:bg-[linear-gradient(180deg,transparent_10%,var(--background)_70%)] md:after:block;
 }
 
 /* styles.css */