Use size-* className instead of h-* w-*

Author: dtrucs

src/app/[locale]/map/[details]/[id]/loading.tsx

@@ -6,7 +6,7 @@ export default function Loading() {
   const t = useTranslations();
   return (
     <Icons.loading
-      className="m-auto h-8 w-8 animate-spin text-primary"
+      className="m-auto size-8 animate-spin text-primary"
       role="img"
       aria-label={t('site.loading')}
     />

src/components/error-message.tsx

@@ -13,7 +13,7 @@ export default function ErrorMessage({
   return (
     <div className="container my-10 grow">
       <Alert variant="destructive">
-        <Icons.alert className="h-4 w-4" />
+        <Icons.alert className="size-4" />
         <AlertTitle className="ml-6">{title}</AlertTitle>
         {message && <AlertDescription>{message}</AlertDescription>}
       </Alert>

src/components/map/geometry-tooltip.tsx

@@ -27,7 +27,7 @@ export const GeometryTooltip = ({
         {properties.attachments?.[0]?.thumbnail && (
           <Image
             loading="lazy"
-            className="aspect-[4/3] h-auto w-auto object-cover transition-all group-hover:scale-105"
+            className="aspect-[4/3] size-auto object-cover transition-all group-hover:scale-105"
             src={properties.attachments[0].thumbnail}
             alt=""
             width="400"

src/components/observation-form.tsx

@@ -123,7 +123,7 @@ export default function ObservationForm({ jsonSchema, handleSubmit }: Props) {
   if (validationMessage?.error === false) {
     return (
       <Alert variant="default">
-        <Icons.check className="h-4 w-4" />
+        <Icons.check className="size-4" />
         <AlertTitle className="ml-6">{t('validation.title')}</AlertTitle>
         <AlertDescription>{t('validation.content')}</AlertDescription>
       </Alert>
@@ -134,7 +134,7 @@ export default function ObservationForm({ jsonSchema, handleSubmit }: Props) {
     <Form {...form}>
       {validationMessage?.error && (
         <Alert variant="destructive">
-          <Icons.alert className="h-4 w-4" />
+          <Icons.alert className="size-4" />
           <AlertTitle className="ml-6">{t('error.title')}</AlertTitle>
           <AlertDescription>{validationMessage.message}</AlertDescription>
         </Alert>

src/components/site-header.tsx

@@ -27,7 +27,7 @@ export function SiteHeader({ menu }: Props) {
         <Link href="/" className="flex items-center space-x-2">
           {settings && settings.customization.header?.logo?.src ? (
             <Image
-              className="lock hidden h-8 w-8 sm:inline"
+              className="lock hidden size-8 sm:inline"
               width={32}
               height={32}
               {...settings.customization.header.logo}
@@ -36,7 +36,7 @@ export function SiteHeader({ menu }: Props) {
           ) : (
             <Icons.logo
               {...propsForSVGPresentation}
-              className="lock hidden h-8 w-8 sm:inline"
+              className="lock hidden size-8 sm:inline"
             />
           )}
           <span className="font-bold">{t('title')}</span>

src/components/suggestion-list.tsx

@@ -44,7 +44,7 @@ export default function SuggestionList({
             {item.images?.[0]?.thumbnail && (
               <CardMedia>
                 <Carousel
-                  className="aspect-[4/3] h-auto w-auto object-cover transition-all group-hover:scale-105"
+                  className="aspect-[4/3] size-auto object-cover transition-all group-hover:scale-105"
                   images={convertAttachementsToImages(item.images, true)}
                   width={400}
                   height={300}

src/components/ui/accordion.tsx

@@ -38,7 +38,7 @@ const AccordionTrigger = React.forwardRef<
       {children}
       <ChevronDown
         {...propsForSVGPresentation}
-        className="h-4 w-4 transition-transform duration-200"
+        className="size-4 transition-transform duration-200"
       />
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>

src/components/ui/navigation-menu.tsx

@@ -57,7 +57,7 @@ const NavigationMenuTrigger = React.forwardRef<
   >
     {children}{' '}
     <ChevronDown
-      className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
+      className="relative top-[1px] ml-1 size-3 transition duration-200 group-data-[state=open]:rotate-180"
       aria-hidden="true"
     />
   </NavigationMenuPrimitive.Trigger>
@@ -113,7 +113,7 @@ const NavigationMenuIndicator = React.forwardRef<
     )}
     {...props}
   >
-    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+    <div className="relative top-[60%] size-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
   </NavigationMenuPrimitive.Indicator>
 ));
 NavigationMenuIndicator.displayName =

src/components/ui/scroll-area.tsx

@@ -14,7 +14,7 @@ const ScrollArea = React.forwardRef<
     className={cn('relative overflow-hidden', className)}
     {...props}
   >
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit] pb-20 md:pb-0">
+    <ScrollAreaPrimitive.Viewport className="size-full rounded-[inherit] pb-20 md:pb-0">
       {children}
     </ScrollAreaPrimitive.Viewport>
     <ScrollBar />

src/components/ui/select.tsx

@@ -26,7 +26,7 @@ const SelectTrigger = React.forwardRef<
   >
     {children}
     <SelectPrimitive.Icon asChild>
-      <ChevronDown className="h-4 w-4 opacity-50" />
+      <ChevronDown className="size-4 opacity-50" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ));
@@ -85,9 +85,9 @@ const SelectItem = React.forwardRef<
     )}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="absolute left-2 flex size-3.5 items-center justify-center">
       <SelectPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
+        <Check className="size-4" />
       </SelectPrimitive.ItemIndicator>
     </span>