added responsivenes to to the whole dasboard. Next are side panels and modals

src/app/journal/journal-stats/ability-panel/ability-panel.component.scss

@@ -3,12 +3,9 @@
   background-color: var(--field-background-color);
   box-shadow: var(--shadow);
   border-radius: 10px;
-  height: 48.125rem;
   display: flex;
   flex-direction: column;
-  @media (height < 934px) {
-    height: 43.625rem;
-  }
+  height: 100%;
 }
 
 .tab-row {

src/app/journal/journal-stats/ability-panel/ability-table/ability-table.component.scss

@@ -3,7 +3,7 @@
 }
 
 .item-list {
-  height: 40rem;
+  height: calc(100% - 5rem);
 }
 
 .item {

src/app/journal/journal-stats/ability-panel/trait-table/trait-table.component.scss

@@ -9,7 +9,7 @@
 }
 
 .item-list {
-  height: 40rem;
+  height: calc(100% - 5rem);
 }
 
 .item {

src/app/journal/journal-stats/journal-stats.component.scss

@@ -69,8 +69,6 @@
 }
 
 ability-panel {
-  z-index: 10000;
-  border: 2px solid purple;
   width: 495px;
   height: 702px;
 
@@ -90,7 +88,6 @@ ability-panel {
 }
 
 weapons-container {
-  border: 2px solid green;
   width: 100%;
   height: 515px;
 

src/app/journal/journal-stats/weapons-container/weapons-container.component.scss

@@ -3,12 +3,9 @@
   background-color: var(--field-background-color);
   box-shadow: var(--shadow);
   border-radius: 10px;
-  height: 35.5rem;
   display: flex;
   flex-direction: column;
-  @media (height < 934px) {
-    height: 31.5rem;
-  }
+  height: 100%;
 }
 
 .tab-button {
@@ -55,7 +52,3 @@ spell-table {
   // 100% - tabbar height
   height: calc(100% - 3rem);
 }
-
-// .button-margin {
-//   margin: 1rem 0rem;
-// }