Tailwind and major UI updates

Author: vishnuv688

packages/app/package.json

@@ -29,6 +29,12 @@
     "@tailwindcss/postcss": "^4.1.12",
     "@wdio/devtools-service": "workspace:*",
     "@wdio/reporter": "9.18.0",
-    "postcss": "^8.5.6"
+    "autoprefixer": "^10.4.21",
+    "postcss": "^8.5.6",
+    "rollup": "^4.47.0",
+    "stylelint": "^16.24.0",
+    "stylelint-config-recommended": "^17.0.0",
+    "stylelint-config-tailwindcss": "^1.0.0",
+    "tailwindcss": "~3.4.17"
   }
 }

packages/app/postcss.config.cjs

@@ -1,7 +1,6 @@
-// eslint-disable-next-line no-undef
 module.exports = {
   plugins: {
-    '@tailwindcss/postcss': {},
+    tailwindcss: {},
     autoprefixer: {},
   },
 }

packages/app/src/components/workbench.ts

@@ -35,7 +35,6 @@ export class DevtoolsWorkbench extends Element {
       color: var(--vscode-foreground);
       background-color: var(--vscode-editor-background);
       position: relative;
-      margin-left: 10px;
     }
   `]
 
@@ -92,7 +91,7 @@ export class DevtoolsWorkbench extends Element {
       ? (() => {
           const pos = this.#dragHorizontal.getPosition() // e.g. "flex-basis: 300px;"
           const m = pos.match(/flex-basis:\s*([\d.]+)px/)
-          const w = m ? m[1] : '260'
+          const w = m ? m[1] : MIN_METATAB_WIDTH
           // Keep drag-resize (flex-basis) but stop auto-expansion
           return `${pos}; flex:0 0 auto; min-width:${w}px; max-width:${w}px;`
         })()
@@ -105,9 +104,7 @@ export class DevtoolsWorkbench extends Element {
               <wdio-devtools-actions></wdio-devtools-actions>
             </wdio-devtools-tab>
             <wdio-devtools-tab label="Metadata">
-               <div class="pl-[3px]">
-                <wdio-devtools-metadata></wdio-devtools-metadata>
-              </div>
+              <wdio-devtools-metadata></wdio-devtools-metadata>
             </wdio-devtools-tab>
             <nav class="ml-auto" slot="actions">
               <button @click="${() => this.#toggle('workbenchSidebar')}" class="flex h-10 w-10 items-center justify-center pointer ml-auto hover:bg-toolbarHoverBackground">
@@ -129,7 +126,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.#dragHorizontal.getSlider(this.#workbenchSidebarCollapsed ? 'hidden' : this.#toolbarCollapsed ? 'h-full' : 'h-[70%]')}
+      ${!this.#workbenchSidebarCollapsed ? this.#dragHorizontal.getSlider() : nothing}
       </section>
       <wdio-devtools-tabs cacheId="activeWorkbenchTab" class="border-t-[1px] border-t-panelBorder ${this.#toolbarCollapsed ? 'hidden' : ''}">
         <wdio-devtools-tab label="Source">
@@ -160,7 +157,7 @@ export class DevtoolsWorkbench extends Element {
         `
         : nothing
       }
-      ${this.#dragVertical.getSlider(this.#toolbarCollapsed ? 'hidden' : '')}
+      ${!this.#toolbarCollapsed ? this.#dragVertical.getSlider() : nothing}
     `
   }
 }

packages/app/src/utils/DragController.ts

@@ -226,7 +226,7 @@ export class DragController implements ReactiveController {
         ? 'top'
         : ''
     className += this.#options.direction === Direction.horizontal
-      ? ' cursor-col-resize left-0 w-[10px]'
+      ? ' cursor-col-resize left-0 h-full w-[10px]'
       : this.#options.direction === Direction.vertical
         ? ' cursor-row-resize top-0 w-full h-[10px]'
         : ''

packages/service/package.json

@@ -40,11 +40,11 @@
     "@types/ws": "^8.18.1",
     "@wdio/globals": "9.17.0",
     "@wdio/protocols": "9.16.2",
-    "devtools": "^8.42.0",
     "vite-plugin-dts": "^4.5.4"
   },
   "peerDependencies": {
     "@wdio/protocols": "9.16.2",
+    "devtools": "^8.42.0",
     "webdriverio": "^9.19.1"
   }
 }