fix(DashboardResizeHandle): allow hover over panel with z-index

Author: benjamincanac

src/theme/dashboard-resize-handle.ts

@@ -1,3 +1,3 @@
 export default {
-  base: 'hidden lg:block touch-none select-none cursor-ew-resize relative before:absolute before:inset-y-0 before:-left-1.5 before:-right-1.5'
+  base: 'hidden lg:block touch-none select-none cursor-ew-resize relative before:absolute before:inset-y-0 before:-left-1.5 before:-right-1.5 before:z-1'
 }

test/components/__snapshots__/DashboardPanel-vue.spec.ts.snap

@@ -83,7 +83,7 @@ exports[`DashboardPanel > renders with resizable correctly 1`] = `
   <div id="dashboard-panel-v-0" data-dragging="false" data-slot="root" class="relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-default flex-1">
     <div data-slot="body" class="flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto p-4 sm:p-6"></div>
   </div>
-  <div role="separator" class="hidden lg:block touch-none select-none cursor-ew-resize relative before:absolute before:inset-y-0 before:-left-1.5 before:-right-1.5" aria-controls="dashboard-panel-v-0" data-slot="handle"></div>
+  <div role="separator" class="hidden lg:block touch-none select-none cursor-ew-resize relative before:absolute before:inset-y-0 before:-left-1.5 before:-right-1.5 before:z-1" aria-controls="dashboard-panel-v-0" data-slot="handle"></div>
 </div>"
 `;
 

test/components/__snapshots__/DashboardPanel.spec.ts.snap

@@ -83,7 +83,7 @@ exports[`DashboardPanel > renders with resizable correctly 1`] = `
   <div id="dashboard-panel-v-0-0-0" data-dragging="false" data-slot="root" class="relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-default flex-1">
     <div data-slot="body" class="flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto p-4 sm:p-6"></div>
   </div>
-  <div role="separator" class="hidden lg:block touch-none select-none cursor-ew-resize relative before:absolute before:inset-y-0 before:-left-1.5 before:-right-1.5" aria-controls="dashboard-panel-v-0-0-0" data-slot="handle"></div>
+  <div role="separator" class="hidden lg:block touch-none select-none cursor-ew-resize relative before:absolute before:inset-y-0 before:-left-1.5 before:-right-1.5 before:z-1" aria-controls="dashboard-panel-v-0-0-0" data-slot="handle"></div>
 </div>"
 `;
 

test/components/__snapshots__/DashboardResizeHandle-vue.spec.ts.snap

@@ -2,18 +2,18 @@
 
 exports[`DashboardResizeHandle > renders with as correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
-  <section role="separator" class="hidden lg:block touch-none select-none cursor-ew-resize relative before:absolute before:inset-y-0 before:-left-1.5 before:-right-1.5"></section>
+  <section role="separator" class="hidden lg:block touch-none select-none cursor-ew-resize relative before:absolute before:inset-y-0 before:-left-1.5 before:-right-1.5 before:z-1"></section>
 </div>"
 `;
 
 exports[`DashboardResizeHandle > renders with class correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
-  <div role="separator" class="hidden lg:block touch-none select-none cursor-ew-resize before:absolute before:inset-y-0 before:-left-1.5 before:-right-1.5 absolute"></div>
+  <div role="separator" class="hidden lg:block touch-none select-none cursor-ew-resize before:absolute before:inset-y-0 before:-left-1.5 before:-right-1.5 before:z-1 absolute"></div>
 </div>"
 `;
 
 exports[`DashboardResizeHandle > renders with default slot correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
-  <div role="separator" class="hidden lg:block touch-none select-none cursor-ew-resize relative before:absolute before:inset-y-0 before:-left-1.5 before:-right-1.5">Default slot</div>
+  <div role="separator" class="hidden lg:block touch-none select-none cursor-ew-resize relative before:absolute before:inset-y-0 before:-left-1.5 before:-right-1.5 before:z-1">Default slot</div>
 </div>"
 `;

test/components/__snapshots__/DashboardResizeHandle.spec.ts.snap

@@ -2,18 +2,18 @@
 
 exports[`DashboardResizeHandle > renders with as correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
-  <section role="separator" class="hidden lg:block touch-none select-none cursor-ew-resize relative before:absolute before:inset-y-0 before:-left-1.5 before:-right-1.5"></section>
+  <section role="separator" class="hidden lg:block touch-none select-none cursor-ew-resize relative before:absolute before:inset-y-0 before:-left-1.5 before:-right-1.5 before:z-1"></section>
 </div>"
 `;
 
 exports[`DashboardResizeHandle > renders with class correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
-  <div role="separator" class="hidden lg:block touch-none select-none cursor-ew-resize before:absolute before:inset-y-0 before:-left-1.5 before:-right-1.5 absolute"></div>
+  <div role="separator" class="hidden lg:block touch-none select-none cursor-ew-resize before:absolute before:inset-y-0 before:-left-1.5 before:-right-1.5 before:z-1 absolute"></div>
 </div>"
 `;
 
 exports[`DashboardResizeHandle > renders with default slot correctly 1`] = `
 "<div class="fixed inset-0 flex overflow-hidden">
-  <div role="separator" class="hidden lg:block touch-none select-none cursor-ew-resize relative before:absolute before:inset-y-0 before:-left-1.5 before:-right-1.5">Default slot</div>
+  <div role="separator" class="hidden lg:block touch-none select-none cursor-ew-resize relative before:absolute before:inset-y-0 before:-left-1.5 before:-right-1.5 before:z-1">Default slot</div>
 </div>"
 `;

test/components/__snapshots__/DashboardSidebar-vue.spec.ts.snap

@@ -278,7 +278,7 @@ exports[`DashboardSidebar > renders with resizable correctly 1`] = `
     <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
     <!--v-if-->
   </div>
-  <div role="separator" class="hidden lg:block touch-none select-none cursor-ew-resize relative before:absolute before:inset-y-0 before:-left-1.5 before:-right-1.5" aria-controls="dashboard-sidebar-v-0" data-slot="handle"></div>
+  <div role="separator" class="hidden lg:block touch-none select-none cursor-ew-resize relative before:absolute before:inset-y-0 before:-left-1.5 before:-right-1.5 before:z-1" aria-controls="dashboard-sidebar-v-0" data-slot="handle"></div>
   <!--v-if-->
   <!--teleport start-->
   <!--teleport end-->

test/components/__snapshots__/DashboardSidebar.spec.ts.snap

@@ -278,7 +278,7 @@ exports[`DashboardSidebar > renders with resizable correctly 1`] = `
     <div data-slot="body" class="flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2"></div>
     <!--v-if-->
   </div>
-  <div role="separator" class="hidden lg:block touch-none select-none cursor-ew-resize relative before:absolute before:inset-y-0 before:-left-1.5 before:-right-1.5" aria-controls="dashboard-sidebar-v-0-0-0" data-slot="handle"></div>
+  <div role="separator" class="hidden lg:block touch-none select-none cursor-ew-resize relative before:absolute before:inset-y-0 before:-left-1.5 before:-right-1.5 before:z-1" aria-controls="dashboard-sidebar-v-0-0-0" data-slot="handle"></div>
   <!--v-if-->
   <!--teleport start-->
   <!--teleport end-->