Make input colors consistent on toolbar, fix width of alt items modal

xiv-gear-planner · Oct 13, 2024 · f4f9ffc · f4f9ffc
1 parent 3468258
commit f4f9ffc
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 17 deletions.
diff --git a/packages/common-ui/styles/common.less b/packages/common-ui/styles/common.less
@@ -3019,6 +3019,11 @@ body.modern {
     button, select {
       --button-color: var(--bg-color);
     }
+
+    input {
+      background: var(--bg-color) !important;
+      border: none !important;
+    }
   }
 
   gear-set-editor {
@@ -3321,24 +3326,33 @@ gear-set-issues-modal {
 alt-items-modal {
   .modal-content-area {
     width: min-content;
+    max-width: 100%;
   }
-  table tr {
-    td, th {
-      padding-left: 15px;
-      padding-right: 15px;
-    }
-    *[col-id="icon"] {
-      height: 25px;
-      width: 23px;
-      min-width: 23px;
-      max-width: 23px;
-      padding-right: 0;
-      img {
-        height: 100%;
+
+  table {
+    width: max-content;
+
+    tr {
+      td, th {
+        padding-left: 15px;
+        padding-right: 15px;
+      }
+
+      *[col-id="icon"] {
+        height: 25px;
+        width: 23px;
+        min-width: 23px;
+        max-width: 23px;
+        padding-right: 0;
+
+        img {
+          height: 100%;
+        }
+      }
+
+      *[col-id="itemname"] {
+        padding-left: 0;
       }
-    }
-    *[col-id="itemname"] {
-      padding-left: 0;
     }
   }
 }

diff --git a/packages/frontend/src/scripts/components/items.ts b/packages/frontend/src/scripts/components/items.ts
@@ -873,7 +873,7 @@ export class AltItemsModal extends BaseModal {
 
         const text = document.createElement('p');
         text.textContent = `The item ${baseItem.name} can be replaced by all of the following items, which have equivalent or better effective stats:`;
-        this.contentArea.appendChild(text);
+        this.contentArea.appendChild(quickElement('div', ['alt-items-text-holder'], [text]));
 
         const table : CustomTable<GearItem> = new CustomTable<GearItem>();
         table.columns = [