fix: Fix layout change, ensure div[ref="asideRef"] is contained within <aside> (#7551)

packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue

@@ -264,66 +264,71 @@ function handleMouseleave() {
     class="h-full transition-all duration-150"
   ></div>
   <aside
-    :class="[
-      theme,
-      {
-        'bg-sidebar-deep': isSidebarMixed,
-        'border-r border-border bg-sidebar': !isSidebarMixed,
-      },
-    ]"
     :style="style"
     class="fixed left-0 top-0 h-full transition-all duration-150"
     @mouseenter="handleMouseenter"
     @mouseleave="handleMouseleave"
   >
-    <SidebarFixedButton
-      v-if="!collapse && !isSidebarMixed && showFixedButton"
-      v-model:expand-on-hover="expandOnHover"
-    />
-    <div v-if="slots.logo" :style="headerStyle">
-      <slot name="logo"></slot>
-    </div>
-    <VbenScrollbar :style="contentStyle" shadow shadow-border>
-      <slot></slot>
-    </VbenScrollbar>
-
-    <div :style="collapseStyle"></div>
-    <SidebarCollapseButton
-      v-if="showCollapseButton && !isSidebarMixed"
-      v-model:collapsed="collapse"
-    />
-  </aside>
-  <div
-    v-if="isSidebarMixed"
-    ref="asideRef"
-    :class="[
-      themeSub,
-      {
-        'border-l': extraVisible,
-      },
-    ]"
-    :style="extraStyle"
-    class="fixed top-0 h-full overflow-hidden border-r border-border bg-sidebar transition-all duration-200"
-  >
-    <SidebarCollapseButton
-      v-if="isSidebarMixed && expandOnHover"
-      v-model:collapsed="extraCollapse"
-    />
-
-    <SidebarFixedButton
-      v-if="!extraCollapse"
-      v-model:expand-on-hover="expandOnHover"
-    />
-    <div v-if="!extraCollapse" :style="extraTitleStyle" class="pl-2">
-      <slot name="extra-title"></slot>
+    <div
+      class="h-full"
+      :class="[
+        theme,
+        {
+          'bg-sidebar-deep': isSidebarMixed,
+          'border-r border-border bg-sidebar': !isSidebarMixed,
+        },
+      ]"
+      :style="{ width: `${width}px` }"
+    >
+      <SidebarFixedButton
+        v-if="!collapse && !isSidebarMixed && showFixedButton"
+        v-model:expand-on-hover="expandOnHover"
+      />
+      <div v-if="slots.logo" :style="headerStyle">
+        <slot name="logo"></slot>
+      </div>
+      <VbenScrollbar :style="contentStyle" shadow shadow-border>
+        <slot></slot>
+      </VbenScrollbar>
+
+      <div :style="collapseStyle"></div>
+      <SidebarCollapseButton
+        v-if="showCollapseButton && !isSidebarMixed"
+        v-model:collapsed="collapse"
+      />
     </div>
-    <VbenScrollbar
-      :style="extraContentStyle"
-      class="border-border py-2"
-      shadow
-      shadow-border
+    <div
+      v-if="isSidebarMixed"
+      ref="asideRef"
+      :class="[
+        themeSub,
+        {
+          'border-l': extraVisible,
+        },
+      ]"
+      :style="extraStyle"
+      class="fixed top-0 h-full overflow-hidden border-r border-border bg-sidebar transition-all duration-200"
     >
-      <slot name="extra"></slot>
-    </VbenScrollbar>
-  </div>
+      <SidebarCollapseButton
+        v-if="isSidebarMixed && expandOnHover"
+        v-model:collapsed="extraCollapse"
+      />
+
+      <SidebarFixedButton
+        v-if="!extraCollapse"
+        v-model:expand-on-hover="expandOnHover"
+      />
+      <div v-if="!extraCollapse" :style="extraTitleStyle" class="pl-2">
+        <slot name="extra-title"></slot>
+      </div>
+      <VbenScrollbar
+        :style="extraContentStyle"
+        class="border-border py-2"
+        shadow
+        shadow-border
+      >
+        <slot name="extra"></slot>
+      </VbenScrollbar>
+    </div>
+  </aside>
 </template>