diff --git a/src/webparts/requestPortal/forms/ServiceRequest/sections/CostGroupsEditor.module.scss b/src/webparts/requestPortal/forms/ServiceRequest/sections/CostGroupsEditor.module.scss index a847e10..772b27f 100644 --- a/src/webparts/requestPortal/forms/ServiceRequest/sections/CostGroupsEditor.module.scss +++ b/src/webparts/requestPortal/forms/ServiceRequest/sections/CostGroupsEditor.module.scss @@ -54,12 +54,27 @@ } } -// Строка = наименование / ед.изм / кол-во / цена / сумма (+ кнопка удаления). +// Строка целиком в фикс-колонках (ед.изм/кол-во/цена/сумма) физически не +// влезает в узкую панель — форма открывается в Drawer сбоку, а не на всю +// страницу, и его ширина не связана с шириной окна браузера (в отличие от +// брейкпоинтов CollapseSection/FormGrid, которые следят за viewport, а не за +// шириной своего контейнера). Вместо того чтобы сжимать поля до +// нечитаемости, даём строке её естественную минимальную ширину и скроллим +// горизонтально контейнером — тот же приём, что раньше был у плоской таблицы +// (см. AnnexesSection .tableWrap), а не «резиновая» вёрстка, которая сама себя +// сжать до бесконечности не умеет (grid-колонки по умолчанию не сжимаются +// уже своего содержимого). +.rowsWrap { + width: 100%; + overflow-x: auto; +} + .row { display: grid; - grid-template-columns: 1fr 96px 110px 140px 140px 32px; + grid-template-columns: minmax(160px, 1fr) 84px 96px 128px 128px 30px; gap: $sp-2; align-items: center; + min-width: 640px; & + & { margin-top: $sp-2; diff --git a/src/webparts/requestPortal/forms/ServiceRequest/sections/CostGroupsEditor.tsx b/src/webparts/requestPortal/forms/ServiceRequest/sections/CostGroupsEditor.tsx index 2a80c18..e34bb6c 100644 --- a/src/webparts/requestPortal/forms/ServiceRequest/sections/CostGroupsEditor.tsx +++ b/src/webparts/requestPortal/forms/ServiceRequest/sections/CostGroupsEditor.tsx @@ -44,61 +44,63 @@ const CostGroup: React.FC = ({ )} -
- Наименование позиции - Ед. изм. - Количество - Цена - Сумма - {!readOnly && } -
+
+
+ Наименование позиции + Ед. изм. + Количество + Цена + Сумма + {!readOnly && } +
- {group.items.length === 0 ? ( -
Позиции не добавлены
- ) : ( - group.items.map((item, i) => - readOnly ? ( -
- {item.description || '—'} - {item.unit || '—'} - {item.qty || '—'} - {item.rate || '—'} - {formatAmount(rowAmount(item))} -
- ) : ( -
- onChangeItem(i, { description: v })} - placeholder="Наименование" - ariaLabel="Наименование позиции" - /> - onChangeItem(i, { unit: v })} - placeholder="шт." - ariaLabel="Единица измерения" - /> - onChangeItem(i, { qty: v })} - placeholder="0" - ariaLabel="Количество" - /> - onChangeItem(i, { rate: v })} - placeholder="0" - ariaLabel="Цена за единицу" - /> - {item.qty || item.rate ? formatAmount(rowAmount(item)) : 'авто'} - -
+ {group.items.length === 0 ? ( +
Позиции не добавлены
+ ) : ( + group.items.map((item, i) => + readOnly ? ( +
+ {item.description || '—'} + {item.unit || '—'} + {item.qty || '—'} + {item.rate || '—'} + {formatAmount(rowAmount(item))} +
+ ) : ( +
+ onChangeItem(i, { description: v })} + placeholder="Наименование" + ariaLabel="Наименование позиции" + /> + onChangeItem(i, { unit: v })} + placeholder="шт." + ariaLabel="Единица измерения" + /> + onChangeItem(i, { qty: v })} + placeholder="0" + ariaLabel="Количество" + /> + onChangeItem(i, { rate: v })} + placeholder="0" + ariaLabel="Цена за единицу" + /> + {item.qty || item.rate ? formatAmount(rowAmount(item)) : 'авто'} + +
+ ) ) - ) - )} + )} +
{!readOnly && (