refactor(ui-components): Improve chromium compatability

packages/ui-components/src/components/common/VimeoEmbed.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="relative bg-foundation">
-    <div class="absolute inset-0 flex items-center justify-center" role="status">
+    <div
+      class="absolute top-0 left-0 right-0 bottom-0 flex items-center justify-center"
+      role="status"
+    >
       <svg
         aria-hidden="true"
         class="w-6 h-6 text-outline-2 animate-spin fill-primary"

packages/ui-components/src/components/common/animation/Instructional.vue

@@ -15,7 +15,7 @@
         class="absolute -top-5 -left-4 h-12 w-12 -rotate-12 text-foreground"
         :class="[{ hidden: !isClicked }]"
       />
-      <MouseIcon class="absolute inset-0 h-11 w-11" />
+      <MouseIcon class="absolute top-0 left-0 right-0 bottom-0 h-11 w-11" />
     </div>
     <div class="w-full h-full overflow-hidden">
       <slot name="background"></slot>

packages/ui-components/src/components/form/ClipboardInput.vue

@@ -18,7 +18,7 @@
       :model-value="value"
       class="relative z-10 text-sm text-foreground font-mono"
     />
-    <div class="absolute inset-0 right-2 flex justify-end items-center">
+    <div class="absolute top-2 right-2 flex justify-end items-center">
       <FormButton
         color="outline"
         :icon-left="copied ? ClipboardDocumentCheckIcon : ClipboardDocumentIcon"

packages/ui-components/src/components/form/Radio.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="relative flex gap-2 mb-2 last:mb-0"
+    class="relative flex space-x-2 mb-2 last:mb-0"
     :class="description && inlineDescription ? 'items-start' : 'items-center'"
   >
     <div class="flex h-6 items-center">
@@ -21,11 +21,11 @@
     </div>
     <div
       class="text-xs sm:text-sm"
-      :class="inlineDescription ? 'flex gap-2 items-center' : ''"
+      :class="inlineDescription ? 'flex space-x-2 items-center' : ''"
     >
       <label
         :for="finalId"
-        class="text-foreground flex gap-2 items-center"
+        class="text-foreground flex space-x-2 items-center"
         :class="{ 'sr-only': hideLabel }"
       >
         <div v-if="icon">

packages/ui-components/src/components/form/RadioGroup.vue

@@ -1,6 +1,8 @@
 <template>
   <div>
-    <div class="flex flex-col sm:flex-row items-stretch gap-3 w-full">
+    <div
+      class="flex flex-col sm:flex-row items-stretch space-y-3 sm:space-y-0 sm:space-x-3 w-full"
+    >
       <div v-for="option in options" :key="option.value" class="w-full flex flex-col">
         <button
           class="relative w-full h-full select-none rounded-md border"
@@ -24,7 +26,7 @@
               <CheckIcon class="w-4 h-4 text-white" />
             </div>
           </div>
-          <div class="px-3 py-4 flex flex-col gap-3 h-full">
+          <div class="px-3 py-4 flex flex-col space-y-3 h-full">
             <component
               :is="option.icon"
               class="text-foreground h-8 w-8 -mt-1 stroke-[1px]"
@@ -47,18 +49,18 @@
         </button>
         <div
           v-if="option.help"
-          class="sm:hidden text-xs flex gap-0.5 mt-2 text-foreground"
+          class="sm:hidden text-xs flex space-x-0.5 mt-2 text-foreground"
         >
           <InformationCircleIcon class="h-4 w-4" />
           {{ option.help }}
         </div>
       </div>
     </div>
-    <div class="hidden sm:flex flex-col sm:flex-row gap-3 w-full">
+    <div class="hidden sm:flex space-x-3 w-full">
       <div v-for="option in options" :key="option.value" class="w-full">
         <div
           v-if="option.help"
-          class="text-xs flex gap-0.5 mt-2 text-foreground select-none"
+          class="text-xs flex space-x-0.5 mt-2 text-foreground select-none"
         >
           <InformationCircleIcon class="h-4 w-4" />
           {{ option.help }}

packages/ui-components/src/components/form/Switch.vue

@@ -1,13 +1,15 @@
 <template>
-  <div class="flex items-center gap-2">
+  <div class="flex items-center space-x-2">
     <HeadlessSwitch
       :id="id || name"
       v-model="enabled"
       :class="switchClasses"
       :name="name"
       :disabled="disabled"
     >
-      <div class="absolute inset-0 flex items-center gap-2 px-1 text-white">
+      <div
+        class="absolute top-0 left-0 right-0 bottom-0 flex items-center space-x-2 px-1 text-white"
+      >
         <CheckIcon
           class="h-5 w-5 drop-shadow-md"
           :class="icons ? 'opacity-100' : 'opacity-0'"

