From 4b59cb16b8892bd161afd18011fdebe81d759d8d Mon Sep 17 00:00:00 2001
From: Rene <king-sora@hotmail.de>
Date: Wed, 6 Jul 2022 13:13:37 +0200
Subject: [PATCH] improve code

---
 .../setups/structureSetup/nesting/index.browser.ts   | 12 ++++++------
 .../setups/structureSetup/nesting/index.html         |  9 +++------
 .../setups/structureSetup/nesting/index.scss         | 11 ++++++++++-
 3 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/packages/overlayscrollbars/tests/playwright/setups/structureSetup/nesting/index.browser.ts b/packages/overlayscrollbars/tests/playwright/setups/structureSetup/nesting/index.browser.ts
index c7c30de..b667d21 100644
--- a/packages/overlayscrollbars/tests/playwright/setups/structureSetup/nesting/index.browser.ts
+++ b/packages/overlayscrollbars/tests/playwright/setups/structureSetup/nesting/index.browser.ts
@@ -1,5 +1,5 @@
-import 'styles/overlayscrollbars.scss';
 import './index.scss';
+import 'styles/overlayscrollbars.scss';
 import should from 'should';
 import { OverlayScrollbars } from 'overlayscrollbars';
 
@@ -28,11 +28,12 @@ const resizeBetweenB: HTMLElement | null = document.createElement('div');
 let rootUpdateCount = 0;
 let aUpdateCount = 0;
 let bUpdateCount = 0;
-const osInstanceRoot = OverlayScrollbars(
+OverlayScrollbars(
   targetRoot!,
   {},
   {
     initialized() {
+      addClass(targetRoot!.querySelector('.os-viewport'), 'flex');
       addClass(resizeBetweenRoot, 'resize resizeBetween');
       targetRoot!.append(resizeBetweenRoot);
     },
@@ -46,11 +47,12 @@ const osInstanceRoot = OverlayScrollbars(
     },
   }
 );
-const osInstanceA = OverlayScrollbars(
+OverlayScrollbars(
   targetA!,
   {},
   {
     initialized() {
+      addClass(targetA!.querySelector('.os-viewport'), 'flex');
       addClass(resizeBetweenA, 'resize resizeBetween');
       targetA!.append(resizeBetweenA);
     },
@@ -65,7 +67,7 @@ const osInstanceA = OverlayScrollbars(
     },
   }
 );
-const osInstanceB = OverlayScrollbars(
+OverlayScrollbars(
   targetB!,
   {},
   {
@@ -94,8 +96,6 @@ resize(resizeBetweenB!);
 const start = async () => {
   setTestResult(null);
 
-  // target?.removeAttribute('style');
-
   setTestResult(true);
 };
 
diff --git a/packages/overlayscrollbars/tests/playwright/setups/structureSetup/nesting/index.html b/packages/overlayscrollbars/tests/playwright/setups/structureSetup/nesting/index.html
index 49793b4..82a45f0 100644
--- a/packages/overlayscrollbars/tests/playwright/setups/structureSetup/nesting/index.html
+++ b/packages/overlayscrollbars/tests/playwright/setups/structureSetup/nesting/index.html
@@ -1,19 +1,16 @@
 <div id="controls">
   <button id="start">start</button>
-  <div>UpdatesRoot: <span id="updatesRoot"></span></div>
-  <div>UpdatesA: <span id="updatesA"></span></div>
-  <div>UpdatesB:</div>
 </div>
 <div id="stage">
   <div>
     <div id="targetRoot" class="container">
       <div id="targetA" class="container">
         <div id="targetB" class="container">
-          <div id="resizeB" class="resize">B <span id="updatesB"></span></div>
+          <div id="resizeB" class="resize">UpdatesB: <span id="updatesB"></span></div>
         </div>
-        <div id="resizeA" class="resize">A</div>
+        <div id="resizeA" class="resize">UpdatesA: <span id="updatesA"></span></div>
       </div>
-      <div id="resizeRoot" class="resize">Root</div>
+      <div id="resizeRoot" class="resize">UpdatesRoot: <span id="updatesRoot"></span></div>
     </div>
   </div>
 </div>
diff --git a/packages/overlayscrollbars/tests/playwright/setups/structureSetup/nesting/index.scss b/packages/overlayscrollbars/tests/playwright/setups/structureSetup/nesting/index.scss
index 01ce15c..81d976f 100644
--- a/packages/overlayscrollbars/tests/playwright/setups/structureSetup/nesting/index.scss
+++ b/packages/overlayscrollbars/tests/playwright/setups/structureSetup/nesting/index.scss
@@ -25,6 +25,7 @@ body {
   width: 60%;
   height: 60%;
   padding: 10px;
+  margin: 10px;
 }
 
 .resize {
@@ -42,7 +43,7 @@ body {
   background: tomato;
   position: absolute;
   bottom: 0;
-  right: 0;
+  left: 0;
 }
 
 .resizeBtn {
@@ -58,3 +59,11 @@ body {
 #targetRoot {
   height: 80%;
 }
+
+#targetA {
+  box-sizing: border-box;
+}
+
+.flex {
+  display: flex;
+}