chore: uses size-x instead of w-x h-x (#2615)

assets/components/FuzzySearchModal.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="dropdown dropdown-open w-full">
     <div class="input input-primary flex h-auto items-center">
-      <mdi:magnify class="flex h-8 w-8" />
+      <mdi:magnify class="flex size-8" />
       <input
         tabindex="0"
         class="input input-ghost input-lg flex-1 px-1"
@@ -15,7 +15,7 @@
       />
       <mdi:keyboard-esc class="flex" />
     </div>
-    <ul tabindex="0" class="menu dropdown-content rounded-box !relative mt-2 w-full bg-base-lighter p-2">
+    <ul tabindex="0" class="menu dropdown-content !relative mt-2 w-full rounded-box bg-base-lighter p-2">
       <li v-for="(item, index) in data">
         <a
           class="grid auto-cols-max grid-cols-[min-content,auto] gap-2 py-4"

assets/components/Links.vue

@@ -14,9 +14,9 @@
 
     <dropdown class="dropdown-end" @closed="latestTag = latest?.tag ?? config.version">
       <template #trigger>
-        <mdi:announcement class="h-6 w-6 -rotate-12" />
+        <mdi:announcement class="size-6 -rotate-12" />
         <span
-          class="absolute right-px top-0 h-2 w-2 rounded-full bg-red"
+          class="absolute right-px top-0 size-2 rounded-full bg-red"
           v-if="hasUpdate && latestTag != latest?.tag"
         ></span>
       </template>
@@ -30,7 +30,7 @@
     <dropdown class="dropdown-end" v-if="config.user">
       <template #trigger>
         <img
-          class="h-6 w-6 max-w-none rounded-full p-px ring-1 ring-base-content/60"
+          class="size-6 max-w-none rounded-full p-px ring-1 ring-base-content/60"
           :src="withBase('/api/profile/avatar')"
         />
       </template>

assets/components/LogViewer/ContainerHealth.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="inline-flex h-4 w-4" :health="health" v-if="health" :title="health">
+  <div class="inline-flex size-4" :health="health" v-if="health" :title="health">
     <cil:check-circle v-if="health == 'healthy'" />
     <cil:x-circle v-else-if="health == 'unhealthy'" />
     <cil:circle v-else />

assets/components/LogViewer/DockerEventLogItem.vue

@@ -5,7 +5,7 @@
       class="alert alert-info mt-8 w-auto text-[1rem] md:mx-auto md:w-1/2"
       v-if="nextContainer && logEntry.event === 'container-stopped'"
     >
-      <carbon:information class="h-6 w-6 shrink-0 stroke-current" />
+      <carbon:information class="size-6 shrink-0 stroke-current" />
       <div>
         <h3 class="text-lg font-bold">{{ $t("alert.similar-container-found.title") }}</h3>
         {{ $t("alert.similar-container-found.message", { containerId: nextContainer.id }) }}

assets/components/LogViewer/LogActionsToolbar.vue

@@ -30,7 +30,7 @@
             streamConfig.stderr = true;
           "
         >
-          <div class="flex h-4 w-4 gap-0.5">
+          <div class="flex size-4 gap-0.5">
             <template v-if="streamConfig.stderr && streamConfig.stdout">
               <carbon:circle-solid class="w-2 text-red" />
               <carbon:circle-solid class="w-2 text-blue" />
@@ -46,7 +46,7 @@
             streamConfig.stderr = false;
           "
         >
-          <div class="flex h-4 w-4 flex-col gap-1">
+          <div class="flex size-4 flex-col gap-1">
             <carbon:circle-solid class="w-2 text-blue" v-if="!streamConfig.stderr && streamConfig.stdout" />
           </div>
           {{ $t("toolbar.show", { std: "STDOUT" }) }}
@@ -59,7 +59,7 @@
             streamConfig.stderr = true;
           "
         >
-          <div class="flex h-4 w-4 flex-col gap-1">
+          <div class="flex size-4 flex-col gap-1">
             <carbon:circle-solid class="w-2 text-red" v-if="streamConfig.stderr && !streamConfig.stdout" />
           </div>
           {{ $t("toolbar.show", { std: "STDERR" }) }}

assets/components/LogViewer/LogLevel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :data-level="level" :data-position="position" class="mt-1.5 h-2.5 w-2.5 flex-none rounded-lg"></div>
+  <div :data-level="level" :data-position="position" class="mt-1.5 size-2.5 flex-none rounded-lg"></div>
 </template>
 <script lang="ts" setup>
 import { Position } from "@/models/LogEntry";

assets/components/LogViewer/__snapshots__/LogEventSource.spec.ts.snap

@@ -8,7 +8,7 @@ exports[`<LogEventSource /> > render html correctly > should render dates with 1
       <div data-v-961504e7="" class="inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] text-sm" size="small">
         <div class="inline-flex gap-2 whitespace-nowrap text-blue"><time datetime="2019-06-12T10:55:42.459Z" class="mobile-hidden">06/12/2019</time><time datetime="2019-06-12T10:55:42.459Z">10:55:42 AM</time></div>
       </div>
-      <div data-v-e625cddd="" class="mt-1.5 h-2.5 w-2.5 flex-none rounded-lg flex"></div>
+      <div data-v-e625cddd="" class="mt-1.5 size-2.5 flex-none rounded-lg flex"></div>
       <div class="whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap">&lt;test&gt;foo bar&lt;/test&gt;</div>
       <div class="flex gap-2 duration-250 absolute -right-1 opacity-0 transition-opacity delay-150 group-hover/entry:opacity-100">
         <!--v-if-->
@@ -27,7 +27,7 @@ exports[`<LogEventSource /> > render html correctly > should render dates with 2
       <div data-v-961504e7="" class="inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] text-sm" size="small">
         <div class="inline-flex gap-2 whitespace-nowrap text-blue"><time datetime="2019-06-12T10:55:42.459Z" class="mobile-hidden">06/12/2019</time><time datetime="2019-06-12T10:55:42.459Z">10:55:42</time></div>
       </div>
-      <div data-v-e625cddd="" class="mt-1.5 h-2.5 w-2.5 flex-none rounded-lg flex"></div>
+      <div data-v-e625cddd="" class="mt-1.5 size-2.5 flex-none rounded-lg flex"></div>
       <div class="whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap">&lt;test&gt;foo bar&lt;/test&gt;</div>
       <div class="flex gap-2 duration-250 absolute -right-1 opacity-0 transition-opacity delay-150 group-hover/entry:opacity-100">
         <!--v-if-->
@@ -46,7 +46,7 @@ exports[`<LogEventSource /> > render html correctly > should render messages 1`]
       <div data-v-961504e7="" class="inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] text-sm" size="small">
         <div class="inline-flex gap-2 whitespace-nowrap text-blue"><time datetime="2019-06-12T10:55:42.459Z" class="mobile-hidden">06/12/2019</time><time datetime="2019-06-12T10:55:42.459Z">10:55:42 AM</time></div>
       </div>
-      <div data-v-e625cddd="" class="mt-1.5 h-2.5 w-2.5 flex-none rounded-lg flex"></div>
+      <div data-v-e625cddd="" class="mt-1.5 size-2.5 flex-none rounded-lg flex"></div>
       <div class="whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap">This is a message.</div>
       <div class="flex gap-2 duration-250 absolute -right-1 opacity-0 transition-opacity delay-150 group-hover/entry:opacity-100">
         <!--v-if-->
@@ -65,7 +65,7 @@ exports[`<LogEventSource /> > render html correctly > should render messages wit
       <div data-v-961504e7="" class="inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] text-sm" size="small">
         <div class="inline-flex gap-2 whitespace-nowrap text-blue"><time datetime="2019-06-12T10:55:42.459Z" class="mobile-hidden">06/12/2019</time><time datetime="2019-06-12T10:55:42.459Z">10:55:42 AM</time></div>
       </div>
-      <div data-v-e625cddd="" class="mt-1.5 h-2.5 w-2.5 flex-none rounded-lg flex"></div>
+      <div data-v-e625cddd="" class="mt-1.5 size-2.5 flex-none rounded-lg flex"></div>
       <div class="whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap"><span style="color:#000">black<span style="color:#AAA">white</span></span></div>
       <div class="flex gap-2 duration-250 absolute -right-1 opacity-0 transition-opacity delay-150 group-hover/entry:opacity-100">
         <!--v-if-->
@@ -84,7 +84,7 @@ exports[`<LogEventSource /> > render html correctly > should render messages wit
       <div data-v-961504e7="" class="inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] text-sm" size="small">
         <div class="inline-flex gap-2 whitespace-nowrap text-blue"><time datetime="2019-06-12T10:55:42.459Z" class="mobile-hidden">06/12/2019</time><time datetime="2019-06-12T10:55:42.459Z">10:55:42 AM</time></div>
       </div>
-      <div data-v-e625cddd="" class="mt-1.5 h-2.5 w-2.5 flex-none rounded-lg flex"></div>
+      <div data-v-e625cddd="" class="mt-1.5 size-2.5 flex-none rounded-lg flex"></div>
       <div class="whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap"><mark>test</mark> bar</div>
       <div class="flex gap-2 duration-250 absolute -right-1 opacity-0 transition-opacity delay-150 group-hover/entry:opacity-100">
         <!--v-if-->
@@ -105,7 +105,7 @@ exports[`<LogEventSource /> > render html correctly > should render messages wit
       <div data-v-961504e7="" class="inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] text-sm" size="small">
         <div class="inline-flex gap-2 whitespace-nowrap text-blue"><time datetime="2019-06-12T10:55:42.459Z" class="mobile-hidden">06/12/2019</time><time datetime="2019-06-12T10:55:42.459Z">10:55:42 AM</time></div>
       </div>
-      <div data-v-e625cddd="" class="mt-1.5 h-2.5 w-2.5 flex-none rounded-lg flex"></div>
+      <div data-v-e625cddd="" class="mt-1.5 size-2.5 flex-none rounded-lg flex"></div>
       <div class="whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap">&lt;test&gt;foo bar&lt;/test&gt;</div>
       <div class="flex gap-2 duration-250 absolute -right-1 opacity-0 transition-opacity delay-150 group-hover/entry:opacity-100">
         <!--v-if-->

assets/components/Releases.vue

@@ -2,7 +2,7 @@
   <ul class="space-y-4 p-2">
     <li v-for="release in releases" v-if="releases?.length">
       <div class="flex items-baseline gap-1">
-        <carbon:warning class="h-4.25 w-4.25 self-center stroke-orange" v-if="release.breaking > 0" />
+        <carbon:warning class="self-center stroke-orange" v-if="release.breaking > 0" />
         <a :href="release.htmlUrl" class="link-primary text-lg font-bold" target="_blank" rel="noreferrer noopener">
           {{ release.name }}
         </a>

assets/components/common/KeyShortcut.vue

@@ -4,8 +4,8 @@
       <carbon:mac-shift />
     </template>
     <template v-if="modifiers.includes('meta')">
-      <ph:command v-if="isMac" class="h-4 w-4" />
-      <ph:control-bold v-else class="h-4 w-4" />
+      <ph:command v-if="isMac" class="size-4" />
+      <ph:control-bold v-else class="size-4" />
     </template>
     <kbd class="uppercase">{{ char }}</kbd>
   </div>

assets/components/common/MobileMenu.vue

@@ -9,7 +9,7 @@
 
       <div class="ml-auto flex items-center gap-2">
         <a class="btn btn-circle flex" @click="$emit('search')" :title="$t('tooltip.search')">
-          <mdi:magnify class="h-5 w-5" />
+          <mdi:magnify class="size-5" />
         </a>
         <label class="btn btn-circle swap swap-rotate" data-testid="hamburger">
           <input type="checkbox" v-model="show" />

assets/layouts/default.vue

@@ -49,8 +49,8 @@
       :key="toast.id"
       :class="{ 'alert-error': toast.type === 'error', 'alert-info': toast.type === 'info' }"
     >
-      <carbon:information class="h-6 w-6 shrink-0 stroke-current" v-if="toast.type === 'info'" />
-      <carbon:warning class="h-6 w-6 shrink-0 stroke-current" v-else-if="toast.type === 'error'" />
+      <carbon:information class="size-6 shrink-0 stroke-current" v-if="toast.type === 'info'" />
+      <carbon:warning class="size-6 shrink-0 stroke-current" v-else-if="toast.type === 'error'" />
       <div>
         <h3 class="text-lg font-bold" v-if="toast.title">{{ toast.title }}</h3>
         {{ toast.message }}