packages/ui-components/src/components/form/Tags.vue

@@ -115,7 +115,7 @@
                 </span>
                 <span
                   v-if="selected"
-                  class="absolute inset-y-0 right-0 flex items-center pr-4"
+                  class="absolute top-0 bottom-0 right-0 flex items-center pr-4"
                   :class="{ 'text-primary': active, 'text-foreground': !active }"
                 >
                   <CheckIcon class="h-5 w-5" aria-hidden="true" />

packages/ui-components/src/components/form/TextArea.vue

@@ -37,15 +37,15 @@
       <div
         v-if="errorMessage"
         :class="[
-          'pointer-events-none absolute inset-y-0 right-0 flex items-start mt-2',
+          'pointer-events-none absolute top-0 bottom-0 right-0 flex items-start mt-2',
           shouldShowClear ? 'pr-8' : 'pr-2'
         ]"
       >
         <ExclamationCircleIcon class="h-4 w-4 text-danger" aria-hidden="true" />
       </div>
       <div
         v-if="showRequired && !errorMessage"
-        class="pointer-events-none absolute inset-y-0 mt-0.5 text-4xl right-0 flex items-start text-danger opacity-50"
+        class="pointer-events-none absolute top-0 bottom-0 mt-0.5 text-4xl right-0 flex items-start text-danger opacity-50"
         :class="[shouldShowClear ? 'pr-8' : 'pr-2']"
       >
         *

packages/ui-components/src/components/form/TextInput.vue

@@ -21,7 +21,7 @@
     >
       <div
         v-if="customIcon"
-        class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-2"
+        class="pointer-events-none absolute top-0 bottom-0 left-0 flex items-center pl-2"
       >
         <Component
           :is="customIcon"
@@ -52,7 +52,7 @@
         <a
           v-if="shouldShowClear"
           title="Clear input"
-          class="absolute inset-y-0 right-0 flex items-center pr-2 cursor-pointer"
+          class="absolute top-0 bottom-0 right-0 flex items-center pr-2 cursor-pointer"
           @click="clear"
           @keydown="clear"
         >
@@ -62,15 +62,15 @@
         <div
           v-if="errorMessage"
           :class="[
-            'pointer-events-none absolute inset-y-0 right-0 flex items-center',
+            'pointer-events-none absolute top-0 bottom-0 right-0 flex items-center',
             shouldShowClear ? 'pr-8' : 'pr-2'
           ]"
         >
           <ExclamationCircleIcon class="h-4 w-4 text-danger" aria-hidden="true" />
         </div>
         <div
           v-if="!showLabel && showRequired && !errorMessage"
-          class="ppointer-events-none absolute inset-y-0 mt-2 text-body right-0 flex items-center text-danger pr-2.5"
+          class="ppointer-events-none absolute top-0 bottom-0 mt-2 text-body right-0 flex items-center text-danger pr-2.5"
           :class="[shouldShowClear ? 'pr-8' : 'pr-2']"
         >
           *
@@ -331,7 +331,7 @@ const computedWrapperClasses = computed(() => {
     classes.push('flex-col')
   }
   if (props.labelPosition === 'left') {
-    classes.push('w-full gap-1 md:gap-8 flex-col md:flex-row')
+    classes.push('w-full space-y-1 sm:space-y-0 sm:space-x-8 flex-col sm:flex-row')
   }
   return classes.join(' ')
 })

packages/ui-components/src/components/form/select/Badges.vue

@@ -12,7 +12,7 @@
     :button-id="buttonId"
   >
     <template #something-selected="{ value }">
-      <ul class="flex flex-wrap gap-1.5 text-xs">
+      <ul class="flex flex-wrap space-x-1.5 text-xs">
         <li v-for="item in isArrayValue(value) ? value : [value]" :key="item[by]">
           <CommonBadge
             size="lg"

packages/ui-components/src/components/form/select/Base.vue

@@ -98,7 +98,7 @@
                 <span class="sr-only label text-foreground">Search</span>
                 <div class="relative">
                   <div
-                    class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-2"
+                    class="pointer-events-none absolute top-0 bottom-0 left-0 flex items-center pl-2"
                   >
                     <MagnifyingGlassIcon class="h-4 w-4 text-foreground-2" />
                   </div>
@@ -162,7 +162,7 @@
                         v-if="!hideCheckmarks && selected"
                         :class="[
                           active ? 'text-primary' : 'text-foreground',
-                          'absolute inset-y-0 right-0 flex items-center pr-4'
+                          'absolute top-0 bottom-0 right-0 flex items-center pr-4'
                         ]"
                       >
                         <CheckIcon class="h-5 w-5" aria-hidden="true" />

packages/ui-components/src/components/global/ToastRenderer.vue

