мелкая правка по адаптиву при нажатии на тайл. приложение стабильно

app/pages/village.vue

@@ -10,32 +10,41 @@
     </div>
 
     <div v-else-if="villageData" class="village-container">
-      <div class="village-grid">
+      <div class="village-grid-wrapper">
-        <div
+        <div class="village-grid">
-          v-for="tile in villageData.tiles"
+          <div
-          :key="tile.id"
+            v-for="tile in villageData.tiles"
-          class="tile"
+            :key="tile.id"
-          :class="{ selected: selectedTile && selectedTile.id === tile.id }"
+            class="tile"
-          @click="selectTile(tile)"
+            :class="{ selected: selectedTile && selectedTile.id === tile.id }"
-        >
+            @click="selectTile(tile)"
-          <span class="tile-content">{{ getTileEmoji(tile) }}</span>
+          >
+            <span class="tile-content">{{ getTileEmoji(tile) }}</span>
+          </div>
         </div>
       </div>
 
-      <div v-if="selectedTile" class="action-panel">
+      <!-- Tile Info Overlay -->
-        <h2>Tile ({{ selectedTile.x }}, {{ selectedTile.y }})</h2>
+      <div v-if="selectedTile" class="tile-overlay-backdrop" @click="selectedTile = null">
-        <div class="actions-list">
+        <div class="tile-overlay-panel" @click.stop>
-          <div v-for="(action, index) in selectedTile.availableActions" :key="index" class="action-item">
+          <h2>Tile ({{ selectedTile.x }}, {{ selectedTile.y }})</h2>
-            <button
+          <p>Terrain: {{ selectedTile.terrainType }}</p>
-              :disabled="!action.isEnabled"
+          <p v-if="selectedTile.object">Object: {{ selectedTile.object.type }}</p>
-              @click="handleActionClick(action)"
+          
-            >
+          <h3>Available Actions</h3>
-              {{ getActionLabel(action) }}
+          <div class="actions-list">
-            </button>
+            <div v-for="(action, index) in selectedTile.availableActions" :key="index" class="action-item">
-            <span v-if="!action.isEnabled" class="disabled-reason">{{ action.disabledReason }}</span>
+              <button
+                :disabled="!action.isEnabled"
+                @click="handleActionClick(action)"
+              >
+                {{ getActionLabel(action) }}
+              </button>
+              <span v-if="!action.isEnabled" class="disabled-reason">{{ action.disabledReason }}</span>
+            </div>
           </div>
+          <button @click="selectedTile = null" class="close-overlay-button">Close</button>
         </div>
-         <button @click="selectedTile = null" class="close-panel">Close</button>
       </div>
     </div>
   </div>
@@ -95,6 +104,8 @@ const handleActionClick = (action) => {
   align-items: center;
   padding: 20px;
   font-family: sans-serif;
+  min-height: calc(100vh - 120px); /* Adjust for top/bottom bars */
+  box-sizing: border-box; /* Include padding in element's total width and height */
 }
 
 .loading, .error-container {
@@ -105,10 +116,14 @@ const handleActionClick = (action) => {
 
 .village-container {
   display: flex;
-  gap: 20px;
+  justify-content: center; /* Center grid */
-  margin-top: 20px;
   width: 100%;
-  justify-content: center;
+  max-width: 350px; /* Adjust max-width for mobile view of grid (5*60px + 4*4px gap + 2*4px padding)*/
+  margin-top: 20px;
+}
+
+.village-grid-wrapper {
+  overflow-x: auto; /* In case grid ever exceeds viewport (though it shouldn't with max-width) */
 }
 
 .village-grid {
@@ -119,6 +134,8 @@ const handleActionClick = (action) => {
   border: 2px solid #333;
   padding: 4px;
   background-color: #f0f0f0;
+  width: fit-content; /* Ensure grid does not expand unnecessarily */
+  margin: 0 auto; /* Center grid within its wrapper */
 }
 
 .tile {
@@ -146,52 +163,104 @@ const handleActionClick = (action) => {
   font-size: 2em;
 }
 
-.action-panel {
+/* Overlay Styles */
-  width: 300px;
+.tile-overlay-backdrop {
-  border: 1px solid #ccc;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: flex-end; /* Start from bottom for mobile-first feel */
+  z-index: 1000;
+}
+
+.tile-overlay-panel {
+  background-color: #fff;
+  width: 100%;
+  max-width: 500px; /* Limit width for larger screens */
   padding: 20px;
-  background-color: #fafafa;
+  border-top-left-radius: 15px;
-}
+  border-top-right-radius: 15px;
-
+  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
-.action-panel h2 {
+  transform: translateY(0); /* For potential slide-in animation */
-  margin-top: 0;
+  transition: transform 0.3s ease-out;
-  text-align: center;
-}
-
-.actions-list {
   display: flex;
   flex-direction: column;
   gap: 15px;
 }
 
-.action-item {
+@media (min-width: 768px) { /* Center for desktop, less "bottom sheet" */
+  .tile-overlay-backdrop {
+    align-items: center;
+  }
+  .tile-overlay-panel {
+    border-radius: 15px;
+    max-height: 80vh; /* Don't cover entire screen */
+  }
+}
+
+.tile-overlay-panel h2 {
+  margin-top: 0;
+  text-align: center;
+  color: #333;
+}
+
+.tile-overlay-panel p {
+  color: #666;
+  margin-bottom: 5px;
+}
+
+.actions-list {
   display: flex;
   flex-direction: column;
+  gap: 10px;
 }
 
 .action-item button {
-  padding: 10px;
+  width: 100%;
-  font-size: 1em;
+  padding: 10px 15px;
+  border: 1px solid #007bff;
+  background-color: #007bff;
+  color: white;
+  border-radius: 5px;
   cursor: pointer;
-  border: 1px solid #ccc;
+  font-size: 1em;
-  background-color: #fff;
+  transition: background-color 0.2s, opacity 0.2s;
+}
+
+.action-item button:hover:not(:disabled) {
+  background-color: #0056b3;
 }
 
 .action-item button:disabled {
+  background-color: #e9ecef;
+  color: #6c757d;
   cursor: not-allowed;
-  background-color: #eee;
+  border-color: #e9ecef;
-  color: #999;
 }
 
 .disabled-reason {
   font-size: 0.8em;
-  color: #d9534f;
+  color: #dc3545;
   margin-top: 5px;
+  text-align: center;
 }
 
-.close-panel {
+.close-overlay-button {
-  margin-top: 20px;
   width: 100%;
-  padding: 10px;
+  padding: 10px 15px;
+  margin-top: 15px;
+  background-color: #6c757d;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.close-overlay-button:hover {
+  background-color: #5a6268;
 }
 </style>

scripts/fix-migration.sql

@@ -1,2 +0,0 @@
-DELETE FROM _prisma_migrations
-WHERE migration_name = '20260103181802_refactor_village_schema';