From a3d3983d7857899d910ce1203f8331e626cb4e5b Mon Sep 17 00:00:00 2001
From: "gorbenko.pavel" <gorbenko.pavel@tansu.kz>
Date: Tue, 1 Sep 2026 16:37:58 +0500
Subject: [PATCH] =?UTF-8?q?fix(ServiceRequest):=20=D1=83=D0=B1=D1=80=D0=B0?=
 =?UTF-8?q?=D1=82=D1=8C=20=D0=BB=D0=B8=D1=88=D0=BD=D0=B8=D0=B9=20FormGrid?=
 =?UTF-8?q?=20=D0=B2=D0=BD=D1=83=D1=82=D1=80=D0=B8=20CollapseSection?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

CollapseSection.body у @tnsu/ui-kit уже сам является 2-колоночным грид-
контейнером (._body{grid-template-columns:1fr 1fr}) — FormGrid внутри
неё создавал ВЛОЖЕННЫЙ грид, который занимал только ОДНУ из двух колонок
родителя (как единственный grid-item без явного grid-column), а его
собственные две колонки делили уже урезанную пополам ширину. Из-за этого
«Объём работ», «Итого объёмы работ» и «Общие замечания» рендерились на
половине ширины карточки, хотя место было.

FormField кладём прямо в CollapseSection, без обёртки FormGrid — так уже
сделано во всех остальных формах (см. Clearance/RequestSection.tsx).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../sections/RemarksSection.tsx               | 22 ++---
 .../ServiceRequest/sections/ScopeSection.tsx  | 94 +++++++++----------
 2 files changed, 56 insertions(+), 60 deletions(-)

diff --git a/src/webparts/requestPortal/forms/ServiceRequest/sections/RemarksSection.tsx b/src/webparts/requestPortal/forms/ServiceRequest/sections/RemarksSection.tsx
index cef9ddd..08c2caf 100644
--- a/src/webparts/requestPortal/forms/ServiceRequest/sections/RemarksSection.tsx
+++ b/src/webparts/requestPortal/forms/ServiceRequest/sections/RemarksSection.tsx
@@ -1,20 +1,18 @@
 import * as React from 'react';
-import { CollapseSection, FormGrid, FormField, TextArea } from '../../../shared/ui';
+import { CollapseSection, FormField, TextArea } from '../../../shared/ui';
 import { ISectionProps } from '../model';
 
 /** Общие замечания — отдельный блок бумажной формы, не относится к объёму работ. */
 export const RemarksSection: React.FC<ISectionProps> = ({ data, set }) => (
   <CollapseSection title="Общие замечания" icon="info">
-    <FormGrid>
-      <FormField label="Общие замечания" htmlFor="GeneralRemarks" full>
-        <TextArea
-          id="GeneralRemarks"
-          value={data.GeneralRemarks}
-          onChange={(v) => set('GeneralRemarks', v)}
-          rows={4}
-          placeholder="Особые условия, ссылки на нормативы, порядок приёмки скрытых работ…"
-        />
-      </FormField>
-    </FormGrid>
+    <FormField label="Общие замечания" htmlFor="GeneralRemarks" full>
+      <TextArea
+        id="GeneralRemarks"
+        value={data.GeneralRemarks}
+        onChange={(v) => set('GeneralRemarks', v)}
+        rows={4}
+        placeholder="Особые условия, ссылки на нормативы, порядок приёмки скрытых работ…"
+      />
+    </FormField>
   </CollapseSection>
 );
diff --git a/src/webparts/requestPortal/forms/ServiceRequest/sections/ScopeSection.tsx b/src/webparts/requestPortal/forms/ServiceRequest/sections/ScopeSection.tsx
index f62ba10..d7a9289 100644
--- a/src/webparts/requestPortal/forms/ServiceRequest/sections/ScopeSection.tsx
+++ b/src/webparts/requestPortal/forms/ServiceRequest/sections/ScopeSection.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import styles from './ScopeSection.module.scss';
-import { CollapseSection, FormGrid, FormField, TextInput, TextArea } from '../../../shared/ui';
+import { CollapseSection, FormField, TextInput, TextArea } from '../../../shared/ui';
 import { CostGroupsEditor } from './CostGroupsEditor';
 import { ISectionProps } from '../model';
 
