Reworked panel bar to allow full area drag-to-resize.

Signed-off-by: ubi de feo <[email protected]>

Author: ubidefeo

ui/arduino/main.css

@@ -342,6 +342,8 @@ button.small .icon {
   flex-grow: 2;
   height: 100%;
   cursor: grab;
+  position: absolute;
+  width: 100%;
 }
 
 #panel #drag-handle:active {
@@ -357,6 +359,7 @@ button.small .icon {
   gap: 10px;
   align-self: stretch;
   background: #008184;
+  position: relative;
 }
 
 .panel-bar #connection-status {
@@ -372,6 +375,9 @@ button.small .icon {
   filter: invert(1);
 }
 
+.panel-bar .spacer {
+  flex-grow: 1;
+}
 .panel-bar .term-operations {
   transition: opacity 0.15s;
   display: flex;

ui/arduino/views/components/repl-panel.js

@@ -22,6 +22,7 @@ function ReplPanel(state, emit) {
           <img src="media/connect.svg" />
           <div>${state.isConnected ? 'Connected to ' + state.connectedPort : ''}</div>
         </div>
+        <div class="spacer"></div>
         <div id="drag-handle"
           onmousedown=${() => emit('start-resizing-panel')}
           onmouseup=${() => emit('stop-resizing-panel')}
@@ -34,6 +35,7 @@ function ReplPanel(state, emit) {
           size: 'small',
           onClick: onToggle
         })}
+        
       </div>
       <div class=${terminalDisabledClass}>
         ${state.cache(XTerm, 'terminal').render()}