From cfbb649b1c3055173dc899586684e587f13e0984 Mon Sep 17 00:00:00 2001
From: Ben Hollis <ben@benhollis.net>
Date: Sat, 4 Jan 2025 16:46:17 -0800
Subject: [PATCH] Remove .phone-portrait class

---
 src/app/inventory-page/PhoneStores.tsx  |  7 +------
 src/app/store-stats/CharacterStats.scss | 27 +++++++++++++------------
 src/app/store-stats/StoreStats.m.scss   | 12 ++++++-----
 3 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/src/app/inventory-page/PhoneStores.tsx b/src/app/inventory-page/PhoneStores.tsx
index e580eee2d2..d9d73d64f6 100644
--- a/src/app/inventory-page/PhoneStores.tsx
+++ b/src/app/inventory-page/PhoneStores.tsx
@@ -5,7 +5,6 @@ import { DimStore } from 'app/inventory/store-types';
 import StoreStats from 'app/store-stats/StoreStats';
 import { wrap } from 'app/utils/collections';
 import { useEventBusListener } from 'app/utils/hooks';
-import clsx from 'clsx';
 import { PanInfo, motion } from 'motion/react';
 import { useCallback, useState } from 'react';
 import { InventoryBucket, InventoryBuckets } from '../inventory/inventory-buckets';
@@ -110,11 +109,7 @@ export default function PhoneStores({
   };
 
   return (
-    <div
-      className={clsx(styles.content, 'phone-portrait')}
-      role="main"
-      aria-label={t('Header.Inventory')}
-    >
+    <div className={styles.content} role="main" aria-label={t('Header.Inventory')}>
       <HeaderShadowDiv className="store-row store-header">
         <PhoneStoresHeader
           selectedStore={selectedStore}
diff --git a/src/app/store-stats/CharacterStats.scss b/src/app/store-stats/CharacterStats.scss
index 43d969edd5..806a46e4d0 100644
--- a/src/app/store-stats/CharacterStats.scss
+++ b/src/app/store-stats/CharacterStats.scss
@@ -12,6 +12,16 @@
     opacity: 1;
     gap: 4px;
 
+    @include phone-portrait {
+      margin-left: auto;
+      margin-right: auto;
+      align-items: center;
+      .stat-row {
+        width: 100%;
+        justify-content: center;
+      }
+    }
+
     > div {
       flex: 1;
       display: flex;
@@ -52,16 +62,6 @@
       }
     }
 
-    .phone-portrait & {
-      margin-left: auto;
-      margin-right: auto;
-      align-items: center;
-      .stat-row {
-        width: 100%;
-        justify-content: center;
-      }
-    }
-
     &.destiny2 {
       flex-direction: column;
       gap: 0;
@@ -110,14 +110,15 @@
         flex: 0;
         font-size: 11px;
         color: var(--theme-header-characters-txt);
+
+        @include phone-portrait {
+          font-size: 12px;
+        }
         &.boostedValue {
           color: $stat-modded;
           font-weight: bold;
           text-shadow: rgba(0, 0, 0, 0.5) 0 0 2px;
         }
-        .phone-portrait & {
-          font-size: 12px;
-        }
       }
     }
 
diff --git a/src/app/store-stats/StoreStats.m.scss b/src/app/store-stats/StoreStats.m.scss
index fada559219..b3c9e3f7c6 100644
--- a/src/app/store-stats/StoreStats.m.scss
+++ b/src/app/store-stats/StoreStats.m.scss
@@ -1,3 +1,5 @@
+@use '../variables.scss' as *;
+
 .vaultStats {
   max-width: 230px;
   display: grid;
@@ -9,13 +11,13 @@
   margin-top: 9px;
   color: var(--theme-header-characters-txt);
 
-  img {
-    justify-self: center;
-  }
-
-  :global(.phone-portrait) & {
+  @include phone-portrait {
     flex: 1;
     margin-left: auto;
     margin-right: auto;
   }
+
+  img {
+    justify-self: center;
+  }
 }