From fe700d27df3ce24ac6dcaf1cb614aec72d70de13 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Mon, 31 Oct 2022 11:37:07 +1100
Subject: [PATCH] Improves styling

---
 frontend/src/features/tabs/FloatingShowHideButton.scss | 6 ++++++
 frontend/src/features/tabs/InvokeOptionsPanel.scss     | 5 +++--
 frontend/src/features/tabs/InvokeOptionsPanel.tsx      | 1 -
 frontend/src/styles/Mixins/_Variables.scss             | 2 +-
 4 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/frontend/src/features/tabs/FloatingShowHideButton.scss b/frontend/src/features/tabs/FloatingShowHideButton.scss
index ec97c434db..f7cab1966b 100644
--- a/frontend/src/features/tabs/FloatingShowHideButton.scss
+++ b/frontend/src/features/tabs/FloatingShowHideButton.scss
@@ -7,6 +7,12 @@
   z-index: 20;
   padding: 0;
 
+  filter: var(--floating-button-drop-shadow);
+
+  svg {
+    fill: var(--tab-list-text);
+  }
+
   &.left {
     left: 0;
     border-radius: 0 0.5rem 0.5rem 0 !important;
diff --git a/frontend/src/features/tabs/InvokeOptionsPanel.scss b/frontend/src/features/tabs/InvokeOptionsPanel.scss
index f23820e05e..3c568a6ecc 100644
--- a/frontend/src/features/tabs/InvokeOptionsPanel.scss
+++ b/frontend/src/features/tabs/InvokeOptionsPanel.scss
@@ -19,13 +19,14 @@
 }
 
 .options-panel-wrapper {
-  grid-auto-rows: max-content;
+  background-color: var(--background-color);
   height: $app-content-height;
   width: $options-bar-max-width;
   max-width: $options-bar-max-width;
   flex-shrink: 0;
   position: relative;
-  z-index: 20;
+  overflow-y: scroll;
+  @include HideScrollbar;
 
   .options-panel {
     display: flex;
diff --git a/frontend/src/features/tabs/InvokeOptionsPanel.tsx b/frontend/src/features/tabs/InvokeOptionsPanel.tsx
index 8098dde5e6..3ed1c13749 100644
--- a/frontend/src/features/tabs/InvokeOptionsPanel.tsx
+++ b/frontend/src/features/tabs/InvokeOptionsPanel.tsx
@@ -5,7 +5,6 @@ import { useHotkeys } from 'react-hotkeys-hook';
 import { BsPinAngle, BsPinAngleFill } from 'react-icons/bs';
 import { CSSTransition } from 'react-transition-group';
 import { RootState, useAppDispatch, useAppSelector } from '../../app/store';
-
 import useClickOutsideWatcher from '../../common/hooks/useClickOutsideWatcher';
 import {
   OptionsState,
diff --git a/frontend/src/styles/Mixins/_Variables.scss b/frontend/src/styles/Mixins/_Variables.scss
index dde87fbe24..1bac52affa 100644
--- a/frontend/src/styles/Mixins/_Variables.scss
+++ b/frontend/src/styles/Mixins/_Variables.scss
@@ -1,6 +1,6 @@
 // Calc Values
 $app-cutoff: 0px;
-$app-content-height-cutoff: 5rem; // default: 7rem
+$app-content-height-cutoff: calc(70px + 1rem); // default: 7rem
 
 // Usage Variables
 // app