Make responsive updates to weapon grid CSS

components/PartyDetails/index.scss

@@ -1,7 +1,8 @@
 .DetailsWrapper {
   display: flex;
   flex-direction: column;
-  margin-top: $unit-4x;
+  margin: $unit-4x auto 0 auto;
+  max-width: $grid-width;
 
   @include breakpoint(phone) {
     padding: 0 $unit;

components/PartySegmentedControl/index.scss

@@ -6,22 +6,30 @@
   justify-content: center;
   margin: 0 auto;
   margin-bottom: $unit * 3;
-  max-width: 760px;
+  max-width: $grid-width;
   position: relative;
 
-  @include breakpoint(phone) {
-    gap: $unit;
-    margin-left: 0;
-    margin-right: 0;
-    padding: 0 $unit;
-    max-width: auto;
-    width: 100%;
+  // prettier-ignore
+  @media only screen 
+    and (max-width: 550px) 
+    and (max-height: 920px) 
+    and (-webkit-min-device-pixel-ratio: 2) {
+      gap: $unit;
+      margin-left: 0;
+      margin-right: 0;
+      padding: 0 $unit;
+      max-width: auto;
+      width: 100%;
   }
 
   .SegmentedControl {
     flex-grow: 1;
 
-    @include breakpoint(phone) {
+    // prettier-ignore
+    @media only screen 
+    and (max-width: 550px) 
+    and (max-height: 920px) 
+    and (-webkit-min-device-pixel-ratio: 2) {
       flex-grow: 1;
       width: 100%;
       display: grid;
@@ -34,13 +42,18 @@
   color: #888;
   display: flex;
   font-weight: $normal;
-  gap: 8px;
+  gap: $unit;
   line-height: 34px;
   height: 100%;
   position: absolute;
   right: 0px;
+  top: 1px;
 
-  @include breakpoint(phone) {
+  // prettier-ignore
+  @media only screen 
+    and (max-width: 550px) 
+    and (max-height: 920px) 
+    and (-webkit-min-device-pixel-ratio: 2) {
     position: static;
 
     .Text {

components/WeaponGrid/index.scss

@@ -1,52 +1,50 @@
-#MainGrid {
+#WeaponGrid {
   display: flex;
   justify-content: center;
 
-  @include breakpoint(phone) {
+  #MainGrid {
+    aspect-ratio: 2/1;
     display: grid;
-    grid-template-columns: 1fr auto;
-  }
-
-  .grid_weapons {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    grid-template-rows: 1fr 1fr 1fr;
-    margin: 0;
-    padding: 0;
-    max-width: 528px;
-  }
-}
-
-#MainGrid,
-#ExtraGrid {
-  .grid_weapons > * {
-    margin-bottom: $unit-3x;
-    margin-right: $unit-3x;
+    gap: $unit-3x;
+    grid-template-columns: 1.278fr 3fr;
+    justify-items: center;
+    grid-template-areas:
+      'mainhand grid'
+      'mainhand grid'
+      'mainhand grid';
+    max-width: $grid-width;
 
     @include breakpoint(tablet) {
-      margin-bottom: $unit-2x;
-      margin-right: $unit-2x;
+      gap: $unit-2x;
     }
 
+    @include breakpoint(phone) {
+      gap: $unit;
+    }
+  }
+
+  .Weapons {
+    display: grid; /* make the right-images container a grid */
+    grid-template-columns: repeat(
+      3,
+      minmax(0, 1fr)
+    ); /* create 3 columns, each taking up 1 fraction */
+    grid-template-rows: repeat(
+      3,
+      1fr
+    ); /* create 3 rows, each taking up 1 fraction */
+    gap: $unit-3x;
+
     @include breakpoint(tablet) {
-      margin-bottom: $unit;
-      margin-right: $unit;
+      gap: $unit-2x;
     }
 
-    &:nth-last-child(-n + 3) {
-      margin-bottom: 0;
+    @include breakpoint(phone) {
+      gap: $unit;
+    }
+
+    li {
+      list-style: none;
     }
   }
-
-  .grid_weapons > *:nth-child(3n + 3) {
-    margin-right: 0;
-  }
-
-  .grid_weapons > li {
-    list-style: none;
-  }
-}
-
-#ExtraWeapons #grid_weapons > * {
-  margin-bottom: 0;
 }

components/WeaponGrid/index.tsx

@@ -361,7 +361,7 @@ const WeaponGrid = (props: Props) => {
       {incompatibleAlert()}
       <div id="MainGrid">
         {mainhandElement}
-        <ul className="grid_weapons">{weaponGridElement}</ul>
+        <ul className="Weapons">{weaponGridElement}</ul>
       </div>
 
       {(() => {

components/WeaponUnit/index.scss

@@ -1,9 +1,11 @@
 .WeaponUnit {
+  align-items: center;
   display: flex;
   flex-direction: column;
-  gap: 4px;
-  min-height: 139px;
+  gap: $unit-half;
   position: relative;
+  width: 100%;
+  height: auto;
 
   @include breakpoint(tablet) {
     min-height: auto;
@@ -25,25 +27,14 @@
   }
 
   &.mainhand {
-    margin-right: $unit-3x;
-    max-width: 200px;
-
-    @include breakpoint(tablet) {
-      margin-right: $unit-2x;
-    }
-
-    @include breakpoint(phone) {
-      margin-right: $unit-2x;
-      margin-right: $unit;
-    }
+    display: flex;
 
     &.editable .WeaponImage:hover {
       transform: $scale-tall;
     }
 
     .WeaponImage {
-      aspect-ratio: 200 / 418;
-      width: 200px;
+      width: 100%;
       height: auto;
 
       .Awakening {
@@ -62,20 +53,13 @@
           height: auto;
         }
       }
-
-      @include breakpoint(tablet) {
-        width: 25vw;
-      }
     }
   }
 
   &.grid {
-    max-width: 160px;
-
     .WeaponImage {
-      aspect-ratio: 160 / 92;
       list-style-type: none;
-      width: 160px;
+      width: 100%;
       height: auto;
 
       .Awakening {
@@ -94,10 +78,6 @@
           height: auto;
         }
       }
-
-      @include breakpoint(tablet) {
-        width: 20vw;
-      }
     }
   }
 
@@ -189,4 +169,10 @@
       }
     }
   }
+
+  .WeaponName {
+    @include breakpoint(phone) {
+      font-size: $font-tiny;
+    }
+  }
 }

components/WeaponUnit/index.tsx

@@ -395,9 +395,7 @@ const WeaponUnit = (props: Props) => {
       gridWeapon.id &&
       canBeModified(gridWeapon) ? (
         <WeaponModal gridWeapon={gridWeapon}>
-          <div>
-            <Button accessoryIcon={<SettingsIcon />} />
-          </div>
+          <Button accessoryIcon={<SettingsIcon />} />
         </WeaponModal>
       ) : (
         ''

styles/variables.scss

@@ -13,6 +13,8 @@ $laptop: 1280px;
 $tablet: 768px;
 $phone: 375px;
 
+$grid-width: 720px;
+
 // Legacy
 $medium-screen: 768px;