правка интерфейса

frontend/src/webparts/approvalAdmin/components/screens/RoutesScreen.tsx

@@ -252,21 +252,21 @@ export const RoutesScreen: React.FC<IRoutesScreenProps> = ({ api, onOpenSteps })
                 onChange={e => setForm({ ...form, requestTypeId: e.target.value })}
               />
             </Field>
-            <Field label="Тип маршрута" required>
+            <Field label="Тип маршрута" required full>
               <Select
                 options={ROUTE_TYPE_OPTIONS}
                 value={form.routeType}
                 onChange={e => setForm({ ...form, routeType: e.target.value as RouteType })}
               />
             </Field>
-            <Field label="Компания (Guid)" required hint="Из справочника api.tnsu.kz.">
+            <Field label="Компания (Guid)" required full hint="Из справочника api.tnsu.kz.">
               <TextInput
                 value={form.companyId}
                 onChange={e => setForm({ ...form, companyId: e.target.value })}
                 placeholder="00000000-0000-0000-0000-000000000000"
               />
             </Field>
-            <Field label="Отдел (Guid)" hint="Необязательно — маршрут «по умолчанию» для компании.">
+            <Field label="Отдел (Guid)" full hint="Необязательно — маршрут «по умолчанию» для компании.">
               <TextInput
                 value={form.departmentId}
                 onChange={e => setForm({ ...form, departmentId: e.target.value })}

frontend/src/webparts/approvalAdmin/components/ui/FormField.module.scss

@@ -6,7 +6,15 @@
   gap: 18px 22px;
 }
 
-.field { display: flex; flex-direction: column; gap: 6px; }
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  // Grid-элементы по умолчанию не сжимаются уже своего min-content
+  // (min-width: auto) — из-за этого длинный текст/плейсхолдер в инпуте
+  // мог распирать колонку и вызывать горизонтальный скролл модалки.
+  min-width: 0;
+}
 .full { grid-column: 1 / -1; }
 
 .label {
@@ -21,6 +29,10 @@
 .input,
 .select,
 .textarea {
+  // border-box обязателен: width:100% + padding/border в content-box
+  // (браузерный дефолт) делает элемент шире контейнера на padding+border
+  // и распирает модалку в горизонтальный скролл.
+  box-sizing: border-box;
   padding: 11px 13px;
   border: 1px solid $gray-300;
   border-radius: $r-sm;