@@ -1,9 +1,9 @@
 <template>
   <div
     aria-live="assertive"
-    class="pointer-events-none fixed inset-0 flex items-end px-4 py-6 mt-10 sm:items-start sm:p-6 z-50"
+    class="pointer-events-none fixed top-0 right-0 left-0 bottom-0 flex items-end px-4 py-6 mt-10 sm:items-start sm:p-6 z-50"
   >
-    <div class="flex w-full flex-col items-center gap-4 sm:items-end">
+    <div class="flex w-full flex-col items-center space-y-4 sm:items-end">
       <!-- Notification panel, dynamically insert this into the live region when it needs to be displayed -->
       <Transition
         enter-active-class="transform ease-out duration-300 transition"
@@ -18,7 +18,7 @@
           class="pointer-events-auto w-full max-w-[20rem] overflow-hidden rounded bg-foundation text-foreground shadow-lg border border-outline-2 p-3"
           :class="{ 'pb-2': isTitleOnly }"
         >
-          <div class="flex gap-2">
+          <div class="flex space-x-2">
             <div class="flex-shrink-0 mt-1">
               <CheckCircleIcon
                 v-if="notification.type === ToastNotificationType.Success"

packages/ui-components/src/components/layout/Dialog.vue

@@ -92,7 +92,7 @@
               </div>
               <div
                 v-if="hasButtons"
-                class="relative z-50 flex px-6 py-3 gap-3 shrink-0 bg-foundation-page border-t border-outline-2"
+                class="relative z-50 flex px-6 py-3 space-x-3 shrink-0 bg-foundation-page border-t border-outline-2"
                 :class="{
                   'shadow-t': !scrolledToBottom,
                   [buttonsWrapperClasses || '']: true

packages/ui-components/src/components/layout/DialogSection.vue

@@ -8,7 +8,7 @@
     }"
   >
     <div
-      class="flex justify-between items-center gap-4 sm:gap-8 py-2.5 px-2"
+      class="flex justify-between items-center space-x-4 sm:space-x-8 py-2.5 px-2"
       :class="backgroundClass"
       tabindex="0"
       v-on="
@@ -21,7 +21,7 @@
       "
     >
       <div
-        class="text-heading-sm flex items-center gap-1 sm:gap-2 select-none"
+        class="text-heading-sm flex items-center space-x-1 sm:space-x-2 select-none"
         :class="titleClasses"
       >
         <div v-if="$slots.icon || icon" class="h-4 w-4 empty:h-0 empty:w-0">

packages/ui-components/src/components/layout/GridListToggle.vue

@@ -1,6 +1,6 @@
 <template>
   <button
-    class="max-w-max transition flex justify-center items-center gap-2 outline-none select-none h-8 text-foreground border-2 border-primary-muted dark:border-foundation bg-primary-muted rounded-md active:scale-[0.97] grow"
+    class="max-w-max transition flex justify-center items-center space-x-2 outline-none select-none h-8 text-foreground border-2 border-primary-muted dark:border-foundation bg-primary-muted rounded-md active:scale-[0.97] grow"
     @click="onClick"
   >
     <div class="relative flex bg-primary-muted rounded-md">
@@ -16,13 +16,13 @@
       </div>
       <div
         v-tippy="'List View'"
-        class="relative z-10 flex gap-1 items-center p-1 rounded-l"
+        class="relative z-10 flex space-x-1 items-center p-1 rounded-l"
       >
         <Bars3Icon class="h-5 w-5" />
       </div>
       <div
         v-tippy="'Grid View'"
-        class="relative z-10 flex gap-1 items-center p-1 rounded-r"
+        class="relative z-10 flex space-x-1 items-center p-1 rounded-r"
       >
         <Squares2X2Icon class="h-5 w-5" />
       </div>

packages/ui-components/src/components/layout/Menu.vue

