src/webparts/requestPortal/forms/PaymentRequest/sections/AmountsSection.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import styles from './PaymentSections.module.scss';
-import { FormGrid, FormField, TextInput, TextArea } from '../../../shared/ui';
+import { FormField, TextInput, TextArea } from '../../../shared/ui';
 import { formatAmount, overLimitAmount, previousPaymentsTotal } from '../amounts';
 import { ISectionProps } from '../model';
 import { AmountInput } from './AmountInput';
@@ -15,7 +15,6 @@ export const AmountsSection: React.FC<ISectionProps> = ({ data, set }) => {
 
   return (
     <>
-      <FormGrid>
         <FormField label="Общая сумма" htmlFor="TotalAmount">
           <AmountInput id="TotalAmount" value={data.TotalAmount} onChange={(v) => set('TotalAmount', v)} />
         </FormField>
@@ -42,11 +41,10 @@ export const AmountsSection: React.FC<ISectionProps> = ({ data, set }) => {
         <FormField label="Комментарий" htmlFor="Comment" full>
           <TextArea id="Comment" value={data.Comment} onChange={(v) => set('Comment', v)} rows={2} />
         </FormField>
-      </FormGrid>
 
-      <h4>Заявки на оплату по этому основанию</h4>
+      <h4 className={styles.fullRow}>Заявки на оплату по этому основанию</h4>
       {data.PreviousPayments.length === 0 ? (
-        <div className={styles.empty}>Ранее заявок на оплату по этому основанию не было.</div>
+        <div className={`${styles.empty} ${styles.fullRow}`}>Ранее заявок на оплату по этому основанию не было.</div>
       ) : (
         <div className={styles.tableWrap}>
           <table className={styles.table}>

src/webparts/requestPortal/forms/PaymentRequest/sections/BasisSection.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Alert, FormGrid, FormField, Select, ISelectOption } from '../../../shared/ui';
+import { Alert, FormField, Select, ISelectOption } from '../../../shared/ui';
+import styles from './PaymentSections.module.scss';
 import { ICompany, ProjectPicker, getCompanies } from '../../../shared/dictionary';
 import { BASIS_OPTIONS, BasisKind, ISectionProps } from '../model';
 import { IBasisSelection } from '../useBasisSelection';
@@ -43,7 +44,6 @@ export const BasisSection: React.FC<IBasisSectionProps> = ({ data, patch, contex
 
   return (
     <>
-    <FormGrid>
       <FormField label="Основание" htmlFor="BasisKind" required>
         <Select id="BasisKind" value={data.BasisKind} onChange={handleKindChange} options={KIND_OPTIONS} />
       </FormField>
@@ -80,9 +80,8 @@ export const BasisSection: React.FC<IBasisSectionProps> = ({ data, patch, contex
           placeholder="Выберите компанию…"
         />
       </FormField>
-    </FormGrid>
-    {basis.loading && <Alert variant="info">Загружаем данные основания…</Alert>}
-    {basis.error && <Alert variant="err">{basis.error}</Alert>}
+    {basis.loading && <div className={styles.fullRow}><Alert variant="info">Загружаем данные основания…</Alert></div>}
+    {basis.error && <div className={styles.fullRow}><Alert variant="err">{basis.error}</Alert></div>}
     </>
   );
 };

src/webparts/requestPortal/forms/PaymentRequest/sections/PaymentSection.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import styles from './PaymentSections.module.scss';
-import { FormGrid, FormField, TextInput, TextArea } from '../../../shared/ui';
+import { FormField, TextInput, TextArea } from '../../../shared/ui';
 import {
   DictionaryPicker,
   getCashFlowGroups,
@@ -25,7 +25,7 @@ export const PaymentSection: React.FC<ISectionProps> = ({ data, set, patch, cont
   const accountFilter = { companyId: data.CompanyId, projectId: data.ProjectId };
 
   return (
-    <FormGrid>
+    <>
       <FormField label="Банковский счёт" htmlFor="BankAccountName" required>
         <DictionaryPicker
           id="BankAccountName"
@@ -99,6 +99,6 @@ export const PaymentSection: React.FC<ISectionProps> = ({ data, set, patch, cont
       <FormField label="Условия оплаты" htmlFor="PaymentTerms">
         <TextArea id="PaymentTerms" value={data.PaymentTerms} onChange={(v) => set('PaymentTerms', v)} rows={2} />
       </FormField>
-    </FormGrid>
+    </>
   );
 };

src/webparts/requestPortal/forms/PaymentRequest/sections/PaymentSections.module.scss

@@ -102,3 +102,9 @@
   color: $gray-500;
   font-size: $fs-sm;
 }
+
+// Тело CollapseSection из ui-kit — сетка в две колонки; всё не-поле растягиваем на обе.
+.fullRow {
+  grid-column: 1 / -1;
+  min-width: 0;
+}