Horizontal slider update

Author: vishnuv688

packages/app/src/app.ts

@@ -38,9 +38,12 @@ export class WebdriverIODevtoolsApplication extends Element {
   @query('section')
   window?: HTMLElement
 
+  @query('section[data-resizer-window]')
+  resizerWindow?: HTMLElement
+
   async #getWindow() {
     await this.updateComplete
-    return this.window as Element
+    return this.resizerWindow as Element
   }
 
   connectedCallback(): void {
@@ -66,16 +69,15 @@ export class WebdriverIODevtoolsApplication extends Element {
     }
 
     return html`
-      <section class="flex h-[calc(100%-40px)] w-full relative">
+      <section data-resizer-window class="flex h-[calc(100%-40px)] w-full relative">
         ${
           // only render sidebar if trace file is captured using testrunner
           this.dataManager.traceType === TraceType.Testrunner
-            ? html`<wdio-devtools-sidebar style="${this.#drag.getPosition()}"></wdio-devtools-sidebar>`
+            ? html`<wdio-devtools-sidebar style="${this.#drag?.getPosition()}"></wdio-devtools-sidebar>`
             : nothing
         }
-
+        ${this.#drag.getSlider('h-full')}
         <wdio-devtools-workbench class="basis-auto"></wdio-devtools-workbench>
-        ${this.#drag.getSlider()}
       </section>
     `
   }

packages/app/src/components/workbench.ts

@@ -18,7 +18,7 @@ import './workbench/metadata.js'
 import './browser/snapshot.js'
 
 const MIN_WORKBENCH_HEIGHT = 600
-const MIN_METATAB_WIDTH = 250
+const MIN_METATAB_WIDTH = 260
 const RERENDER_TIMEOUT = 10
 
 const COMPONENT = 'wdio-devtools-workbench'
@@ -35,6 +35,7 @@ export class DevtoolsWorkbench extends Element {
       color: var(--vscode-foreground);
       background-color: var(--vscode-editor-background);
       position: relative;
+      margin-left: 10px;
     }
   `]
 

packages/app/src/components/workbench/actions.ts

@@ -91,7 +91,6 @@ export class DevtoolsActions extends Element {
     :host, .action-list {
       width: 100%;
       height: 100%;
-      overflow-y: auto;
     }
 
     .step-summary {

packages/app/src/utils/DragController.ts

@@ -60,14 +60,25 @@ export class DragController implements ReactiveController {
       this.#getDraggableEl(),
       options.getContainerEl()
     ]).then(([draggableEl, containerEl]) => {
-      if (!draggableEl) {
-        console.warn('getDraggableEl() did not return an element HTMLElement')
-      }
-      if (!containerEl) {
-        console.warn('getContainerEl() did not return an element HTMLElement')
-      }
-
       if (!draggableEl || !containerEl) {
+        // Retry after a short delay
+        setTimeout(async () => {
+          const [retryDraggableEl, retryContainerEl] = await Promise.all([
+            this.#getDraggableEl(),
+            options.getContainerEl()
+          ])
+          if (!retryDraggableEl) {
+            console.warn('getDraggableEl() did not return an element HTMLElement')
+          }
+          if (!retryContainerEl) {
+            console.warn('getContainerEl() did not return an element HTMLElement')
+          }
+          if (retryDraggableEl && retryContainerEl) {
+            this.#draggableEl = retryDraggableEl as HTMLElement
+            this.#containerEl = retryContainerEl as HTMLElement
+            this.#init()
+          }
+        }, 50)
         return
       }