Improves styling

frontend/src/features/tabs/FloatingShowHideButton.scss

@@ -6,10 +6,13 @@
   transform: translate(0, -50%);
   z-index: 20;
   padding: 0;
-  min-width: 2rem !important;
 
   filter: var(--floating-button-drop-shadow);
 
+  svg {
+    fill: var(--tab-list-text);
+  }
+
   &.left {
     left: 0;
     border-radius: 0 0.5rem 0.5rem 0 !important;

frontend/src/features/tabs/InvokeOptionsPanel.scss

@@ -20,19 +20,19 @@
 
 .options-panel-wrapper {
   background-color: var(--background-color);
-  grid-auto-rows: max-content;
   height: $app-content-height;
   width: $options-bar-max-width;
   max-width: $options-bar-max-width;
   flex-shrink: 0;
   position: relative;
+  overflow-y: scroll;
+  @include HideScrollbar;
 
   .options-panel {
     display: flex;
     flex-direction: column;
     row-gap: 1rem;
     height: 100%;
-    overflow-y: scroll;
     @include HideScrollbar;
   }
 
@@ -42,13 +42,13 @@
     position: fixed;
     top: 0;
     left: 0;
-    box-shadow: 0 0 1rem var(--text-color-a3);
+    filter: var(--floating-panel-drop-shadow);
     width: calc($options-bar-max-width + 2rem);
     max-width: calc($options-bar-max-width + 2rem);
     height: 100%;
 
-    .options-panel {
-      padding: 1rem;
+    .options-panel-margin {
+      margin: 1rem;
     }
   }
 

frontend/src/features/tabs/InvokeOptionsPanel.tsx

@@ -11,7 +11,6 @@ import {
 import { BsPinAngle, BsPinAngleFill } from 'react-icons/bs';
 import { CSSTransition } from 'react-transition-group';
 import { RootState, useAppDispatch, useAppSelector } from '../../app/store';
-import IAIIconButton from '../../common/components/IAIIconButton';
 import useClickOutsideWatcher from '../../common/hooks/useClickOutsideWatcher';
 import {
   OptionsState,
@@ -120,28 +119,29 @@ const InvokeOptionsPanel = (props: Props) => {
           !shouldPinOptionsPanel ? cancelCloseOptionsPanelTimer : undefined
         }
       >
-        <Tooltip label="Pin Options Panel">
+        <div className="options-panel-margin">
           <div
-            className="options-panel-pin-button"
-            data-selected={shouldPinOptionsPanel}
-            onClick={handleClickPinOptionsPanel}
+            className="options-panel"
+            ref={optionsPanelContainerRef}
+            onMouseLeave={(e: MouseEvent<HTMLDivElement>) => {
+              if (e.target !== optionsPanelContainerRef.current) {
+                cancelCloseOptionsPanelTimer();
+              } else {
+                !shouldPinOptionsPanel && setCloseOptionsPanelTimer();
+              }
+            }}
           >
-            {shouldPinOptionsPanel ? <BsPinAngleFill /> : <BsPinAngle />}
+            <Tooltip label="Pin Options Panel">
+              <div
+                className="options-panel-pin-button"
+                data-selected={shouldPinOptionsPanel}
+                onClick={handleClickPinOptionsPanel}
+              >
+                {shouldPinOptionsPanel ? <BsPinAngleFill /> : <BsPinAngle />}
+              </div>
+            </Tooltip>
+            {children}
           </div>
-        </Tooltip>
-
-        <div
-          className="options-panel"
-          ref={optionsPanelContainerRef}
-          onMouseLeave={(e: MouseEvent<HTMLDivElement>) => {
-            if (e.target !== optionsPanelContainerRef.current) {
-              cancelCloseOptionsPanelTimer();
-            } else {
-              !shouldPinOptionsPanel && setCloseOptionsPanelTimer();
-            }
-          }}
-        >
-          {children}
         </div>
       </div>
     </CSSTransition>

frontend/src/features/tabs/InvokeTabs.scss

@@ -5,6 +5,7 @@
   grid-template-columns: min-content auto;
   column-gap: 1rem;
   // height: 100%;
+  height: $app-content-height;
 }
 
 .app-tabs-list {

frontend/src/styles/Mixins/_Variables.scss

@@ -1,6 +1,6 @@
 // Calc Values
 $app-cutoff: 0px;
-$app-content-height-cutoff: 4rem; // default: 7rem
+$app-content-height-cutoff: calc(70px + 1rem); // default: 7rem
 
 // Usage Variables
 // app