From 47088fd0988469de4295e56b4b7c4e962c98bd38 Mon Sep 17 00:00:00 2001
From: lizerk <lizerk-dev@gmail.com>
Date: Tue, 26 May 2026 21:09:41 +0300
Subject: [PATCH] procurement: tighten mobile item card layout

---
 .../ProcurementRequestDetailContent.tsx       | 32 +++++++++----------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/procurement/ProcurementRequestDetailContent.tsx b/frontend/src/components/procurement/ProcurementRequestDetailContent.tsx
index def9fd85..7d7f19f3 100644
--- a/frontend/src/components/procurement/ProcurementRequestDetailContent.tsx
+++ b/frontend/src/components/procurement/ProcurementRequestDetailContent.tsx
@@ -217,28 +217,28 @@ function ProcurementItemCard({
       <div className="mt-3 grid gap-x-6 gap-y-3 lg:grid-cols-[minmax(0,1fr)_minmax(190px,0.55fr)]">
         <div className="min-w-0">
           <p className="app-text-muted mb-1 text-[11px] font-semibold uppercase tracking-wide">Исполнение</p>
-          <div className="grid gap-x-5 gap-y-2 sm:grid-cols-2">
-            <div>
+          <div className="grid grid-cols-2 gap-x-4 gap-y-2">
+            <div className="min-w-0">
               <p className="app-text-muted text-[11px]">Количество</p>
-              <p className="mt-0.5 font-medium text-[var(--foreground)]">
+              <p className="app-text-wrap mt-0.5 font-medium text-[var(--foreground)]">
                 {item.quantity} {item.unit}
               </p>
             </div>
-            <div>
+            <div className="min-w-0">
               <p className="app-text-muted text-[11px]">Дата поступления</p>
-              <p className="mt-0.5 font-medium text-[var(--foreground)]">
+              <p className="app-text-wrap mt-0.5 font-medium text-[var(--foreground)]">
                 {formatDate(item.expected_delivery_date) || "—"}
               </p>
             </div>
-            <div>
+            <div className="min-w-0">
               <p className="app-text-muted text-[11px]">Заказано</p>
-              <p className="mt-0.5 font-medium text-[var(--foreground)]">
+              <p className="app-text-wrap mt-0.5 font-medium text-[var(--foreground)]">
                 {orderedQuantity}/{requestedQuantity}
               </p>
             </div>
-            <div>
+            <div className="min-w-0">
               <p className="app-text-muted text-[11px]">Получено</p>
-              <p className="mt-0.5 font-medium text-[var(--foreground)]">
+              <p className="app-text-wrap mt-0.5 font-medium text-[var(--foreground)]">
                 {receivedQuantity}/{requestedQuantity}
               </p>
             </div>
@@ -246,22 +246,22 @@ function ProcurementItemCard({
         </div>
         <div className="min-w-0 rounded-lg border border-[var(--border-subtle)] bg-[var(--surface-primary)] px-3 py-2">
           <p className="app-text-muted mb-2 text-[11px] font-semibold uppercase tracking-wide">Стоимость</p>
-          <div className="grid gap-x-5 gap-y-2 sm:grid-cols-3 lg:grid-cols-1">
-            <div>
+          <div className="grid grid-cols-3 gap-x-3 gap-y-2 lg:grid-cols-1">
+            <div className="min-w-0">
               <p className="app-text-muted text-[11px]">Ориентир</p>
-              <p className="mt-0.5 font-medium text-[var(--foreground)]">
+              <p className="app-text-wrap mt-0.5 font-medium text-[var(--foreground)]">
                 {formatMoney(item.estimated_unit_price)}
               </p>
             </div>
-            <div>
+            <div className="min-w-0">
               <p className="app-text-muted text-[11px]">Факт</p>
-              <p className="mt-0.5 font-medium text-[var(--foreground)]">
+              <p className="app-text-wrap mt-0.5 font-medium text-[var(--foreground)]">
                 {item.actual_unit_price ? formatMoney(item.actual_unit_price) : "—"}
               </p>
             </div>
-            <div>
+            <div className="min-w-0">
               <p className="app-text-muted text-[11px]">Расчёт</p>
-              <p className="mt-0.5 font-medium text-[var(--foreground)]">
+              <p className="app-text-wrap mt-0.5 font-medium text-[var(--foreground)]">
                 {formatMoney(item.total_price)}
               </p>
             </div>