fix(layout#4448): fixed wrapper pointer overflow (#4467)

* fix(layout#4448): fixed wrapper pointer overflow * fix(layout): extra layout area
epicmaxco · Feb 6, 2025 · 9b449d3 · 9b449d3
1 parent 4ae1eeb
commit 9b449d3
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 10 deletions.
diff --git a/packages/ui/src/components/va-layout/components/VaLayoutArea.vue b/packages/ui/src/components/va-layout/components/VaLayoutArea.vue
@@ -1,18 +1,18 @@
 <template>
   <VaLayoutAbsoluteWrapper v-if="absolute">
-    <div :class="`va-layout-area va-layout__area va-layout__area--${area}`">
-      <VaLayoutFixedWrapper v-if="fixed" :area="area">
-        <slot />
-      </VaLayoutFixedWrapper>
-      <slot v-else />
+    <VaLayoutFixedWrapper v-if="fixed" :area="area" :class="layoutAreaClass">
+      <slot />
+    </VaLayoutFixedWrapper>
+    <div v-else :class="layoutAreaClass">
+      <slot />
     </div>
   </VaLayoutAbsoluteWrapper>
 
-  <div v-else :class="`va-layout-area va-layout__area va-layout__area--${area}`">
-    <VaLayoutFixedWrapper v-if="fixed" :area="area">
-      <slot />
-    </VaLayoutFixedWrapper>
-    <slot v-else />
+  <VaLayoutFixedWrapper v-else-if="fixed" :area="area" :class="layoutAreaClass">
+    <slot />
+  </VaLayoutFixedWrapper>
+  <div v-else :class="layoutAreaClass">
+    <slot />
   </div>
 
   <Transition>
@@ -47,6 +47,7 @@ const absolute = computed(() => props.config.absolute || false)
 const fixed = computed(() => props.config.fixed || false)
 const overlay = computed(() => props.config.overlay || false)
 const zIndex = computed(() => (props.config.order || 0) + 1)
+const layoutAreaClass = computed(() => `va-layout-area va-layout__area va-layout__area--${props.area}`)
 </script>
 
 <style lang="scss">

diff --git a/packages/ui/src/components/va-layout/components/VaLayoutFixedWrapper.vue b/packages/ui/src/components/va-layout/components/VaLayoutFixedWrapper.vue
@@ -64,9 +64,11 @@ const { paddings } = useFixedLayoutChild(props.area, size)
 .va-layout-fixed-wrapper {
   position: relative;
   flex: 1;
+  pointer-events: none;
 
   &__content {
     position: fixed;
+    pointer-events: all;
 
     @media print {
       position: relative !important;