diff --git a/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx b/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx
index 09ff5b07..35ddf96b 100644
--- a/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx
+++ b/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx
@@ -435,7 +435,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
   }
 
   return (
-    <div className={css.tabLayoutWrap}>
+    <div className={classNames(css.tabLayoutWrap, !tabActivated && css.hide)}>
       {/* collabsed Main */}
       <Container
         className={css.tabWrap}
diff --git a/com.twin.app.shoptime/src/components/TabLayout/TabLayout.module.less b/com.twin.app.shoptime/src/components/TabLayout/TabLayout.module.less
index ac52db74..38fb37d4 100644
--- a/com.twin.app.shoptime/src/components/TabLayout/TabLayout.module.less
+++ b/com.twin.app.shoptime/src/components/TabLayout/TabLayout.module.less
@@ -1,10 +1,13 @@
 .tabLayoutWrap {
-  // width:100%;
+  width: 100%;
   height: 100%;
   position: absolute;
   left: 0;
   top: 0;
   display: flex;
+  &.hide {
+    width: auto;
+  }
 }
 .expandedRootContainer {
   position: absolute;