UI Refinements Round 2: CSS fixes, Grid Layout, Sidebar Images

pwa/src/components/Game.css

@@ -1052,6 +1052,35 @@ body.no-scroll {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
   gap: 1rem;
+  max-height: 400px;
+  overflow-y: auto;
+  padding-right: 5px;
+  /* Custom scrollbar */
+  scrollbar-width: thin;
+  scrollbar-color: var(--game-border-active) rgba(0, 0, 0, 0.3);
+  /* Ensure overflow doesn't clip dropdowns if possible, 
+     but for scrolling lists we need overflow-y: auto. 
+     Dropdowns must use fixed position or Portal if they need to escape. 
+     However, we can try to make sure cards have z-index context */
+}
+
+/* Ensure cards handle their own stacking context */
+.entity-card {
+  position: relative;
+  /* ... existing styles ... */
+}
+
+.entity-list::-webkit-scrollbar {
+  width: 6px;
+}
+
+.entity-list::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.3);
+}
+
+.entity-list::-webkit-scrollbar-thumb {
+  background-color: var(--game-border-active);
+  border-radius: 3px;
 }
 
 .entity-card {
@@ -1879,13 +1908,9 @@ body.no-scroll {
   /* Changed from center to space-between */
   gap: 0.25rem;
   /* Fixed dimensions for consistent sizing */
-  min-height: 150px;
-  min-width: 110px;
-  /* Increased to 150px for better visual balance */
-  max-height: 150px;
-  max-width: 110px;
-  height: 150px;
-  width: 110px;
+  min-height: 100px;
+  min-width: 80px;
+  max-width: 100%;
   transition: all 0.2s;
   cursor: pointer;
   overflow: visible;
@@ -1894,6 +1919,29 @@ body.no-scroll {
   /* For tooltip positioning */
 }
 
+/* Constrain item images in sidebar */
+/* Constrain item images in sidebar */
+.equipment-slot-image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-size: cover;
+  background-position: center;
+  border-radius: 6px;
+  opacity: 0.6;
+  z-index: 1;
+  /* Below text/buttons */
+}
+
+/* Ensure content is above image */
+.equipment-slot>*:not(.equipment-slot-image) {
+  z-index: 10;
+  position: relative;
+}
+
+
 .equipment-slot.large {
   min-width: 150px;
 }
@@ -4137,4 +4185,84 @@ body.no-scroll {
 /* Utility classes */
 .text-danger {
   color: #ff4444 !important;
+}
+
+/* --- Combat Actions --- */
+.combat-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  min-height: 220px;
+  /* Reserve space for grid to prevent layout shift */
+  justify-content: center;
+  /* Center content vertically */
+}
+
+.combat-actions-group {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+}
+
+.combat-actions-group .btn {
+  padding: 1rem;
+  font-size: 1.1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  transition: all 0.2s;
+}
+
+/* Specific Combat Buttons */
+.btn-attack {
+  background: linear-gradient(180deg, rgba(220, 38, 38, 0.2) 0%, rgba(153, 27, 27, 0.3) 100%);
+  border: 1px solid rgba(220, 38, 38, 0.5);
+  color: #fca5a5;
+}
+
+.btn-attack:hover:not(:disabled) {
+  background: linear-gradient(180deg, rgba(220, 38, 38, 0.3) 0%, rgba(153, 27, 27, 0.4) 100%);
+  border-color: #f87171;
+  box-shadow: 0 0 15px rgba(220, 38, 38, 0.3);
+  transform: translateY(-2px);
+}
+
+.btn-defend {
+  background: linear-gradient(180deg, rgba(37, 99, 235, 0.2) 0%, rgba(30, 64, 175, 0.3) 100%);
+  border: 1px solid rgba(37, 99, 235, 0.5);
+  color: #93c5fd;
+}
+
+.btn-defend:hover:not(:disabled) {
+  background: linear-gradient(180deg, rgba(37, 99, 235, 0.3) 0%, rgba(30, 64, 175, 0.4) 100%);
+  border-color: #60a5fa;
+  box-shadow: 0 0 15px rgba(37, 99, 235, 0.3);
+  transform: translateY(-2px);
+}
+
+.btn-supplies {
+  background: linear-gradient(180deg, rgba(217, 119, 6, 0.2) 0%, rgba(180, 83, 9, 0.3) 100%);
+  border: 1px solid rgba(217, 119, 6, 0.5);
+  color: #fcd34d;
+}
+
+.btn-supplies:hover:not(:disabled) {
+  background: linear-gradient(180deg, rgba(217, 119, 6, 0.3) 0%, rgba(180, 83, 9, 0.4) 100%);
+  border-color: #fbbf24;
+  box-shadow: 0 0 15px rgba(217, 119, 6, 0.3);
+  transform: translateY(-2px);
+}
+
+.btn-flee {
+  background: linear-gradient(180deg, rgba(75, 85, 99, 0.2) 0%, rgba(55, 65, 81, 0.3) 100%);
+  border: 1px solid rgba(75, 85, 99, 0.5);
+  color: #e5e7eb;
+}
+
+.btn-flee:hover:not(:disabled) {
+  background: linear-gradient(180deg, rgba(75, 85, 99, 0.3) 0%, rgba(55, 65, 81, 0.4) 100%);
+  border-color: #9ca3af;
+  box-shadow: 0 0 15px rgba(75, 85, 99, 0.3);
+  transform: translateY(-2px);
 }