From 56f06ac2c3cef2ac8d74271a088eb87d5a514baf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9?=
 <noreply@anthropic.com>
Date: Tue, 7 Jul 2026 20:56:42 +0300
Subject: [PATCH] =?UTF-8?q?fix(=D0=BF=D0=BE=D1=80=D1=82=D0=B0=D0=BB-=D0=BC?=
 =?UTF-8?q?=D0=BE=D0=B1=D0=B8=D0=BB=D0=BA=D0=B0):=20=D0=B4=D0=B5=D1=82?=
 =?UTF-8?q?=D0=B0=D0=BB=D1=8C=20=D1=81=D0=B4=D0=B5=D0=BB=D0=BA=D0=B8=20?=
 =?UTF-8?q?=D0=BD=D0=B0=20=D1=82=D0=B5=D0=BB=D0=B5=D1=84=D0=BE=D0=BD=D0=B5?=
 =?UTF-8?q?=20=E2=80=94=20=D0=BD=D0=B0=20=D0=B2=D0=B5=D1=81=D1=8C=20=D1=8D?=
 =?UTF-8?q?=D0=BA=D1=80=D0=B0=D0=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Панель деталей сделки была фикс. ширины (inline 400px в «Сделках», drawer 480px
в Канбане) — на экране 390 она была шире экрана: в «Сделках» давала горизонтальный
скролл страницы и крошила карточки списка, в Канбане левый край уезжал за экран.
На телефоне:
- «Сделки» — inline-панель стала полноэкранным оверлеем (position:fixed inset:0).
- Канбан — ширина drawer = ширине экрана (useDisplay).
Десктоп/планшет — прежний master-detail 400px / drawer 480px, без изменений.
Тесты 103/103 зелёные.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../js/components/deals/DealDetailDrawer.vue  | 21 ++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

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>