@@ -94,7 +94,7 @@ const buildButtonClassses = (params: {
 }) => {
   const { active, disabled, color } = params
   const classParts = [
-    'group flex gap-2 w-full items-center rounded-md px-2 py-1 text-body-xs'
+    'group flex space-x-2 w-full items-center rounded-md px-2 py-1 text-body-xs'
   ]
 
   if (active && !color) {

packages/ui-components/src/components/layout/Panel.vue

@@ -2,7 +2,7 @@
   <div class="relative group">
     <div
       v-if="fancyGlow"
-      class="absolute -inset-1 bg-blue-300 dark:bg-blue-500 opacity-5 dark:opacity-0 rounded-md blur-sm group-hover:opacity-60 dark:group-hover:opacity-30 transition duration-500"
+      class="absolute -top-1 -left-1 -right-1 -bottom-1 bg-blue-300 dark:bg-blue-500 opacity-5 dark:opacity-0 rounded-md blur-sm group-hover:opacity-60 dark:group-hover:opacity-30 transition duration-500"
     ></div>
     <Component
       :is="form ? 'form' : 'div'"

packages/ui-components/src/components/layout/Table.vue

@@ -6,7 +6,7 @@
     >
       <div
         v-if="items.length > 0"
-        class="grid z-10 grid-cols-12 items-center gap-6 font-medium bg-foundation-page rounded-t-lg w-full border-b border-outline-3 pb-2 pt-4 px-4 min-w-[750px]"
+        class="grid z-10 grid-cols-12 items-center space-x-6 font-medium bg-foundation-page rounded-t-lg w-full border-b border-outline-3 pb-2 pt-4 px-4 min-w-[750px]"
         :style="{ paddingRight: paddingRightStyle }"
       >
         <div
@@ -38,7 +38,7 @@
                 </slot>
               </div>
             </template>
-            <div class="absolute right-1.5 gap-1 flex items-center p-0 h-full">
+            <div class="absolute right-1.5 space-x-1 flex items-center p-0 h-full">
               <div v-for="button in buttons" :key="button.label">
                 <FormButton
                   :icon-left="button.icon"
@@ -115,7 +115,7 @@ const paddingRightStyle = computed(() => {
 
 const rowsWrapperClasses = computed(() => {
   const classParts = [
-    'relative grid grid-cols-12 items-center gap-6 px-4 py-0.5 min-w-[750px] bg-foundation text-body-xs'
+    'relative grid grid-cols-12 items-center space-x-6 px-4 py-0.5 min-w-[750px] bg-foundation text-body-xs'
   ]
 
   if (props.onRowClick && props.items.length) {

packages/ui-components/src/components/layout/sidebar/menu/Menu.vue

@@ -1,5 +1,5 @@
 <template>
-  <nav class="flex flex-col gap-4">
+  <nav class="flex flex-col space-y-4">
     <slot></slot>
   </nav>
 </template>

packages/ui-components/src/components/layout/sidebar/menu/group/Group.vue

@@ -3,15 +3,17 @@
     <div v-if="title" class="select-none mb-1">
       <button
         v-if="collapsible"
-        class="group flex gap-1.5 items-center w-full hover:bg-foundation-3 rounded-md p-0.5"
+        class="group flex space-x-1.5 items-center w-full hover:bg-foundation-3 rounded-md p-0.5"
         @click="isOpen = !isOpen"
       >
         <ChevronDownIcon :class="isOpen ? '' : 'rotate-180'" class="h-2.5 w-2.5" />
-        <h6 class="font-semibold text-foreground-2 text-xs flex items-center gap-1.5">
+        <h6
+          class="font-semibold text-foreground-2 text-xs flex items-center space-x-1.5"
+        >
           {{ title }}
         </h6>
       </button>
-      <div v-else class="flex gap-1 items-center w-full p-1 text-foreground-2">
+      <div v-else class="flex space-x-1 items-center w-full p-1 text-foreground-2">
         <div
           v-if="$slots['title-icon']"
           class="h-5 w-5 flex items-center justify-center"

packages/ui-components/src/components/layout/sidebar/menu/group/Item.vue

@@ -3,12 +3,12 @@
     :is="linkComponent"
     v-if="!hasChildren"
     :to="to"
-    class="group flex items-center justify-between gap-2 shrink-0 text-body-xs select-none rounded-md w-full hover:bg-primary-muted py-1 px-5 cursor-pointer"
+    class="group flex items-center justify-between space-x-2 shrink-0 text-body-xs select-none rounded-md w-full hover:bg-primary-muted py-1 px-5 cursor-pointer"
     exact-active-class="bg-foundation-focus hover:!bg-foundation-focus"
     :external="external"
     :target="external ? '_blank' : undefined"
   >
-    <div class="flex items-center gap-2">
+    <div class="flex items-center space-x-2">
       <div v-if="$slots.icon" class="h-5 w-5 flex items-center justify-center">
         <slot name="icon" />
       </div>
@@ -25,11 +25,11 @@
   </component>
   <div v-else class="flex flex-col">
     <button
-      class="group flex gap-1.5 items-center w-full hover:bg-foundation-3 rounded-md p-0.5 cursor-pointer"
+      class="group flex space-x-1.5 items-center w-full hover:bg-foundation-3 rounded-md p-0.5 cursor-pointer"
       @click="isOpen = !isOpen"
     >
       <ChevronDownIcon :class="isOpen ? '' : 'rotate-180'" class="h-2.5 w-2.5" />
-      <h6 class="text-heading-sm text-foreground-2 flex items-center gap-1.5">
+      <h6 class="text-heading-sm text-foreground-2 flex items-center space-x-1.5">
         {{ label }}
       </h6>
     </button>