Make hero, gear and builds grids resizable (#208)

* Make hero, gear and builds grids resizable * Fine tune min values
fribbels · Sep 25, 2023 · fe9ee8e · fe9ee8e
1 parent 01b9b3c
commit fe9ee8e
Showing 1 changed file with 12 additions and 8 deletions.
diff --git a/app/css/style.css b/app/css/style.css
@@ -966,6 +966,7 @@ input[type=number]::-webkit-outer-spin-button {
   padding-bottom: 5px;
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
 }
 .tooltipImageLeft {
   height: 14px;
@@ -1491,38 +1492,41 @@ body.dark-theme input {
 }
 .gearGridContainer {
   flex-grow: 2;
-  min-height: 340px;
+  min-height: 350px;
   display: flex;
+  resize: vertical;
+  overflow: hidden;
 }
 #gear-grid {
   width: 100%;
-  height: 100%;
 }
 .gearSectionContainer {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   width: 100%;
-  height: 94%
 }
 .heroesSectionContainer {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   width: 100%;
-  height: 94%
 }
 .heroesTableContainer {
-  min-height: 370px;
-  height: 370px;
+  min-height: 200px;
+  height: 200px;
   flex-grow: 1;
   margin-top: 6px;
+  resize: vertical;
+  overflow: hidden;
 }
 .buildsTableContainer {
-  min-height: 160px;
-  height: 160px;
+  min-height: 193px;
+  height: 193px;
   flex-grow: 0.2;
   margin-bottom: 5px;
+  resize: vertical;
+  overflow: hidden;
 }
 #heroes-table {
   height: 100%;