diff --git a/app/resources/js/components/deals/DealDetailDrawer.vue b/app/resources/js/components/deals/DealDetailDrawer.vue
index 8dd8b789..6aac390e 100644
--- a/app/resources/js/components/deals/DealDetailDrawer.vue
+++ b/app/resources/js/components/deals/DealDetailDrawer.vue
@@ -6,9 +6,14 @@
  * Тело — общий DealDetailBody.vue.
  */
 import { computed } from 'vue';
+import { useDisplay } from 'vuetify';
 import type { MockDeal } from '../../composables/mockDeals';
 import DealDetailBody from './DealDetailBody.vue';
 
+// Телефон: overlay-панель на весь экран (фикс. 480px был шире экрана).
+const { width, xs } = useDisplay();
+const drawerWidth = computed(() => (xs.value ? width.value : 480));
+
 const props = withDefaults(
     defineProps<{
         open: boolean;
@@ -43,7 +48,7 @@ function close() {
             @status-changed="(s: string) => emit('status-changed', s)"
         />
     </aside>
-    <v-navigation-drawer v-else v-model="drawerOpen" location="right" temporary :width="480" class="deal-drawer">
+    <v-navigation-drawer v-else v-model="drawerOpen" location="right" temporary :width="drawerWidth" class="deal-drawer">
         <DealDetailBody
             :deal="deal"
             :tenant-id="tenantId"
@@ -69,4 +74,18 @@ function close() {
     position: sticky;
     top: 16px;
 }
+/* Телефон: панель деталей — полноэкранный оверлей поверх списка
+   (фикс. 400px рядом со списком давал горизонтальный скролл и крошил карточки). */
+@media (max-width: 599.98px) {
+    .deal-detail-inline {
+        position: fixed;
+        inset: 0;
+        z-index: 1200;
+        width: 100%;
+        max-height: none;
+        border: none;
+        border-radius: 0;
+        overflow-y: auto;
+    }
+}
 </style>