From 34998ad9dd82b67482a88c417cb2bc8eeef9c3b8 Mon Sep 17 00:00:00 2001
From: XP <smurfs@smurfs.verymad.net>
Date: Sun, 3 Nov 2024 14:25:15 -0800
Subject: [PATCH] Fix item name width not shrinking correctly

---
 packages/common-ui/styles/common.less         | 42 ++++++++++---------
 .../frontend/src/scripts/components/items.ts  | 12 +++---
 packages/xivmath/src/xivconstants.ts          |  2 +-
 3 files changed, 30 insertions(+), 26 deletions(-)

diff --git a/packages/common-ui/styles/common.less b/packages/common-ui/styles/common.less
index 00e0bf7a..4e85e30d 100644
--- a/packages/common-ui/styles/common.less
+++ b/packages/common-ui/styles/common.less
@@ -1240,8 +1240,16 @@ table.gear-items-table, table.food-items-table {
     min-width: 23px;
   }
 
-  td[col-id='itemname'] {
-    max-width: 1px;
+  // TODO: was this needed for some other reason? This is breaking shrinkability of item names.
+  //td[col-id='itemname'] {
+  //  max-width: 1px;
+  //}
+  th[col-id='itemname'] {
+    width: max-content;
+    min-width: max-content;
+    max-width: unset;
+    margin-left: -73px;
+    position: relative;
   }
 
   td[col-id='mats'], td[col-id='wd'] {
@@ -1275,6 +1283,7 @@ table.gear-items-table, table.food-items-table {
           flex-grow: 99;
           overflow: hidden;
           text-overflow: ellipsis;
+          width: 1px;
         }
 
         .remove-item-button, .remove-food-button {
@@ -2564,23 +2573,18 @@ gear-set-viewer {
       }
     }
 
-    //.item-name-holder-view {
-    //  display: flex;
-    //  flex-direction: row;
-    //
-    //  span.item-name {
-    //    flex-basis: 1px;
-    //    flex-grow: 99;
-    //    overflow: hidden;
-    //    text-overflow: ellipsis;
-    //  }
-    //
-    //  span.item-alts {
-    //    flex-basis: fit-content;
-    //    flex-shrink: 0;
-    //    flex-grow: 0;
-    //  }
-    //}
+    .item-name-holder-view {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      >span {
+        vertical-align: middle;
+      }
+    }
   }
 
   .food-view-table {
diff --git a/packages/frontend/src/scripts/components/items.ts b/packages/frontend/src/scripts/components/items.ts
index 745fe0c2..dd8ec7ae 100644
--- a/packages/frontend/src/scripts/components/items.ts
+++ b/packages/frontend/src/scripts/components/items.ts
@@ -800,12 +800,12 @@ export class GearItemsViewTable extends CustomTable<GearSlotItem, EquipmentSet>
                 getter: item => {
                     return item.item.name;
                 },
-                // renderer: (item) => {
-                //     const name = item.item.name;
-                //     const itemNameSpan = quickElement('span', ['item-name'], [shortenItemName(name)]);
-                //     const out = quickElement('div', ['item-name-holder-view'], [itemNameSpan]);
-                //     return out;
-                // },
+                renderer: (item) => {
+                    const name = item;
+                    const itemNameSpan = quickElement('span', ['item-name'], [shortenItemName(name)]);
+                    const out = quickElement('div', ['item-name-holder-view'], [itemNameSpan]);
+                    return out;
+                },
                 headerStyler: (_, colHeader) => {
                     // console.log("Item", item);
                     colHeader.classList.add('gear-items-view-item-header');
diff --git a/packages/xivmath/src/xivconstants.ts b/packages/xivmath/src/xivconstants.ts
index 7bbe4a75..22d0cb11 100644
--- a/packages/xivmath/src/xivconstants.ts
+++ b/packages/xivmath/src/xivconstants.ts
@@ -821,7 +821,7 @@ export function formatAcquisitionSource(source: GearAcquisitionSource): string |
         case "normraid":
             return "Normal Raid";
         case "extrial":
-            return "Extreme Trial";
+            return "Ex. Trial";
         case "alliance":
             return "Alliance Raid";
         case "other":