Completed new resizable design

client/public/stylesheets/layout/layout.css

@@ -42,6 +42,7 @@
 
 #unit-control-panel {
 	height: fit-content;
+	width: fit-content;
 	left: 10px;
 	position: absolute;
 	z-index: 9999;
@@ -51,7 +52,7 @@
 	bottom: 20px;
 	font-size: 12px;
 	position: absolute;
-	width: 600px;
+	width: fit-content;
 	z-index: 9999;
 	padding: 24px 30px;
 	display: flex;

client/public/stylesheets/other/toolbar.css

@@ -55,6 +55,7 @@
 	}
 
     #toolbar-container>*:not(:first-child):not(:hover) {
+		height: 52px;
         align-items: center;
         justify-content: center;
         aspect-ratio: 1/1;
@@ -62,8 +63,8 @@
 
 	#toolbar-container>*:not(:first-child):not(:hover)>svg {
         display: block;
-		width: 30px;
-		height: 30px;
+		width: 24px;
+		height: 24px;
         filter: invert();
 	}
 

client/public/stylesheets/panels/unitcontrol.css

@@ -7,14 +7,13 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {
 	flex-direction: row;
 	column-gap: 10px;
 	row-gap: 10px;
-	width: 350px;
 }
 
 #unit-control-panel>div:nth-child(2) {
 	display: flex;
 	flex-direction: column;
 	row-gap: 10px;
-	width: 100%;
+	width: 300px;
 }
 
 #unit-control-panel>*:nth-child(1) {
@@ -29,8 +28,8 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {
 
 	#unit-control-panel>*:nth-child(1) svg {
 		display: flex;
-		width: 30px;
-		height: 30px;
+		width: 24px;
+		height: 24px;
 		filter: invert(100%);
 	}
 

client/public/stylesheets/panels/unitinfo.css

@@ -1,19 +1,41 @@
 #unit-info-panel>* {
 	position: relative;
-	min-height: 100px;
 	bottom: 0px;
 }
+
+#unit-info-panel>*:nth-child(1) {
+	display: flex;
+	width: 24px;
+	height: 24px;
+	margin: 6px;
+	filter: invert(100%);
+}
+
+#unit-info-panel:hover>*:nth-child(1) {
+	display: none;
+}
+
+#unit-info-panel:not(:hover) {
+	width: fit-content;
+	height: fit-content;
+	padding: 10px;
+	margin: 0px;
+}
+
+#unit-info-panel:not(:hover)>*:not(:first-child) {
+	display: none;
+}
  
 #unit-info-panel>.panel-section {
 	border-right: 1px solid #555;
 	padding: 0 30px;
 }
 
-#unit-info-panel>.panel-section:first-child {
+#unit-info-panel>.panel-section:first-of-type {
 	padding-left: 0px;
 }
 
-#unit-info-panel>.panel-section:last-child {
+#unit-info-panel>.panel-section:last-of-type{
 	padding-right: 0px;
 }
 
@@ -27,6 +49,7 @@
 	justify-content: space-between;
 	row-gap: 4px;
 	position: relative;
+	width: 300px;
 }
 
 #unit-label {
@@ -41,7 +64,7 @@
 #unit-name {
 	margin-bottom: 4px;
 	padding: 0px 0;
-	width: 200px;
+	width: 100%;
 	text-overflow: ellipsis;
 	text-wrap: nowrap;
 	overflow: hidden;

client/public/themes/olympus/images/icons/circle-info-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/></svg>

client/src/panels/unitcontrolpanel.ts

@@ -137,10 +137,13 @@ export class UnitControlPanel extends Panel {
             this.#updateRapidControls();  
         });
 
+        window.addEventListener("resize", (e: any) => this.#calculateMaxHeight());
+
         const element = document.getElementById("toolbar-container");
         if (element)
             new ResizeObserver(() => this.#calculateTop()).observe(element);
         
+        this.#calculateMaxHeight()
         this.hide();
     }
 
@@ -480,4 +483,10 @@ export class UnitControlPanel extends Panel {
         if (element)
             this.getElement().style.top = `${element.offsetTop + element.offsetHeight + 10}px`;
     }
+
+    #calculateMaxHeight() {
+        const element = document.getElementById("unit-control-panel-content");
+        if (element)
+            element.style.maxHeight = `${window.innerHeight - this.getElement().offsetTop - 10}px`;
+    }
 }

client/views/panels/unitcontrol.ejs

@@ -1,7 +1,7 @@
 <div id="unit-control-panel"  oncontextmenu="return false;">
     <div class="ol-panel"><img src="resources/theme/images/icons/gamepad-solid.svg" inject-svg></div>
     
-    <div class="ol-panel ol-panel-padding-lg">
+    <div class="ol-panel ol-panel-padding-lg ol-scrollable" id="unit-control-panel-content">
         <h3>Selected Units</h3>
 
         <div id="unit-selection">

client/views/panels/unitinfo.ejs

@@ -1,4 +1,5 @@
 <div id="unit-info-panel" class="ol-panel" oncontextmenu="return false;">
+    <img src="resources/theme/images/icons/circle-info-solid.svg" inject-svg>
 
     <div id="general" class="panel-section">
         <h3 id="unit-name"></h3>