@@ -24,57 +24,55 @@ export const ScopeSection: React.FC<ISectionProps> = ({ data, set }) => {
 
   return (
     <CollapseSection title="Описание требований" icon="helmet">
-      <FormGrid>
-        <FormField label="Объём работ" htmlFor="ScopeOfWork" required full>
-          <TextArea
-            id="ScopeOfWork"
-            value={data.ScopeOfWork}
-            onChange={(v) => set('ScopeOfWork', v)}
-            rows={12}
-            placeholder="Состав и объёмы работ, ссылки на рабочую документацию, требования к исполнительной документации…"
-          />
-        </FormField>
+      <FormField label="Объём работ" htmlFor="ScopeOfWork" required full>
+        <TextArea
+          id="ScopeOfWork"
+          value={data.ScopeOfWork}
+          onChange={(v) => set('ScopeOfWork', v)}
+          rows={12}
+          placeholder="Состав и объёмы работ, ссылки на рабочую документацию, требования к исполнительной документации…"
+        />
+      </FormField>
 
-        <div className={styles.volumesBlock}>
-          <span className={styles.volumesLabel}>Итого объёмы работ</span>
-          <CostGroupsEditor
-            groups={data.WorkVolumes}
-            onChange={(groups) => set('WorkVolumes', groups)}
-            totalLabel="Итого"
-            emptyReadOnlyText="Объёмы работ не заполнены"
-          />
-        </div>
+      <div className={styles.volumesBlock}>
+        <span className={styles.volumesLabel}>Итого объёмы работ</span>
+        <CostGroupsEditor
+          groups={data.WorkVolumes}
+          onChange={(groups) => set('WorkVolumes', groups)}
+          totalLabel="Итого"
+          emptyReadOnlyText="Объёмы работ не заполнены"
+        />
+      </div>
 
-        <FormField label="Предлагаемые поставщики" htmlFor="SuggestedSuppliers" full>
-          <TextArea
-            id="SuggestedSuppliers"
-            value={data.SuggestedSuppliers}
-            onChange={(v) => set('SuggestedSuppliers', v)}
-            rows={3}
-            placeholder="Требования к подрядчику и/или конкретные организации из утверждённого перечня"
-          />
-        </FormField>
+      <FormField label="Предлагаемые поставщики" htmlFor="SuggestedSuppliers" full>
+        <TextArea
+          id="SuggestedSuppliers"
+          value={data.SuggestedSuppliers}
+          onChange={(v) => set('SuggestedSuppliers', v)}
+          rows={3}
+          placeholder="Требования к подрядчику и/или конкретные организации из утверждённого перечня"
+        />
+      </FormField>
 
-        <FormField label="Предполагаемая дата начала" htmlFor="EstimatedStartDate">
-          <TextInput
-            id="EstimatedStartDate"
-            type="date"
-            value={data.EstimatedStartDate}
-            onChange={(v) => set('EstimatedStartDate', v)}
-          />
-        </FormField>
-        <FormField label="Предполагаемая дата окончания" htmlFor="EstimatedFinishDate">
-          <TextInput
-            id="EstimatedFinishDate"
-            type="date"
-            value={data.EstimatedFinishDate}
-            onChange={(v) => set('EstimatedFinishDate', v)}
-            min={data.EstimatedStartDate || undefined}
-          />
-        </FormField>
+      <FormField label="Предполагаемая дата начала" htmlFor="EstimatedStartDate">
+        <TextInput
+          id="EstimatedStartDate"
+          type="date"
+          value={data.EstimatedStartDate}
+          onChange={(v) => set('EstimatedStartDate', v)}
+        />
+      </FormField>
+      <FormField label="Предполагаемая дата окончания" htmlFor="EstimatedFinishDate">
+        <TextInput
+          id="EstimatedFinishDate"
+          type="date"
+          value={data.EstimatedFinishDate}
+          onChange={(v) => set('EstimatedFinishDate', v)}
+          min={data.EstimatedStartDate || undefined}
+        />
+      </FormField>
 
-        {days !== undefined && <div className={styles.duration}>Продолжительность: {days} кал. дн.</div>}
-      </FormGrid>
+      {days !== undefined && <div className={styles.duration}>Продолжительность: {days} кал. дн.</div>}
     </CollapseSection>
   );
 };