From dae6e6df2d63889bef12e3fd70d40236a67ec1ad Mon Sep 17 00:00:00 2001
From: Joan <lgray.foxl@gmail.com>
Date: Sat, 7 Feb 2026 22:25:03 +0100
Subject: [PATCH] fix(css): refine location grid layout, remove border-radius,
 expand corpse loot view

---
 pwa/src/components/game/LocationView.css | 97 +++++++++++++++++++-----
 pwa/src/components/game/LocationView.tsx |  2 +-
 2 files changed, 77 insertions(+), 22 deletions(-)

diff --git a/pwa/src/components/game/LocationView.css b/pwa/src/components/game/LocationView.css
index 689a251..8d62511 100644
--- a/pwa/src/components/game/LocationView.css
+++ b/pwa/src/components/game/LocationView.css
@@ -1,9 +1,35 @@
 /* Grid View Styles */
 .entity-list.grid-view {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
     gap: 1rem;
     align-items: start;
+    padding: 0.5rem;
+    /* Ensure padding inside container */
+}
+
+/* Ensure expanded corpse container spans full width */
+.corpse-container {
+    display: contents;
+    /* Allows the card to be a direct grid child when not expanded */
+}
+
+.corpse-container.expanded {
+    display: flex;
+    flex-direction: column;
+    grid-column: 1 / -1;
+    background: rgba(0, 0, 0, 0.4);
+    border: 1px solid var(--game-border-color);
+    padding: 1rem;
+    gap: 1rem;
+}
+
+/* When expanded, the card inside should probably behave differently or just be the header */
+.corpse-container.expanded .entity-card.grid-card {
+    width: 150px;
+    /* Fixed size for the header icon when expanded */
+    margin: 0 auto;
+    aspect-ratio: 1;
 }
 
 .entity-card.grid-card {
@@ -12,12 +38,13 @@
     align-items: center;
     justify-content: center;
     aspect-ratio: 1;
-    padding: 0.5rem;
+    padding: 0;
+    /* Remove padding to let image fill */
     text-align: center;
-    background: rgba(0, 0, 0, 0.4);
+    background: rgba(0, 0, 0, 0.6);
     border: 1px solid var(--game-border-color);
-    border-radius: 8px;
-    /* Slightly more rounded for grid items */
+    border-radius: 0;
+    /* User requested NO radius */
     transition: all 0.2s;
     cursor: pointer;
     position: relative;
@@ -30,35 +57,40 @@
 .entity-card.grid-card:hover {
     background: rgba(255, 255, 255, 0.1);
     transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
     border-color: var(--game-text-highlight);
+    z-index: 5;
 }
 
 .grid-card .entity-image {
-    width: 60%;
-    height: 60%;
-    margin-bottom: 0.5rem;
+    width: 100%;
+    height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
+    overflow: hidden;
 }
 
 .grid-card .entity-image img {
     width: 100%;
     height: 100%;
-    object-fit: contain;
+    object-fit: cover;
+    /* Fill the square 1:1 */
 }
 
+/* Overlay for text or stats on hover could be improved, 
+   but for now we keep the tooltip */
+
 .grid-card .grid-quantity {
     position: absolute;
-    bottom: 4px;
-    right: 4px;
-    background: rgba(0, 0, 0, 0.7);
+    bottom: 2px;
+    right: 2px;
+    background: rgba(0, 0, 0, 0.8);
     color: #fff;
     font-size: 0.75rem;
-    padding: 1px 4px;
-    border-radius: 4px;
+    padding: 2px 6px;
     font-weight: bold;
+    border: 1px solid rgba(255, 255, 255, 0.2);
 }
 
 .grid-overlay {
@@ -77,16 +109,16 @@
     gap: 0.5rem;
     justify-content: center;
     height: 100%;
+    width: 100%;
 }
 
-/* Specific Border Colors for Grid Cards to match List View */
+/* Specific Border Colors for Grid Cards */
 .enemy-card.grid-card {
     border-color: rgba(244, 67, 54, 0.5);
 }
 
 .enemy-card.grid-card:hover {
     border-color: rgba(244, 67, 54, 1);
-    background: rgba(244, 67, 54, 0.1);
 }
 
 .corpse-card.grid-card {
@@ -95,7 +127,6 @@
 
 .corpse-card.grid-card:hover {
     border-color: rgba(156, 39, 176, 1);
-    background: rgba(156, 39, 176, 0.1);
 }
 
 .npc-card.grid-card {
@@ -104,7 +135,6 @@
 
 .npc-card.grid-card:hover {
     border-color: rgba(107, 185, 240, 1);
-    background: rgba(107, 185, 240, 0.1);
 }
 
 .item-card.grid-card {
@@ -113,9 +143,34 @@
 
 .item-card.grid-card:hover {
     border-color: rgba(76, 175, 80, 1);
-    background: rgba(76, 175, 80, 0.1);
 }
 
-.view-toggle-btn {
+/* Styles for the expanded corpse details (loot list) */
+.corpse-details {
+    width: 100%;
+    background: var(--game-bg-app);
     border: 1px solid var(--game-border-color);
+    padding: 1rem;
+    margin-top: 1rem;
+}
+
+.corpse-details-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+    border-bottom: 1px solid var(--game-border-color);
+    padding-bottom: 0.5rem;
+}
+
+.corpse-details-header h4 {
+    margin: 0;
+    color: var(--game-text-highlight);
+}
+
+.corpse-items-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 0.5rem;
+    margin-bottom: 1rem;
 }
\ No newline at end of file
diff --git a/pwa/src/components/game/LocationView.tsx b/pwa/src/components/game/LocationView.tsx
index 62d6b07..cfbf84d 100644
--- a/pwa/src/components/game/LocationView.tsx
+++ b/pwa/src/components/game/LocationView.tsx
@@ -277,7 +277,7 @@ function LocationView({
             <h3>{t('location.corpses')}</h3>
             <div className="entity-list grid-view">
               {location.corpses.map((corpse: any) => (
-                <div key={corpse.id} className="corpse-container">
+                <div key={corpse.id} className={`corpse-container ${expandedCorpse === String(corpse.id) ? 'expanded' : ''}`}>
                   <div className="entity-card corpse-card grid-card"
                     onClick={(e) => handleDropdownClick(e, `corpse-${corpse.id}`)}
                   >