From 515eb429871f8108c5bb4dc01be16847c2b3ef43 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Tue, 11 Apr 2023 17:38:37 +0300
Subject: [PATCH] Object DMG Calc: Fix weapon images getting squished

---
 .../object-damage-calculator/calculator.css   |  6 +++-
 .../routes/object-damage-calculator.tsx       | 35 +++++++++----------
 2 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/app/features/object-damage-calculator/calculator.css b/app/features/object-damage-calculator/calculator.css
index b2614afb2..8e5a1ca91 100644
--- a/app/features/object-damage-calculator/calculator.css
+++ b/app/features/object-damage-calculator/calculator.css
@@ -52,10 +52,14 @@
   white-space: nowrap;
 }
 
+.object-damage__weapon-image {
+  min-width: 24px;
+}
+
 .object-damage__distance {
   color: var(--text-lighter);
   font-size: var(--fonts-xxs);
-  margin-block-start: var(--s-1);
+  margin-block-start: var(--s-0-5);
 }
 
 .object-damage__receiver-image {
diff --git a/app/features/object-damage-calculator/routes/object-damage-calculator.tsx b/app/features/object-damage-calculator/routes/object-damage-calculator.tsx
index 4c5cde091..c5f9ed6b4 100644
--- a/app/features/object-damage-calculator/routes/object-damage-calculator.tsx
+++ b/app/features/object-damage-calculator/routes/object-damage-calculator.tsx
@@ -246,24 +246,13 @@ function DamageReceiversGrid({
       <div>{children}</div>
       {damagesToReceivers[0]?.damages.map((damage) => (
         <div key={damage.id} className="object-damage__table-header">
-          <div className="stack xs">
-            <div className="stack horizontal sm justify-center items-center">
-              {t(
-                damageTypeTranslationString({
-                  damageType: damage.type,
-                })
-              )}
-              {damage.objectShredder && <Ability ability="OS" size="TINY" />}
-            </div>
-            <div className="text-lighter stack horizontal sm justify-center items-center">
-              <WeaponImage
-                weaponSplId={weapon.id}
-                width={24}
-                height={24}
-                variant="build"
-              />
-              {t(`weapons:MAIN_${weapon.id}`)}
-            </div>
+          <div className="stack horizontal sm justify-center items-center">
+            {t(
+              damageTypeTranslationString({
+                damageType: damage.type,
+              })
+            )}
+            {damage.objectShredder && <Ability ability="OS" size="TINY" />}
           </div>
           <div
             className={clsx("object-damage__distance", {
@@ -272,6 +261,16 @@ function DamageReceiversGrid({
           >
             {t("analyzer:distanceInline", { value: damage.distance })}
           </div>
+          <div className="text-lighter stack horizontal sm justify-center items-center">
+            <WeaponImage
+              weaponSplId={weapon.id}
+              width={24}
+              height={24}
+              variant="build"
+              className="object-damage__weapon-image"
+            />
+            {t(`weapons:MAIN_${weapon.id}`)}
+          </div>
         </div>
       ))}
       {damagesToReceivers.map((damageToReceiver, i) => {