From 39a04cc5e9bc94b26d4c04a8da8eccd923cec442 Mon Sep 17 00:00:00 2001
From: MayaTheShy <MayaTheShy@gmail.com>
Date: Sat, 21 Mar 2026 19:14:14 -0400
Subject: [PATCH] Refactor category tabs and item grid styles: adjust padding,
 margins, and colors for improved UI consistency

---
 web/client/src/components/InventoryGrid.css | 48 +++++++++++++--------
 1 file changed, 30 insertions(+), 18 deletions(-)

diff --git a/web/client/src/components/InventoryGrid.css b/web/client/src/components/InventoryGrid.css
index c80ce4a..fadf7ba 100644
--- a/web/client/src/components/InventoryGrid.css
+++ b/web/client/src/components/InventoryGrid.css
@@ -73,46 +73,56 @@
 /* ===== Creative Inventory Category Tabs ===== */
 .category-tabs {
   display: flex;
-  gap: 2px;
-  padding: 0 0.5rem;
-  background: #2c2c2c;
-  border-bottom: 3px solid var(--mc-inv-slot-border);
+  gap: 0;
+  padding: 0 6px;
+  padding-top: 4px;
+  background: var(--mc-inv-bg);
+  border-left: 3px solid var(--mc-dark);
+  border-right: 3px solid var(--mc-dark);
+  box-shadow:
+    inset 3px 0 0 #fefefe,
+    inset -3px 0 0 #555;
   flex-shrink: 0;
   overflow-x: auto;
+  margin: 0 0.5rem;
+  margin-bottom: 0;
 }
 
 .category-tab {
   display: flex;
   align-items: center;
   gap: 4px;
-  padding: 6px 10px;
-  background: #4a4a4a;
-  border: 2px solid transparent;
-  border-bottom: none;
+  padding: 5px 8px 4px;
+  background: #8b8b8b;
+  border: 2px solid;
+  border-color: #555 #fefefe #c6c6c6 #555;
+  border-bottom: 2px solid var(--mc-inv-bg);
   border-radius: 0;
   cursor: pointer;
   font-family: 'Silkscreen', 'Courier New', monospace;
   font-size: 0.6rem;
-  color: var(--mc-text-gray);
+  color: var(--mc-text-dark);
   font-weight: 700;
-  text-shadow: 1px 1px 0 var(--mc-dark);
+  text-shadow: none;
   transition: background 0.05s;
   white-space: nowrap;
   position: relative;
-  top: 3px;
+  margin-right: 1px;
 }
 
 .category-tab:hover {
-  background: #5a5a5a;
-  color: var(--mc-text-white);
+  background: #aaa;
+  color: var(--mc-text-dark);
 }
 
 .category-tab.active {
   background: var(--mc-inv-bg);
   color: var(--mc-text-dark);
-  border-color: var(--mc-inv-slot-border);
+  border-color: #fefefe #555 transparent #fefefe;
   text-shadow: none;
   z-index: 1;
+  padding-bottom: 6px;
+  margin-bottom: -2px;
 }
 
 .category-label {
@@ -121,7 +131,7 @@
 
 .category-count {
   font-size: 0.5rem;
-  color: var(--mc-text-gray);
+  color: #555;
   opacity: 0.7;
 }
 
@@ -147,7 +157,7 @@
 .item-grid-wrapper {
   flex: 1;
   overflow-y: auto;
-  padding: 0.5rem;
+  padding: 0 0.5rem 0.5rem;
 }
 
 .item-grid {
@@ -157,9 +167,11 @@
   padding: 6px;
   background: var(--mc-inv-bg);
   border: 3px solid var(--mc-dark);
+  border-top: none;
   box-shadow:
-    inset 3px 3px 0 #fefefe,
-    inset -3px -3px 0 #555;
+    inset 3px 0 0 #fefefe,
+    inset -3px -3px 0 #555,
+    inset 0 -3px 0 #555;
   min-height: 200px;
 }