refactor: 3-column inventory layout (paperdoll+items | packs | mana)

static/script.js

@@ -1658,9 +1658,6 @@ function showInventoryWindow(name) {
   invContent.style.display = 'none';
   content.appendChild(invContent);
 
-  const topSection = document.createElement('div');
-  topSection.className = 'inv-top-section';
-  
   const equipGrid = document.createElement('div');
   equipGrid.className = 'inv-equipment-grid';
   
@@ -1717,15 +1714,6 @@ function showInventoryWindow(name) {
   const leftColumn = document.createElement('div');
   leftColumn.className = 'inv-left-column';
 
-  topSection.appendChild(equipGrid);
-  topSection.appendChild(sidebar);
-
-  const bottomSection = document.createElement('div');
-  bottomSection.className = 'inv-bottom-section';
-
-  const itemSection = document.createElement('div');
-  itemSection.className = 'inv-item-section';
-  
   const contentsHeader = document.createElement('div');
   contentsHeader.className = 'inv-contents-header';
   contentsHeader.textContent = 'Contents of Backpack';
@@ -1733,14 +1721,12 @@ function showInventoryWindow(name) {
   const itemGrid = document.createElement('div');
   itemGrid.className = 'inv-item-grid';
 
-  itemSection.appendChild(contentsHeader);
+  leftColumn.appendChild(equipGrid);
-  itemSection.appendChild(itemGrid);
+  leftColumn.appendChild(contentsHeader);
-  bottomSection.appendChild(itemSection);
+  leftColumn.appendChild(itemGrid);
-
-  leftColumn.appendChild(topSection);
-  leftColumn.appendChild(bottomSection);
 
   invContent.appendChild(leftColumn);
+  invContent.appendChild(sidebar);
   invContent.appendChild(manaPanel);
 
   const resizeGrip = document.createElement('div');
@@ -1777,7 +1763,6 @@ function showInventoryWindow(name) {
     windowEl: win,
     items: [],
     activePack: null,
-    topSection: topSection,
     slotMap: slotMap,
     equipGrid: equipGrid,
     itemGrid: itemGrid,

static/style.css

@@ -724,7 +724,6 @@ body.noselect, body.noselect * {
 .inv-left-column {
   display: flex;
   flex-direction: column;
-  flex: 1;
   min-width: 0;
   min-height: 0;
   overflow: hidden;
@@ -768,13 +767,6 @@ body.noselect, body.noselect * {
   color: var(--ac-text-dim);
 }
 
-.inv-top-section {
-  display: flex;
-  justify-content: flex-start;
-  gap: 14px;
-  flex-shrink: 0;
-}
-
 .inv-equipment-grid {
   position: relative;
   width: 308px;
@@ -825,8 +817,6 @@ body.noselect, body.noselect * {
   gap: 2px;
   overflow: hidden;
   flex-shrink: 0;
-  margin-right: 6px;
-  max-height: 264px;
 }
 
 .inv-burden-bar {
@@ -920,15 +910,6 @@ body.noselect, body.noselect * {
   image-rendering: pixelated;
 }
 
-.inv-bottom-section {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  margin-top: 4px;
-  overflow: hidden;
-  min-height: 0;
-}
-
 .inv-contents-header {
   color: var(--ac-gold);
   font-size: 14px;
@@ -938,14 +919,6 @@ body.noselect, body.noselect * {
   padding-bottom: 2px;
 }
 
-.inv-item-section {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-  max-width: fit-content;
-}
-
 .inv-item-grid {
   display: grid;
   grid-template-columns: repeat(6, 36px);
@@ -959,8 +932,6 @@ body.noselect, body.noselect * {
   min-height: 0;
   align-content: start;
   justify-content: start;
-  box-sizing: content-box;
-  max-width: fit-content;
 }
 
 .inv-mana-panel {
@@ -2327,8 +2298,6 @@ table.ts-allegiance td:first-child {
 .inv-sidebar {
   width: 52px !important;
   align-items: center !important;
-  overflow: hidden !important;
-  max-height: 264px !important;
 }
 
 .inv-pack-icon {
@@ -2433,15 +2402,6 @@ table.ts-allegiance td:first-child {
   min-height: 720px !important;
 }
 
-.inv-top-section {
-  justify-content: flex-start !important;
-  gap: 6px !important;
-}
-
-.inv-bottom-section {
-  flex-direction: column !important;
-}
-
 .inv-mana-panel {
   width: 162px !important;
   min-width: 162px !important;