From 1120c8c237d331b6922a0ece0a07e6436fffd4aa Mon Sep 17 00:00:00 2001
From: PeekabooSteam <matthew.lindley001+github@gmail.com>
Date: Sun, 12 Mar 2023 18:57:04 +0000
Subject: [PATCH] Fixed vertical scroll on icon menu.

---
 client/public/stylesheets/contextmenu.css | 45 +++++++++++++----------
 client/public/stylesheets/olympus.css     |  6 ++-
 2 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/client/public/stylesheets/contextmenu.css b/client/public/stylesheets/contextmenu.css
index 674885fa..e29a39f9 100644
--- a/client/public/stylesheets/contextmenu.css
+++ b/client/public/stylesheets/contextmenu.css
@@ -64,7 +64,6 @@
 #contextmenu>div:nth-child(n+3){
     display: flex;
     flex-direction: column;
-    
     justify-content: space-between;
     align-items: center;
     row-gap: 5px;
@@ -76,6 +75,12 @@
     align-self: stretch;
 }
 
+
+
+#aircraft-spawn-menu .ol-select.is-open .ol-select-options {
+    max-height: 300px;
+}
+
 #aircraft-spawn-menu>button,
 #ground-unit-spawn-menu>button {
     width: 100%;
@@ -111,39 +116,39 @@
     border-bottom-right-radius: var(--border-radius-sm);
 }
 
-[data-active-coalition=blue].toggle-fill,
-[data-active-coalition=blue].unit-spawn-button:hover, 
-[data-active-coalition=blue].unit-spawn-button.is-open, 
-[data-active-coalition=blue]#active-coalition-label,
-[data-active-coalition=blue].deploy-unit-button
+[data-active-coalition="blue"].toggle-fill,
+[data-active-coalition="blue"].unit-spawn-button:hover, 
+[data-active-coalition="blue"].unit-spawn-button.is-open, 
+[data-active-coalition="blue"]#active-coalition-label,
+[data-active-coalition="blue"].deploy-unit-button
 {
     background-color: var(--primary-blue)
 }
 
-[data-active-coalition=red].toggle-fill,
-[data-active-coalition=red].unit-spawn-button:hover, 
-[data-active-coalition=red].unit-spawn-button.is-open, 
-[data-active-coalition=red]#active-coalition-label,
-[data-active-coalition=red].deploy-unit-button
+[data-active-coalition="red"].toggle-fill,
+[data-active-coalition="red"].unit-spawn-button:hover, 
+[data-active-coalition="red"].unit-spawn-button.is-open, 
+[data-active-coalition="red"]#active-coalition-label,
+[data-active-coalition="red"].deploy-unit-button
 {
     background-color: var(--primary-red)
 }
 
-[data-active-coalition=blue].deploy-unit-button:disabled {
+[data-active-coalition="blue"].deploy-unit-button:disabled {
     background-color: transparent;
     border: 1px solid var(--primary-blue);
     cursor: default;
 }
-[data-active-coalition=red].deploy-unit-button:disabled {
+[data-active-coalition="red"].deploy-unit-button:disabled {
     background-color: transparent;
     border: 1px solid var(--primary-red);
     cursor: default;
 }
 
-[data-active-coalition=blue]#active-coalition-label::after {
+[data-active-coalition="blue"]#active-coalition-label::after {
     content: "Create blue unit";
 }
-[data-active-coalition=red]#active-coalition-label::after {
+[data-active-coalition="red"]#active-coalition-label::after {
     content: "Create red unit";
 }
 
@@ -194,10 +199,10 @@
     content: "";
 }
 
-[data-smoke-color=red]::before{ background-color: red; }
-[data-smoke-color=white]::before{ background-color: white; }
-[data-smoke-color=blue]::before{ background-color: blue; }
-[data-smoke-color=green]::before{ background-color: green; }
-[data-smoke-color=orange]::before{ background-color: orange; }
+[data-smoke-color="red"]::before{ background-color: red; }
+[data-smoke-color="white"]::before{ background-color: white; }
+[data-smoke-color="blue"]::before{ background-color: blue; }
+[data-smoke-color="green"]::before{ background-color: green; }
+[data-smoke-color="orange"]::before{ background-color: orange; }
 
 
diff --git a/client/public/stylesheets/olympus.css b/client/public/stylesheets/olympus.css
index 41cdabf6..eb323f3b 100644
--- a/client/public/stylesheets/olympus.css
+++ b/client/public/stylesheets/olympus.css
@@ -156,15 +156,17 @@ button[disabled="disabled"] {
 }
 
 
-.ol-select.is-open>.ol-select-options {
+.ol-select.is-open > .ol-select-options {
     max-height: fit-content;
     overflow: visible;
     overflow-y: auto;
     padding: 8px 0;
-    max-height: 300px;
     min-width: 100%;
 }
 
+
+
+
 .ol-select>.ol-select-options>div {
     background-color: var(--background-grey);
     box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);