Fix p-divider sometimes has 0 width.

PrefectHQ · Feb 26, 2024 · 9a8e830 · 9a8e830
1 parent 7303dae
commit 9a8e830
Showing 1 changed file with 10 additions and 3 deletions.
diff --git a/src/components/Divider/PDivider.vue b/src/components/Divider/PDivider.vue
@@ -1,18 +1,25 @@
 <template>
-  <div class="flex items-center gap-x-2">
-    <hr class="p-divider">
+  <div class="p-divider">
+    <hr class="p-divider__line">
 
     <template v-if="$slots.default">
       <div class="p-divider__text">
         <slot />
       </div>
-      <hr class="p-divider">
+      <hr class="p-divider__line">
     </template>
   </div>
 </template>
 
 <style>
   .p-divider { @apply
+    flex
+    items-center
+    gap-x-2
+    w-full
+  }
+
+  .p-divider__line { @apply
     border-none
     h-[1px]
     bg-divider