📸 fix: update snapshot

Author: ONLY-yours

tests/__snapshots__/demo.test.tsx.snap

@@ -19823,6 +19823,7 @@ exports[`<Layout /> > renders basic.tsx correctly 1`] = `
 .emotion-1 {
   height: 100vh;
   width: 100vw;
+  box-sizing: border-box;
   background-color: #ffffff;
   overflow: hidden;
   border-radius: 6px;
@@ -19833,12 +19834,12 @@ exports[`<Layout /> > renders basic.tsx correctly 1`] = `
 }
 
 .emotion-2 {
+  box-sizing: border-box;
   height: 48px;
   min-height: 48px;
   border-radius: 6px;
   background-color: rgba(0, 0, 0, 0.02);
-  margin: 4px;
-  margin-bottom: 0;
+  margin: 2px;
   padding: 6px;
 }
 
@@ -19850,6 +19851,7 @@ exports[`<Layout /> > renders basic.tsx correctly 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  clear: both;
 }
 
 .emotion-4 {
@@ -19870,9 +19872,10 @@ exports[`<Layout /> > renders basic.tsx correctly 1`] = `
 
 .emotion-6 {
   border-radius: 6px;
+  box-sizing: border-box;
   background-color: rgba(0, 0, 0, 0.02);
-  margin: 4px;
-  height: calc(100% - 2px - 12px);
+  margin: 2px;
+  height: calc(100% - 4px);
   padding: 6px;
 }
 
@@ -19900,85 +19903,88 @@ exports[`<Layout /> > renders basic.tsx correctly 1`] = `
 }
 
 .emotion-8 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
-.emotion-8 .studio-layout-pannel {
-  height: calc(100% - 2px - 12px);
-  margin: 4px 1px;
-}
-
-.emotion-9 {
   border-radius: 6px;
+  box-sizing: border-box;
   background-color: rgba(0, 0, 0, 0.02);
-  margin: 4px;
-  height: calc(100% - 2px - 12px);
+  margin: 2px;
+  height: calc(100% - 4px);
   padding: 6px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
 }
 
-.emotion-13 {
+.emotion-12 {
   position: relative;
 }
 
-.emotion-13::before {
+.emotion-12::before {
   position: absolute;
   z-index: 50;
   -webkit-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
   content: '';
 }
 
-.emotion-13:hover::before,
-.emotion-13:active::before {
+.emotion-12:hover::before,
+.emotion-12:active::before {
   background: #1677ff;
 }
 
-.emotion-13::before {
+.emotion-12::before {
   left: 50%;
   width: 2px;
   height: 100%;
 }
 
-.emotion-14 {
+.emotion-13 {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
   position: relative;
   border: 0 solid rgba(5, 5, 5, 0.06);
 }
 
-.emotion-14:hover .studio-draggable-panel-toggle {
+.emotion-13:hover .studio-draggable-panel-toggle {
   opacity: 1;
 }
 
-.emotion-17 {
+.emotion-15 {
+  border-radius: 6px;
+  box-sizing: border-box;
+  background-color: rgba(0, 0, 0, 0.02);
+  margin: 2px;
+  height: calc(100% - 4px);
+  padding: 6px;
+}
+
+.emotion-16 {
   position: relative;
 }
 
-.emotion-17::before {
+.emotion-16::before {
   position: absolute;
   z-index: 50;
   -webkit-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
   content: '';
 }
 
-.emotion-17:hover::before,
-.emotion-17:active::before {
+.emotion-16:hover::before,
+.emotion-16:active::before {
   background: #1677ff;
 }
 
-.emotion-17::before {
+.emotion-16::before {
   top: 50%;
   height: 2px;
   width: 100%;
 }
 
-.emotion-18 {
+.emotion-17 {
   height: 28px;
-  margin: 4px;
+  box-sizing: border-box;
+  margin: 2px;
   border-radius: 6px;
   background-color: rgba(0, 0, 0, 0.02);
   padding: 6px;
@@ -20008,7 +20014,7 @@ exports[`<Layout /> > renders basic.tsx correctly 1`] = `
       >
         <div
           class="studio-draggable-panel-fixed emotion-5"
-          style="position: relative; user-select: auto; width: 200px; height: 100%; min-width: 200px; min-height: 200px; box-sizing: border-box; flex-shrink: 0;"
+          style="position: relative; user-select: auto; width: 300px; height: 100%; max-width: 500px; min-width: 200px; min-height: 200px; box-sizing: border-box; flex-shrink: 0;"
         >
           <div
             class="studio-layout-pannel studio-layout-left-pannel emotion-6"
@@ -20026,10 +20032,10 @@ exports[`<Layout /> > renders basic.tsx correctly 1`] = `
         </div>
       </div>
       <div
-        class="studio-layout-center-pannel emotion-8"
+        class="studio-layout-pannel studio-layout-center-pannel emotion-8"
       >
         <div
-          class="studio-layout-pannel emotion-9"
+          class=""
         />
       </div>
       <div
@@ -20038,41 +20044,41 @@ exports[`<Layout /> > renders basic.tsx correctly 1`] = `
       >
         <div
           class="studio-draggable-panel-fixed emotion-5"
-          style="position: relative; user-select: auto; width: 200px; height: 100%; min-width: 200px; min-height: 200px; box-sizing: border-box; flex-shrink: 0;"
+          style="position: relative; user-select: auto; width: 300px; height: 100%; max-width: 500px; min-width: 200px; min-height: 200px; box-sizing: border-box; flex-shrink: 0;"
         >
           <div
             class="studio-layout-pannel studio-layout-right-pannel emotion-6"
           />
           <div>
             <div
-              class="emotion-13 studio-draggable-panel-left-handle"
+              class="emotion-12 studio-draggable-panel-left-handle"
               style="position: absolute; user-select: none; width: 10px; height: 100%; top: 0px; left: -5px; cursor: col-resize;"
             />
           </div>
         </div>
       </div>
     </div>
     <div
-      class="studio-draggable-panel emotion-14"
+      class="studio-draggable-panel emotion-13"
       style="border-top-width: 1px;"
     >
       <div
         class="studio-draggable-panel-fixed emotion-5"
-        style="position: relative; user-select: auto; width: 100%; height: 200px; min-width: 200px; min-height: 200px; box-sizing: border-box; flex-shrink: 0;"
+        style="position: relative; user-select: auto; width: 100%; height: 200px; max-height: 400px; min-width: 200px; min-height: 200px; box-sizing: border-box; flex-shrink: 0;"
       >
         <div
-          class="studio-layout-pannel emotion-9"
+          class="studio-layout-pannel emotion-15"
         />
         <div>
           <div
-            class="studio-draggable-panel-top-handle emotion-17"
+            class="studio-draggable-panel-top-handle emotion-16"
             style="position: absolute; user-select: none; width: 100%; height: 10px; top: -5px; left: 0px; cursor: row-resize;"
           />
         </div>
       </div>
     </div>
     <div
-      class="studio-layout-footer studio-layout-flex-container emotion-18 studio-flex studio-flex-align-center studio-flex-justify-space-between"
+      class="studio-layout-footer studio-layout-flex-container emotion-17 studio-flex studio-flex-align-center studio-flex-justify-space-between"
     >
       <div>
         Icon