вроде готово

src/webparts/requestPortal/features/myRequests/MyRequestsPanel.module.scss

@@ -157,77 +157,89 @@
   padding: 0 2px;
 }
 
-.list {
+.table {
-  list-style: none;
+  width: 100%;
-  margin: 0;
+  border-collapse: collapse;
-  padding: 0;
+  table-layout: fixed;
-  display: flex;
+  font-size: $fs-caption;
-  flex-direction: column;
+
-  gap: $sp-2;
+  th {
+    text-align: left;
+    font-weight: 600;
+    color: $gray-500;
+    font-size: $fs-caption;
+    text-transform: uppercase;
+    letter-spacing: .03em;
+    padding: 6px 8px;
+    border-bottom: 1px solid $gray-200;
+  }
+
+  td {
+    // Высокие строки + перенос по словам: панель узкая, а длинные названия и
+    // e-mail не должны обрезаться — пусть занимают несколько строк.
+    height: 66px;
+    padding: $sp-3 8px;
+    border-bottom: 1px solid $gray-100;
+    vertical-align: middle;
+    white-space: normal;
+    overflow-wrap: break-word;
+    word-break: break-word;
+    line-height: 1.4;
+  }
 }
 
-.item {
+.row {
-  display: flex;
+  transition: background .16s;
-  align-items: center;
-  justify-content: space-between;
-  gap: $sp-2;
-  padding: $sp-2 $sp-3;
-  border: 1px solid $gray-200;
-  border-radius: $r-sm;
-  background: $gray-50;
-  text-decoration: none;
-  transition: .16s;
 
   &:hover {
-    border-color: $gold-400;
     background: $gold-50;
   }
 }
 
-.itemMain {
+.cellType {
-  display: flex;
+  width: 72px;
-  flex-direction: column;
-  gap: 2px;
-  min-width: 0;
-  overflow: hidden;
-}
-
-.itemType {
   color: $gold-600;
-  font-size: $fs-caption;
   font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: .03em;
 }
 
-.itemTitle {
+.cellTitle {
+  // Ширину не задаём — делит оставшееся место с cellAuthor (table-layout: fixed).
+  min-width: 0;
+}
+
+.titleLink {
+  display: block;
   color: $gray-900;
-  font-size: $fs-sm;
+  text-decoration: none;
-  overflow: hidden;
+
-  text-overflow: ellipsis;
+  &:hover {
-  white-space: nowrap;
+    color: $gold-600;
+    text-decoration: underline;
+  }
 }
 
-.itemAuthor {
+.cellAuthor {
   color: $gray-500;
-  font-size: $fs-caption;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
-.itemDate {
+.cellDate {
+  width: 64px;
   color: $gray-400;
-  font-size: $fs-caption;
+}
+
+.cellStatus {
+  width: 96px;
 }
 
 .status {
-  flex-shrink: 0;
+  // inline-block, а не flex-элемент: бейдж живёт внутри ячейки таблицы и
-  padding: 2px 8px;
+  // переносится по словам (напр. «Возвращена на доработку» в узкой колонке).
-  border-radius: $r-full;
+  display: inline-block;
+  padding: 3px 8px;
+  border-radius: $r-md;
   font-size: $fs-caption;
   font-weight: 500;
-  white-space: nowrap;
+  line-height: 1.3;
 }
 
 .statusDraft {

src/webparts/requestPortal/features/myRequests/MyRequestsPanel.tsx

@@ -42,40 +42,61 @@ function statusClass(status: string): string {
   }
 }
 
-// «Ждёt вашего решения»: автор здесь — не вы, поэтому важны email + имя,
+// «Ждёt вашего решения»: автор здесь — не вы, поэтому важна колонка «Автор»,
 // а статус не нужен (в этой секции все заявки по определению «на согласовании»).
-// «Созданы вами»: автор — всегда вы, строку с ним не показываем, зато нужен статус.
+// «Созданы вами»: автор — всегда вы, колонку не показываем, зато нужен статус.
-const RequestItem: React.FC<{ r: IMyRequest; variant: 'own' | 'approval' }> = ({ r, variant }) => (
+const RequestRow: React.FC<{ r: IMyRequest; variant: 'own' | 'approval' }> = ({ r, variant }) => (
-  <li>
+  <tr className={styles.row}>
-    <a
+    <td className={styles.cellType}>{r.requestTypeName}</td>
-      className={styles.item}
+    <td className={styles.cellTitle}>
-      href={routeUrl({ mode: 'approve', formKey: r.formKey, itemId: r.id })}
+      <a
-      onClick={(e) => {
+        className={styles.titleLink}
-        // Обычный левый клик — SPA-переход (без перезагрузки страницы).
+        href={routeUrl({ mode: 'approve', formKey: r.formKey, itemId: r.id })}
-        // Ctrl/Cmd/Shift/среднюю кнопку — не трогаем, пусть браузер сам
+        onClick={(e) => {
-        // откроет в новой вкладке по href.
+          // Обычный левый клик — SPA-переход (без перезагрузки страницы).
-        if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) {
+          // Ctrl/Cmd/Shift/среднюю кнопку — не трогаем, пусть браузер сам
-          return;
+          // откроет в новой вкладке по href.
-        }
+          if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) {
-        e.preventDefault();
+            return;
-        navigate({ mode: 'approve', formKey: r.formKey, itemId: r.id });
+          }
-      }}
+          e.preventDefault();
-    >
+          navigate({ mode: 'approve', formKey: r.formKey, itemId: r.id });
-      <div className={styles.itemMain}>
+        }}
-        <span className={styles.itemType}>{r.requestTypeName}</span>
+      >
-        <span className={styles.itemTitle}>{r.title || `#${r.id}`}</span>
+        {r.title || `#${r.id}`}
-        {variant === 'approval' && (
+      </a>
-          <span className={styles.itemAuthor}>
+    </td>
-            {[r.authorName, r.authorEmail].filter(Boolean).join(' · ') || '— автор не определён —'}
+    {variant === 'approval' && (
-          </span>
+      <td className={styles.cellAuthor}>
-        )}
+        {[r.authorName, r.authorEmail].filter(Boolean).join(' · ') || '—'}
-        {r.created && <span className={styles.itemDate}>{formatDate(r.created)}</span>}
+      </td>
-      </div>
+    )}
-      {variant === 'own' && (
+    <td className={styles.cellDate}>{formatDate(r.created)}</td>
+    {variant === 'own' && (
+      <td className={styles.cellStatus}>
         <span className={`${styles.status} ${statusClass(r.status)}`}>{r.status || '—'}</span>
-      )}
+      </td>
-    </a>
+    )}
-  </li>
+  </tr>
+);
+
+const RequestsTable: React.FC<{ rows: IMyRequest[]; variant: 'own' | 'approval' }> = ({ rows, variant }) => (
+  <table className={styles.table}>
+    <thead>
+      <tr>
+        <th className={styles.cellType}>Тип</th>
+        <th className={styles.cellTitle}>Название</th>
+        {variant === 'approval' && <th className={styles.cellAuthor}>Автор</th>}
+        <th className={styles.cellDate}>Дата</th>
+        {variant === 'own' && <th className={styles.cellStatus}>Статус</th>}
+      </tr>
+    </thead>
+    <tbody>
+      {rows.map((r) => (
+        <RequestRow r={r} variant={variant} key={r.id} />
+      ))}
+    </tbody>
+  </table>
 );
 
 // Постраничная навигация: номера страниц + вперёд/назад. При большом
@@ -158,11 +179,7 @@ const PendingSection: React.FC<{ rows: IMyRequest[] }> = ({ rows }) => {
 
   return (
     <>
-      <ul className={styles.list}>
+      <RequestsTable rows={pageRows} variant="approval" />
-        {pageRows.map((r) => (
-          <RequestItem r={r} variant="approval" key={r.id} />
-        ))}
-      </ul>
       <Pager page={page} totalPages={totalPages} onChange={setPage} />
     </>
   );
@@ -220,11 +237,7 @@ const OwnSection: React.FC<{ context: WebPartContext; types: IRequestType[]; que
 
   return (
     <>
-      <ul className={styles.list}>
+      <RequestsTable rows={rows} variant="own" />
-        {rows.map((r) => (
-          <RequestItem r={r} variant="own" key={r.id} />
-        ))}
-      </ul>
       <Pager page={page} totalPages={totalPages} onChange={setPage} />
     </>
   );