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

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

@@ -8,8 +8,17 @@
   border: 1px solid $gray-200;
 }
 
+// Внутренний скролл-контейнер: если колонок больше, чем помещается в узкую
+// колонку страницы (например, в редакторе SharePoint), таблица должна
+// скроллиться по горизонтали, а не обрезаться по overflow:hidden у .wrap.
+.scroll {
+  overflow-x: auto;
+}
+
 .table {
-  width: 100%;
+  // min-width, не width: при большом числе колонок таблица должна иметь
+  // право стать шире контейнера — тогда её подхватит .scroll (overflow-x).
+  min-width: 100%;
   border-collapse: collapse;
   font-size: 13.5px;
 }

frontend/src/webparts/approvalAdmin/components/ui/DataTable.tsx

@@ -19,28 +19,30 @@ export interface IDataTableProps<T> {
 export function DataTable<T>({ columns, rows, keyOf, emptyMessage }: IDataTableProps<T>): React.ReactElement {
   return (
     <div className={styles.wrap}>
-      <table className={styles.table}>
-        <thead>
-          <tr>
-            {columns.map(col => (
-              <th key={col.key} style={{ width: col.width, textAlign: col.align ?? 'left' }}>
-                {col.header}
-              </th>
-            ))}
-          </tr>
-        </thead>
-        <tbody>
-          {rows.map(row => (
-            <tr key={keyOf(row)}>
+      <div className={styles.scroll}>
+        <table className={styles.table}>
+          <thead>
+            <tr>
               {columns.map(col => (
-                <td key={col.key} style={{ textAlign: col.align ?? 'left' }}>
-                  {col.render(row)}
-                </td>
+                <th key={col.key} style={{ width: col.width, textAlign: col.align ?? 'left' }}>
+                  {col.header}
+                </th>
               ))}
             </tr>
-          ))}
-        </tbody>
-      </table>
+          </thead>
+          <tbody>
+            {rows.map(row => (
+              <tr key={keyOf(row)}>
+                {columns.map(col => (
+                  <td key={col.key} style={{ textAlign: col.align ?? 'left' }}>
+                    {col.render(row)}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
       {rows.length === 0 && <div className={styles.empty}>{emptyMessage}</div>}
     </div>
   );