Slider UI update

Author: vishnuv688

packages/app/src/components/browser/snapshot.ts

@@ -88,9 +88,6 @@ export class DevtoolsBrowser extends Element {
       return
     }
 
-    this.section.style.width = 'auto'
-    this.section.style.height = 'auto'
-
     this.iframe.removeAttribute('style')
     const viewportWidth = metadata.viewport.width
     const viewportHeight = metadata.viewport.height
@@ -302,7 +299,7 @@ export class DevtoolsBrowser extends Element {
     }
 
     return html`
-      <section class="w-full bg-sideBarBackground rounded-t-md shadow-md">
+      <section class="w-full h-full bg-sideBarBackground rounded-t-md shadow-md">
         <header class="flex block mx-2">
           <div class="frame-dot bg-notificationsErrorIconForeground"></div>
           <div class="frame-dot bg-notificationsWarningIconForeground"></div>
@@ -313,7 +310,7 @@ export class DevtoolsBrowser extends Element {
           </div>
         </header>
         ${this.mutations && this.mutations.length
-          ? html`<iframe class="origin-top-left"></iframe>`
+          ? html`<iframe class="origin-top-left h-full w-full"></iframe>`
           : html`<wdio-devtools-placeholder style="height: 100%"></wdio-devtools-placeholder>`
         }
       </section>

packages/app/src/components/workbench.ts

@@ -85,7 +85,7 @@ export class DevtoolsWorkbench extends Element {
   horizontalResizerWindow?: HTMLElement
 
   render() {
-    const heightWorkbench = this.#toolbarCollapsed ? '' : 'h-[70%]'
+    const heightWorkbench = this.#toolbarCollapsed ? 'h-full' : 'h-[70%]'
     const styleWorkbench = this.#toolbarCollapsed ? '' : this.#dragVertical.getPosition()
     return html`
       <section data-horizontal-resizer-window class="flex w-full ${heightWorkbench} flex-1" style="${styleWorkbench}">
@@ -117,7 +117,7 @@ export class DevtoolsWorkbench extends Element {
         <section class="basis-auto text-gray-500 flex items-center justify-center flex-grow">
           <wdio-devtools-browser></wdio-devtools-browser>
         </section>
-        ${!this.#workbenchSidebarCollapsed ? this.#dragHorizontal.getSlider() : nothing}
+      ${this.#dragHorizontal.getSlider(this.#workbenchSidebarCollapsed ? 'hidden' : this.#toolbarCollapsed ? 'h-full' : 'h-[70%]')}
       </section>
       <wdio-devtools-tabs cacheId="activeWorkbenchTab" class="border-t-[1px] border-t-panelBorder ${this.#toolbarCollapsed ? 'hidden' : ''}">
         <wdio-devtools-tab label="Source">
@@ -148,7 +148,7 @@ export class DevtoolsWorkbench extends Element {
         `
         : nothing
       }
-      ${!this.#toolbarCollapsed ? this.#dragVertical.getSlider() : nothing}
+      ${this.#dragVertical.getSlider(this.#toolbarCollapsed ? 'hidden' : '')}
     `
   }
 }

packages/app/src/utils/DragController.ts

@@ -215,7 +215,7 @@ export class DragController implements ReactiveController {
         ? 'top'
         : ''
     className += this.#options.direction === Direction.horizontal
-      ? ' cursor-col-resize left-0 h-full w-[10px]'
+      ? ' cursor-col-resize left-0 w-[10px]'
       : this.#options.direction === Direction.vertical
         ? ' cursor-row-resize top-0 w-full h-[10px]'
         : ''
@@ -225,7 +225,7 @@ export class DragController implements ReactiveController {
         data-draggable-id=${this.#id}
         data-dragging=${this.#state}
         style=${styleMap({ [anchor]: `${this.#getPosition() - 3}px` })}
-        class="absolute ${className}"></button>
+        class="absolute z-10 ${className}"></button>
     `
   }