From dbcc845e5fe1ba5c00b4c7d4338498efa64f29e4 Mon Sep 17 00:00:00 2001
From: Fribbels <fribbelsgithub@gmail.com>
Date: Mon, 10 Mar 2025 01:07:21 -0700
Subject: [PATCH] feat: update showcase / optimizer / relic card dimensions

---
 src/lib/characterPreview/CharacterPreview.tsx   |  2 +-
 .../ShowcaseCustomizationSidebar.tsx            |  2 +-
 .../tabs/tabOptimizer/OptimizerBuildPreview.tsx |  2 +-
 src/lib/tabs/tabOptimizer/Sidebar.tsx           | 14 +++++++-------
 .../optimizerForm/grid/OptimizerGrid.jsx        |  2 +-
 .../optimizerForm/grid/optimizerGridColumns.ts  |  2 +-
 .../optimizerForm/layout/FilterContainer.tsx    |  2 +-
 .../optimizerForm/layout/FormCard.tsx           | 17 ++++++-----------
 src/lib/tabs/tabRelics/RelicPreview.tsx         |  2 +-
 src/lib/utils/utils.js                          |  4 ++--
 10 files changed, 22 insertions(+), 27 deletions(-)

diff --git a/src/lib/characterPreview/CharacterPreview.tsx b/src/lib/characterPreview/CharacterPreview.tsx
index ee0937b0e..95c01e45f 100644
--- a/src/lib/characterPreview/CharacterPreview.tsx
+++ b/src/lib/characterPreview/CharacterPreview.tsx
@@ -198,7 +198,7 @@ export function CharacterPreview(props: {
   const finalStats = getShowcaseStats(character, displayRelics, showcaseMetadata)
 
   return (
-    <Flex vertical style={{ width: 1068 }}>
+    <Flex vertical style={{ width: 1082 }}>
       <RelicModal
         selectedRelic={selectedRelic}
         type='edit'
diff --git a/src/lib/characterPreview/ShowcaseCustomizationSidebar.tsx b/src/lib/characterPreview/ShowcaseCustomizationSidebar.tsx
index f16d44075..5da0bbfa8 100644
--- a/src/lib/characterPreview/ShowcaseCustomizationSidebar.tsx
+++ b/src/lib/characterPreview/ShowcaseCustomizationSidebar.tsx
@@ -234,7 +234,7 @@ const ShowcaseCustomizationSidebar = forwardRef<ShowcaseCustomizationSidebarRef,
         gap={16}
         style={{
           position: 'absolute',
-          marginLeft: 1085,
+          marginLeft: 1090,
           width: 130,
         }}
       >
diff --git a/src/lib/tabs/tabOptimizer/OptimizerBuildPreview.tsx b/src/lib/tabs/tabOptimizer/OptimizerBuildPreview.tsx
index 243c4dc29..c87095b87 100644
--- a/src/lib/tabs/tabOptimizer/OptimizerBuildPreview.tsx
+++ b/src/lib/tabs/tabOptimizer/OptimizerBuildPreview.tsx
@@ -43,7 +43,7 @@ export default function OptimizerBuildPreview() {
 
   return (
     <div>
-      <Flex gap={5} id='optimizerBuildPreviewContainer' justify='space-between' style={{ paddingLeft: 1, paddingRight: 1 }}>
+      <Flex gap={6} id='optimizerBuildPreviewContainer' justify='space-between' style={{}}>
         <RelicPreview setEditModalOpen={setEditModalOpen} setSelectedRelic={setSelectedRelic} relic={headRelic} score={headScore}/>
         <RelicPreview setEditModalOpen={setEditModalOpen} setSelectedRelic={setSelectedRelic} relic={handsRelic} score={handsScore}/>
         <RelicPreview setEditModalOpen={setEditModalOpen} setSelectedRelic={setSelectedRelic} relic={bodyRelic} score={bodyScore}/>
diff --git a/src/lib/tabs/tabOptimizer/Sidebar.tsx b/src/lib/tabs/tabOptimizer/Sidebar.tsx
index fe5e56104..b8af86403 100644
--- a/src/lib/tabs/tabOptimizer/Sidebar.tsx
+++ b/src/lib/tabs/tabOptimizer/Sidebar.tsx
@@ -479,13 +479,13 @@ function OptimizerControlsGroup(props: { isFullSize: boolean }) {
       </Flex>
 
       {!props.isFullSize
-        && (
-          <Flex vertical gap={3} style={{ flex: 1, minWidth: 211 }}>
-            <HeaderText>{t('ComputeEngine')/* Compute engine */}</HeaderText>
-            <ComputeEngineSelect/>
-            <ProgressDisplay/>
-          </Flex>
-        )}
+      && (
+        <Flex vertical gap={3} style={{ flex: 1, minWidth: 211 }}>
+          <HeaderText>{t('ComputeEngine')/* Compute engine */}</HeaderText>
+          <ComputeEngineSelect/>
+          <ProgressDisplay/>
+        </Flex>
+      )}
     </Flex>
   )
 }
diff --git a/src/lib/tabs/tabOptimizer/optimizerForm/grid/OptimizerGrid.jsx b/src/lib/tabs/tabOptimizer/optimizerForm/grid/OptimizerGrid.jsx
index be2c58f45..ab2f402fb 100644
--- a/src/lib/tabs/tabOptimizer/optimizerForm/grid/OptimizerGrid.jsx
+++ b/src/lib/tabs/tabOptimizer/optimizerForm/grid/OptimizerGrid.jsx
@@ -30,7 +30,7 @@ const defaultHiddenColumns = [
 ]
 
 export const GRID_DIMENSIONS = {
-  WIDTH: 1227,
+  WIDTH: 1272,
   HEIGHT: 600,
   MIN_HEIGHT: 300,
 }
diff --git a/src/lib/tabs/tabOptimizer/optimizerForm/grid/optimizerGridColumns.ts b/src/lib/tabs/tabOptimizer/optimizerForm/grid/optimizerGridColumns.ts
index 7d8b781d8..97c562fe6 100644
--- a/src/lib/tabs/tabOptimizer/optimizerForm/grid/optimizerGridColumns.ts
+++ b/src/lib/tabs/tabOptimizer/optimizerForm/grid/optimizerGridColumns.ts
@@ -12,7 +12,7 @@ export const DIGITS_5 = 56
 export const DIGITS_6 = 62
 
 export const optimizerTabDefaultGap = 5
-export const panelWidth = 211
+export const panelWidth = 220
 export const defaultPadding = 11
 
 export const optimizerGridOptions = {
diff --git a/src/lib/tabs/tabOptimizer/optimizerForm/layout/FilterContainer.tsx b/src/lib/tabs/tabOptimizer/optimizerForm/layout/FilterContainer.tsx
index 3491da196..1c68d0742 100644
--- a/src/lib/tabs/tabOptimizer/optimizerForm/layout/FilterContainer.tsx
+++ b/src/lib/tabs/tabOptimizer/optimizerForm/layout/FilterContainer.tsx
@@ -15,7 +15,7 @@ export default function FilterContainer(props: { children: ReactElement | ReactE
         backdropFilter: 'blur(5px)',
         border: '1px solid rgba(255, 255, 255, 0.10)',
         WebkitBackdropFilter: 'blur(5px)',
-        width: 1227,
+        width: 1272,
       }}
     >
       {props.children}
diff --git a/src/lib/tabs/tabOptimizer/optimizerForm/layout/FormCard.tsx b/src/lib/tabs/tabOptimizer/optimizerForm/layout/FormCard.tsx
index 34646a586..70848468f 100644
--- a/src/lib/tabs/tabOptimizer/optimizerForm/layout/FormCard.tsx
+++ b/src/lib/tabs/tabOptimizer/optimizerForm/layout/FormCard.tsx
@@ -9,13 +9,13 @@ export const cardShadowNonInset = 'rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rg
 const defaultGap = 5
 
 const smallWidth = panelWidth
-const narrowWidth = 233
-const mediumWidth = 373
+const narrowWidth = 242
+const mediumWidth = 390
 const largeWidth = 1183
 
 const dimsBySize: Record<string, number> = {
   small: smallWidth,
-  narrow: 233,
+  narrow: narrowWidth,
   medium: mediumWidth,
   large: largeWidth,
 }
@@ -44,17 +44,12 @@ export default function FormCard(props: {
       }}
     >
       <Flex
+        vertical
         style={{ width: width }}
+        gap={defaultGap}
         justify={props.justify ?? undefined}
       >
-        <Flex
-          vertical
-          style={{ width: width }}
-          gap={defaultGap}
-          justify={props.justify ?? undefined}
-        >
-          {props.children}
-        </Flex>
+        {props.children}
       </Flex>
     </Flex>
   )
diff --git a/src/lib/tabs/tabRelics/RelicPreview.tsx b/src/lib/tabs/tabRelics/RelicPreview.tsx
index b7be077dc..42c4da605 100644
--- a/src/lib/tabs/tabRelics/RelicPreview.tsx
+++ b/src/lib/tabs/tabRelics/RelicPreview.tsx
@@ -86,7 +86,7 @@ export function RelicPreview(props: {
       hoverable={source != ShowcaseSource.SHOWCASE_TAB && source != ShowcaseSource.BUILDS_MODAL}
       onClick={cardClicked}
       style={{
-        width: 200,
+        width: 207,
         height: 280,
         backgroundColor: showcaseTheme?.cardBackgroundColor,
         borderColor: showcaseTheme?.cardBorderColor,
diff --git a/src/lib/utils/utils.js b/src/lib/utils/utils.js
index 645164f25..1a74af3af 100644
--- a/src/lib/utils/utils.js
+++ b/src/lib/utils/utils.js
@@ -136,8 +136,8 @@ export const Utils = {
       const minDataLength = 1200000
       const maxAttempts = isMobileOrSafari ? 9 : 3
       const scale = 1.5
-      const w = 1068 * scale
-      const h = 856 * scale
+      const w = 1100 * scale
+      const h = 880 * scale
 
       const options = {
         pixelRatio: 1,