made info-row responsive and prepared the rest

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

@@ -8,7 +8,8 @@
   @include width-medium {
     width: 1225px;
   }
-  @include width-large {
-    width: 1436px;
-  }
+  // Width large is probably too large
+  // @include width-large {
+  //   width: 1436px;
+  // }
 }

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

@@ -14,7 +14,7 @@
     <div class="tables">
       <div class="life-weapon-container">
         <life></life>
-        <app-weapons-container></app-weapons-container>
+        <weapons-container></weapons-container>
       </div>
 
       <ability-panel></ability-panel>

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

@@ -3,25 +3,24 @@
 .dashboard-container {
   display: flex;
   gap: 1rem;
+  // TODO: Add to center
   // margin: auto;
   padding: 1.5rem 1.5rem 0 1.5rem;
   border: 3px solid red;
+  width: 1280px;
+  height: 840px;
 
-  @include width-xsmall {
-    width: 1280px;
-  }
   @include width-small {
     width: 1494px;
   }
   @include width-medium {
     width: 1707px;
   }
-  @include width-large {
-    width: 1920px;
-  }
-  @include height-xsmall {
-    height: 840px;
-  }
+
+  // Width large is probably too large
+  // @include width-large {
+  //   width: 1920px;
+  // }
   @include height-small {
     height: 910px;
   }
@@ -61,17 +60,47 @@
   gap: 1rem;
   width: 500px;
 
-  @media (height < 934px) {
-    gap: 1.5rem;
+  // @include width-small {
+  //   width: 614px;
+  // }
+  @include width-medium {
+    width: 600px;
   }
 }
 
 ability-panel {
+  z-index: 10000;
+  border: 2px solid purple;
   width: 495px;
+  height: 702px;
+
+  @include width-medium {
+    width: 609px;
+  }
+
+  @include height-small {
+    height: 772px;
+  }
+  @include height-medium {
+    height: 839px;
+  }
+  @include height-large {
+    height: 917px;
+  }
 }
 
-.weapon {
+weapons-container {
+  border: 2px solid green;
   width: 100%;
-  min-height: 50%;
-  max-height: 70%;
+  height: 515px;
+
+  @include height-small {
+    height: 585px;
+  }
+  @include height-medium {
+    height: 652px;
+  }
+  @include height-large {
+    height: 730px;
+  }
 }

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

@@ -1,6 +1,6 @@
 import { Component, ViewChild } from '@angular/core';
 @Component({
-  selector: 'app-weapons-container',
+  selector: 'weapons-container',
   templateUrl: './weapons-container.component.html',
   styleUrls: ['./weapons-container.component.scss'],
 })

src/styles.scss

@@ -6,6 +6,9 @@
 @import url("./helpers.scss");
 @import url("./button-styles.scss");
 @import url("./colors.scss");
+// @import url("./responsive.scss");
+
+@import "responsive";
 
 // Hide scrollbar for Chrome, Safari and Opera
 *::-webkit-scrollbar {
@@ -17,23 +20,6 @@
   scrollbar-width: none;
   -ms-overflow-style: none; // IE and Edge
 }
-// Responsive styles
-.responsive-small {
-  display: none;
-}
-
-.responsive-large {
-  display: block;
-}
-
-@media (width < 1640px) {
-  .responsive-large {
-    display: none;
-  }
-  .responsive-small {
-    display: block;
-  }
-}
 
 // LISTS
 
@@ -154,11 +140,29 @@ input[type="checkbox"] {
   box-shadow: var(--shadow);
   border-radius: 10px;
   height: 6rem;
-  @media (width > 1699px) {
+  width: 7rem;
+
+  @include width-medium {
     width: 10rem;
   }
-  @media (width < 1640px) {
-    width: 7rem;
+}
+// Responsive styles
+.responsive-small {
+  display: block;
+}
+
+.responsive-large {
+  display: none;
+}
+.responsive-large {
+  @include width-medium {
+    display: block;
+  }
+}
+
+.responsive-small {
+  @include width-medium {
+    display: none;
   }
 }