Реестр пакетов и ссылки на git.tnsu.kz — по https

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

.npmrc

@@ -1 +1 @@
-@tnsu:registry=http://git.tnsu.kz/api/packages/Tansu/npm/
+@tnsu:registry=https://git.tnsu.kz/api/packages/tansu/npm/

create-spfx-uikit.ps1

@@ -269,7 +269,7 @@ Info "Подключаем @tnsu/ui-kit..."
 # .npmrc: адрес registry для скоупа @tnsu (НЕ секрет, можно коммитить).
 # Токен на чтение — у каждого разработчика свой, в ~/.npmrc (в проект не кладём).
 $npmrc = @'
-@tnsu:registry=http://git.tnsu.kz/api/packages/timur.gorodetskiy/npm/
+@tnsu:registry=https://git.tnsu.kz/api/packages/tansu/npm/
 '@
 $npmrc | Set-Content -Encoding UTF8 ".npmrc"
 Success ".npmrc создан (адрес registry @tnsu)."
@@ -282,7 +282,7 @@ try {
 } catch {
     Warn "Не удалось поставить @tnsu/ui-kit. Скорее всего нет токена @tnsu в ~/.npmrc."
     Warn "Создай токен (Gitea → Настройки → Приложения → package: Read) и пропиши в ~/.npmrc:"
-    Warn "  //git.tnsu.kz/api/packages/timur.gorodetskiy/npm/:_authToken=ТВОЙ_ТОКЕН"
+    Warn "  //git.tnsu.kz/api/packages/tansu/npm/:_authToken=ТВОЙ_ТОКЕН"
     Warn "Потом выполни: npm install @tnsu/ui-kit"
 }
 

package-lock.json

@@ -9887,7 +9887,7 @@
     },
     "node_modules/@tnsu/ui-kit": {
       "version": "0.14.0",
-      "resolved": "http://git.tnsu.kz/api/packages/Tansu/npm/%40tnsu%2Fui-kit/-/0.14.0/ui-kit-0.14.0.tgz",
+      "resolved": "https://git.tnsu.kz/api/packages/tansu/npm/%40tnsu%2Fui-kit/-/0.14.0/ui-kit-0.14.0.tgz",
       "integrity": "sha512-Vun9AUM9jL8rttbsbKo5Yh6TUz1srkNqxiO6mmzebrSo1JOASNJqNjJPMTS+8Jt3MTrJPklvh0TbeqGQzw7qxQ==",
       "license": "ISC",
       "peerDependencies": {

src/webparts/requestPortal/shared/approval/history/ApprovalHistory.module.scss

@@ -1,36 +1,25 @@
 @import '../../../../../styles/design-tokens';
 
-// Кружок события на линии ленты.
-$marker-size: 24px;
-// Толщина линии, соединяющей события.
-$line-width: 2px;
-// Зазор между событиями — линия обязана его перекрыть, иначе рвётся.
-$event-gap: $sp-4;
+// Ширина колонки со временем — под «29.09.2026 11:02»; уже — текст переносится.
+$time-col-width: 124px;
+// Ниже этой ширины время встаёт над текстом события, а не слева от него.
+$feed-stack-breakpoint: 640px;
 
 .feed {
   display: flex;
   flex-direction: column;
-  gap: $sp-5;
+  gap: $sp-4;
 }
 
 .round {
   display: flex;
   flex-direction: column;
-  gap: $sp-3;
+  gap: $sp-2;
 }
 
-// Номер отправки + плашка итога (см. RoundTitle). Капслок — только у номера:
-// повесь его на весь заголовок, и плашка унаследовала бы его вместе с разрядкой.
 .roundTitle {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: $sp-1 $sp-2;
   padding-bottom: $sp-1;
   border-bottom: 1px solid $gray-200;
-}
-
-.roundNumber {
   font-size: $fs-overline;
   font-weight: 600;
   letter-spacing: 1.4px;
@@ -41,122 +30,62 @@ $event-gap: $sp-4;
 .events {
   display: flex;
   flex-direction: column;
-  gap: $event-gap;
+  gap: $sp-3;
   margin: 0;
   padding: 0;
   list-style: none;
 }
 
 .event {
-  position: relative;
   display: flex;
   align-items: flex-start;
   gap: $sp-3;
   font-size: $fs-sm;
   color: $gray-900;
+}
 
-  // Линия от кружка к следующему событию — лента читается как хронология, а не
-  // как стопка одинаковых строк. У последнего события отправки линии нет:
-  // отправки разделены заголовками, а не одной сплошной нитью.
-  &:not(:last-child)::before {
-    content: '';
-    position: absolute;
-    top: $marker-size;
-    bottom: -$event-gap;
-    left: calc((#{$marker-size} - #{$line-width}) / 2);
-    width: $line-width;
-    background: $gray-200;
-  }
+.current {
+  padding: $sp-2 $sp-3;
+  border-radius: $r-sm;
+  background: $gold-50;
 }
 
 .marker {
-  display: flex;
-  flex: 0 0 $marker-size;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  width: $marker-size;
-  height: $marker-size;
-  border: 1.5px solid;
-  border-radius: 50%;
-  font-size: 12px;
+  flex: 0 0 auto;
+  width: 20px;
+  text-align: center;
   font-weight: 700;
-  line-height: 1;
+  line-height: 1.4;
 }
 
-// Цвета — те же смысловые, что у плашки события и полосы комментария
-// (см. historyKinds.ts): кружок, плашка и комментарий одного события — одного цвета.
-.markerNeutral {
-  border-color: $navy-600;
-  background: $navy-50;
-  color: $navy-700;
-}
-
-.markerPositive {
-  border-color: $green-600;
-  background: $green-50;
-  color: $green-600;
-}
-
-.markerWarning {
-  border-color: $gold-500;
-  background: $gold-100;
-  color: $amber-700;
-}
-
-.markerNegative {
-  border-color: $red-500;
-  background: $red-50;
-  color: $red-500;
-}
-
-.markerCurrent {
-  border-color: $gold-500;
-  background: $gold-50;
-  color: $gold-600;
-  animation: current-pulse 2s ease-out infinite;
-}
-
-// Расходящееся кольцо вокруг кружка «сейчас».
-@keyframes current-pulse {
-  0% { box-shadow: 0 0 0 0 rgba($gold-500, .45); }
-  70% { box-shadow: 0 0 0 8px rgba($gold-500, 0); }
-  100% { box-shadow: 0 0 0 0 rgba($gold-500, 0); }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .markerCurrent {
-    animation: none;
-  }
-}
+.markerNeutral { color: $navy-700; }
+.markerPositive { color: $green-600; }
+.markerWarning { color: $amber-700; }
+.markerNegative { color: $red-500; }
+.markerCurrent { color: $gold-600; }
 
 .eventBody {
   display: flex;
-  flex: 1 1 auto;
   flex-direction: column;
-  gap: $sp-1;
-  min-width: 0; // иначе длинный комментарий распирает ленту вбок
+  gap: 2px;
+  min-width: 0;
 }
 
-// Плашка + время + длительность. На узкой ширине переносятся сами (flex-wrap),
-// отдельный медиазапрос не нужен. min-height — чтобы плашка стояла вровень
-// с центром кружка.
-.eventHead {
+.eventLine {
   display: flex;
   flex-wrap: wrap;
-  align-items: center;
-  gap: $sp-1 $sp-2;
-  min-height: $marker-size;
+  align-items: baseline;
+  gap: $sp-1 $sp-3;
 }
 
 .time {
-  font-size: $fs-label;
+  flex: 0 0 $time-col-width;
   color: $gray-500;
   font-variant-numeric: tabular-nums;
-}
 
-.actor {
-  overflow-wrap: anywhere;
+  @media (max-width: $feed-stack-breakpoint) {
+    flex-basis: 100%;
+  }
 }
 
 .meta {
@@ -164,6 +93,12 @@ $event-gap: $sp-4;
   color: $gray-500;
 }
 
+.comment {
+  color: $gray-700;
+  font-style: italic;
+  overflow-wrap: anywhere;
+}
+
 .note {
   font-size: $fs-label;
   color: $gray-500;

src/webparts/requestPortal/shared/approval/history/ApprovalHistoryFeed.tsx

@@ -1,10 +1,9 @@
 import * as React from 'react';
 import { ApprovalListService } from '../approvalList.service';
-import { IApprovalHistory, roundOutcome } from './historyModel';
+import { IApprovalHistory } from './historyModel';
 import { loadApprovalHistory } from './approvalHistory.service';
 import { CurrentHolderRow } from './CurrentHolderRow';
 import { HistoryEventRow } from './HistoryEventRow';
-import { RoundTitle } from './RoundTitle';
 import { HISTORY_TEXT } from './historyTexts';
 import styles from './ApprovalHistory.module.scss';
 
@@ -50,22 +49,18 @@ export const ApprovalHistoryFeed: React.FC<Props> = ({ approval, dataListRef, re
 
   return (
     <div className={styles.feed}>
-      {rounds.map((round, i) => {
-        // «Сейчас» — только у последней (верхней) отправки: прошлые уже закончились.
-        const isLatest = i === 0;
-        const isActive = isLatest && current.length > 0;
-        return (
-          <section key={round.number} className={styles.round}>
-            <RoundTitle number={round.number} outcome={roundOutcome(round, isActive)} />
-            <ul className={styles.events}>
-              {isLatest && current.map((holder, j) => <CurrentHolderRow key={`current-${j}`} holder={holder} />)}
-              {round.events.map((event, j) => (
-                <HistoryEventRow key={`${event.time}-${event.kind}-${j}`} event={event} />
-              ))}
-            </ul>
-          </section>
-        );
-      })}
+      {rounds.map((round, i) => (
+        <section key={round.number} className={styles.round}>
+          <div className={styles.roundTitle}>{HISTORY_TEXT.round(round.number)}</div>
+          <ul className={styles.events}>
+            {/* «Сейчас» — только у последней (верхней) отправки. */}
+            {i === 0 && current.map((holder, j) => <CurrentHolderRow key={`current-${j}`} holder={holder} />)}
+            {round.events.map((event, j) => (
+              <HistoryEventRow key={`${event.time}-${event.kind}-${j}`} event={event} />
+            ))}
+          </ul>
+        </section>
+      ))}
       <div className={styles.note}>{HISTORY_TEXT.partialNote}</div>
     </div>
   );

src/webparts/requestPortal/shared/approval/history/CurrentHolderRow.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Badge } from '@tnsu/ui-kit';
 import { formatDuration, ICurrentHolder } from './historyModel';
 import { HISTORY_TEXT } from './historyTexts';
 import styles from './ApprovalHistory.module.scss';
@@ -12,21 +11,15 @@ interface Props {
 export const CurrentHolderRow: React.FC<Props> = ({ holder }) => {
   const waitedMs = holder.since ? Date.now() - new Date(holder.since).getTime() : NaN;
   return (
-    <li className={styles.event}>
-      {/* Пульсирующий кружок — единственное «живое» место ленты: всё остальное уже
-          случилось, а это ещё ждёт. */}
+    <li className={`${styles.event} ${styles.current}`}>
       <span className={`${styles.marker} ${styles.markerCurrent}`} aria-hidden="true">
         ●
       </span>
       <div className={styles.eventBody}>
-        <div className={styles.eventHead}>
-          <Badge variant="info" size="sm">
-            {HISTORY_TEXT.awaiting}
-          </Badge>
-          {waitedMs > 0 && <span className={styles.meta}>{HISTORY_TEXT.waiting(formatDuration(waitedMs))}</span>}
-        </div>
-        <div className={styles.actor}>
+        <div className={styles.eventLine}>
+          <span className={styles.time}>{HISTORY_TEXT.now}</span>
           <strong>{holder.person || '—'}</strong>
+          {waitedMs > 0 && <span className={styles.meta}>{HISTORY_TEXT.waiting(formatDuration(waitedMs))}</span>}
         </div>
         {holder.stepTitle && <div className={styles.meta}>{holder.stepTitle}</div>}
       </div>

src/webparts/requestPortal/shared/approval/history/HistoryEventRow.tsx

@@ -1,20 +1,22 @@
 import * as React from 'react';
-import { Badge } from '@tnsu/ui-kit';
-import { ApprovalComment, CommentTone } from '../ui/ApprovalComment';
-import { formatDuration, IHistoryEvent } from './historyModel';
-import { BADGE_BY_TONE, KIND_VIEW } from './historyKinds';
-import { eventDetails, eventLabel, HISTORY_TEXT } from './historyTexts';
+import { formatDuration, HistoryEventKind, IHistoryEvent } from './historyModel';
+import { eventAction, HISTORY_TEXT } from './historyTexts';
 import styles from './ApprovalHistory.module.scss';
 
 interface Props {
   event: IHistoryEvent;
 }
 
-const MARKER_CLASS: Record<CommentTone, string> = {
-  positive: styles.markerPositive,
-  negative: styles.markerNegative,
-  warning: styles.markerWarning,
-  neutral: styles.markerNeutral,
+// Значок и цвет события — по смыслу решения, как у статусов в StatusBadge.
+const MARKER: Record<HistoryEventKind, { symbol: string; className: string }> = {
+  submitted: { symbol: '↗', className: styles.markerNeutral },
+  resubmitted: { symbol: '↗', className: styles.markerNeutral },
+  approved: { symbol: '✓', className: styles.markerPositive },
+  executed: { symbol: '✓', className: styles.markerPositive },
+  returned: { symbol: '↩', className: styles.markerWarning },
+  rejected: { symbol: '✕', className: styles.markerNegative },
+  delegated: { symbol: '→', className: styles.markerNeutral },
+  replaced: { symbol: '⇄', className: styles.markerNeutral },
 };
 
 export function formatDateTime(iso: string): string {
@@ -24,35 +26,26 @@ export function formatDateTime(iso: string): string {
   return `${pad(d.getDate())}.${pad(d.getMonth() + 1)}.${d.getFullYear()} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
 }
 
-/**
- * Одно событие ленты. Сверху — ЧТО произошло (цветная плашка) и когда: это то,
- * за чем пользователь открывает историю. Ниже — кто, на каком шаге и почему.
- */
+/** Одно событие ленты: время · кто — что сделал · за сколько + комментарий. */
 export const HistoryEventRow: React.FC<Props> = ({ event }) => {
-  const view = KIND_VIEW[event.kind];
-  const details = eventDetails(event);
-
+  const marker = MARKER[event.kind];
   return (
     <li className={styles.event}>
-      <span className={`${styles.marker} ${MARKER_CLASS[view.tone]}`} aria-hidden="true">
-        {view.symbol}
+      <span className={`${styles.marker} ${marker.className}`} aria-hidden="true">
+        {marker.symbol}
       </span>
       <div className={styles.eventBody}>
-        <div className={styles.eventHead}>
-          <Badge variant={BADGE_BY_TONE[view.tone]} size="sm">
-            {eventLabel(event.kind)}
-          </Badge>
+        <div className={styles.eventLine}>
           <span className={styles.time}>{formatDateTime(event.time)}</span>
+          <span>
+            <strong>{event.actor || '—'}</strong> — {eventAction(event)}
+          </span>
           {event.durationMs !== undefined && (
             <span className={styles.meta}>{HISTORY_TEXT.took(formatDuration(event.durationMs))}</span>
           )}
         </div>
-        <div className={styles.actor}>
-          <strong>{event.actor || '—'}</strong>
-          {details && <span className={styles.meta}> · {details}</span>}
-        </div>
         {event.stepTitle && <div className={styles.meta}>{event.stepTitle}</div>}
-        {event.comment && <ApprovalComment text={event.comment} tone={view.tone} />}
+        {event.comment && <div className={styles.comment}>«{event.comment}»</div>}
       </div>
     </li>
   );

src/webparts/requestPortal/shared/approval/history/RoundTitle.tsx

@@ -1,27 +0,0 @@
-import * as React from 'react';
-import { Badge } from '@tnsu/ui-kit';
-import { RoundOutcome } from './historyModel';
-import { outcomeBadge } from './historyKinds';
-import { HISTORY_TEXT, outcomeLabel } from './historyTexts';
-import styles from './ApprovalHistory.module.scss';
-
-interface Props {
-  number: number;
-  /** Чем закончилась отправка (см. roundOutcome); нет — только номер. */
-  outcome?: RoundOutcome;
-}
-
-/**
- * Заголовок отправки: номер + плашка итога. По одним заголовкам видна вся
- * судьба заявки («вернули, вернули, в работе») без чтения событий.
- */
-export const RoundTitle: React.FC<Props> = ({ number, outcome }) => (
-  <div className={styles.roundTitle}>
-    <span className={styles.roundNumber}>{HISTORY_TEXT.round(number)}</span>
-    {outcome && (
-      <Badge variant={outcomeBadge(outcome)} size="sm">
-        {outcomeLabel(outcome)}
-      </Badge>
-    )}
-  </div>
-);

src/webparts/requestPortal/shared/approval/history/historyKinds.ts

@@ -1,37 +0,0 @@
-import { BadgeVariant } from '@tnsu/ui-kit';
-import { CommentTone } from '../ui/ApprovalComment';
-import { HistoryEventKind, RoundOutcome } from './historyModel';
-
-/** Как событие выглядит в ленте: значок в кружке и цвет (кружок, плашка, комментарий). */
-export interface IKindView {
-  symbol: string;
-  tone: CommentTone;
-}
-
-// Цвет — по смыслу решения, как у статусов в StatusBadge: зелёное — пройдено,
-// золотое — вернули, красное — отказ, синее — служебное движение заявки.
-export const KIND_VIEW: Record<HistoryEventKind, IKindView> = {
-  submitted: { symbol: '↗', tone: 'neutral' },
-  resubmitted: { symbol: '↗', tone: 'neutral' },
-  approved: { symbol: '✓', tone: 'positive' },
-  executed: { symbol: '✓', tone: 'positive' },
-  returned: { symbol: '↩', tone: 'warning' },
-  rejected: { symbol: '✕', tone: 'negative' },
-  delegated: { symbol: '→', tone: 'neutral' },
-  replaced: { symbol: '⇄', tone: 'neutral' },
-};
-
-export const BADGE_BY_TONE: Record<CommentTone, BadgeVariant> = {
-  positive: 'success',
-  negative: 'danger',
-  warning: 'warning',
-  neutral: 'neutral',
-};
-
-/**
- * Цвет плашки итога отправки: у решения — тот же, что у его события в ленте;
- * «в работе» — синий, как плашка «Ожидает решения» у текущего шага.
- */
-export function outcomeBadge(outcome: RoundOutcome): BadgeVariant {
-  return outcome === 'inProgress' ? 'info' : BADGE_BY_TONE[KIND_VIEW[outcome].tone];
-}

src/webparts/requestPortal/shared/approval/history/historyModel.test.ts

@@ -1,11 +1,8 @@
 import {
   buildApprovalHistory,
   formatDuration,
-  HistoryEventKind,
-  IHistoryRound,
   IRequestVersion,
   IRouteRowVersion,
-  roundOutcome,
   rowEvents,
   submitEvents,
 } from './historyModel';
@@ -134,44 +131,6 @@ describe('buildApprovalHistory', () => {
   });
 });
 
-/** Отправка из событий заданных видов — в том же порядке, что в ленте: НОВЫЕ СВЕРХУ. */
-function round(...kinds: HistoryEventKind[]): IHistoryRound {
-  return { number: 1, events: kinds.map((kind) => ({ kind, time: '2026-09-24T10:00:00Z', actor: 'Анна Ким' })) };
-}
-
-describe('roundOutcome', () => {
-  it('возврат — итог отправки', () => {
-    expect(roundOutcome(round('returned', 'approved', 'submitted'), false)).toBe('returned');
-  });
-
-  it('отказ — итог отправки', () => {
-    expect(roundOutcome(round('rejected', 'submitted'), false)).toBe('rejected');
-  });
-
-  it('возврат важнее «в работе»: вернули, а заново ещё не отправили', () => {
-    expect(roundOutcome(round('returned', 'submitted'), true)).toBe('returned');
-  });
-
-  it('заявка сейчас у кого-то на шаге — «в работе», даже если часть шагов уже согласована', () => {
-    expect(roundOutcome(round('resubmitted'), true)).toBe('inProgress');
-    expect(roundOutcome(round('approved', 'resubmitted'), true)).toBe('inProgress');
-  });
-
-  it('без возврата и не в работе — самое свежее решение', () => {
-    expect(roundOutcome(round('approved', 'approved', 'resubmitted'), false)).toBe('approved');
-    expect(roundOutcome(round('executed', 'approved', 'submitted'), false)).toBe('executed');
-  });
-
-  it('делегирование и замена решением не считаются', () => {
-    expect(roundOutcome(round('delegated', 'approved', 'submitted'), false)).toBe('approved');
-  });
-
-  it('решений нет — итога нет', () => {
-    expect(roundOutcome(round('delegated', 'submitted'), false)).toBeUndefined();
-    expect(roundOutcome(round(), false)).toBeUndefined();
-  });
-});
-
 describe('formatDuration', () => {
   it('минуты, часы, дни', () => {
     expect(formatDuration(30 * 1000)).toBe('1 мин');

src/webparts/requestPortal/shared/approval/history/historyModel.ts

@@ -181,42 +181,6 @@ export function buildApprovalHistory(rows: IRouteRowVersion[][], requestVersions
   };
 }
 
-/** Виды событий-решений — только ими может закончиться отправка. */
-export type DecisionKind = 'approved' | 'executed' | 'returned' | 'rejected';
-
-/** Итог отправки для плашки в её заголовке. 'inProgress' — заявка сейчас у кого-то на шаге. */
-export type RoundOutcome = DecisionKind | 'inProgress';
-
-const DECISION_EVENT_KINDS: HistoryEventKind[] = ['approved', 'executed', 'returned', 'rejected'];
-// Решения, после которых отправка заканчивается: дальше автор либо правит
-// и отправляет заново (новая отправка), либо заявка закрыта отказом.
-const CLOSING_KINDS: DecisionKind[] = ['returned', 'rejected'];
-
-function isDecisionKind(kind: HistoryEventKind): kind is DecisionKind {
-  return DECISION_EVENT_KINDS.indexOf(kind) >= 0;
-}
-
-/**
- * Чем закончилась отправка. Правила по порядку:
- *   1. был возврат или отказ — это итог (отправка на нём оборвалась);
- *   2. заявка сейчас у кого-то на шаге — «в работе»;
- *   3. иначе — последнее решение («согласовано» / «выполнено»);
- *   4. решений нет (история сохранилась не полностью) — итога нет.
- * @param round отправка; события в ней НОВЫЕ СВЕРХУ (см. buildApprovalHistory)
- * @param isActive у кого-то на шаге сейчас именно эта отправка — имеет смысл
- *   только для последней (верхней)
- */
-export function roundOutcome(round: IHistoryRound, isActive: boolean): RoundOutcome | undefined {
-  for (const event of round.events) {
-    if (isDecisionKind(event.kind) && CLOSING_KINDS.indexOf(event.kind) >= 0) return event.kind;
-  }
-  if (isActive) return 'inProgress';
-  for (const event of round.events) {
-    if (isDecisionKind(event.kind)) return event.kind;
-  }
-  return undefined;
-}
-
 const MINUTE_MS = 60 * 1000;
 const HOUR_MS = 60 * MINUTE_MS;
 const DAY_MS = 24 * HOUR_MS;

src/webparts/requestPortal/shared/approval/history/historyTexts.ts

@@ -1,4 +1,4 @@
-import { HistoryEventKind, IHistoryEvent, RoundOutcome } from './historyModel';
+import { HistoryEventKind, IHistoryEvent } from './historyModel';
 
 // Тексты «Истории согласования» — в одном месте (задел под локализацию).
 // Формулировки безличные («согласовано», а не «согласовала»): пол по имени не
@@ -9,43 +9,28 @@ export const HISTORY_TEXT = {
   empty: 'Пока нет событий: заявка ещё не отправлялась.',
   errorPrefix: 'Не удалось загрузить историю:',
   round: (n: number): string => `Отправка ${n}`,
-  inProgress: 'В работе',
-  awaiting: 'Ожидает решения',
-  waiting: (duration: string): string => `уже ${duration}`,
+  now: 'сейчас',
+  waiting: (duration: string): string => `ждёт ${duration}`,
   took: (duration: string): string => `за ${duration}`,
-  delegatedTo: (name: string): string => `кому: ${name}`,
   partialNote:
     'Показаны события, сохранённые в SharePoint. Решения из отправок до включения истории могли не сохраниться.',
 };
 
-// С заглавной: текст стоит первым словом в плашке события.
-const ACTION_LABEL: Record<HistoryEventKind, string> = {
-  submitted: 'Отправлено на согласование',
-  resubmitted: 'Отправлено повторно',
-  approved: 'Согласовано',
-  executed: 'Выполнено',
-  returned: 'Возвращено на доработку',
-  rejected: 'Отклонено',
-  delegated: 'Передано',
-  replaced: 'Заменён исполнитель',
+const ACTION: Record<HistoryEventKind, string> = {
+  submitted: 'отправлено на согласование',
+  resubmitted: 'отправлено повторно',
+  approved: 'согласовано',
+  executed: 'выполнено',
+  returned: 'возвращено на доработку',
+  rejected: 'отклонено',
+  delegated: 'передано',
+  replaced: 'заменён исполнитель',
 };
 
-/** Что произошло — текст плашки: «Согласовано», «Возвращено на доработку». */
-export function eventLabel(kind: HistoryEventKind): string {
-  return ACTION_LABEL[kind];
-}
-
-/** Итог отправки — текст плашки в её заголовке. Решения — теми же словами, что в ленте. */
-export function outcomeLabel(outcome: RoundOutcome): string {
-  return outcome === 'inProgress' ? HISTORY_TEXT.inProgress : ACTION_LABEL[outcome];
-}
-
-/**
- * Над кем действие — дописывается к имени автора: «кому: Асель Самаева» для
- * передачи, «Иванов → Петров» для замены. У прочих событий пусто.
- */
-export function eventDetails(event: IHistoryEvent): string {
-  if (event.kind === 'delegated' && event.target) return HISTORY_TEXT.delegatedTo(event.target);
-  if (event.kind === 'replaced') return `${event.previous || '—'} → ${event.target || '—'}`;
-  return '';
+/** Что произошло — «согласовано», «передано: Асель Самаева», «заменён исполнитель: А → Б». */
+export function eventAction(event: IHistoryEvent): string {
+  const action = ACTION[event.kind];
+  if (event.kind === 'delegated' && event.target) return `${action}: ${event.target}`;
+  if (event.kind === 'replaced') return `${action}: ${event.previous || '—'} → ${event.target || '—'}`;
+  return action;
 }

src/webparts/requestPortal/shared/approval/ui/ApprovalComment.module.scss

@@ -22,8 +22,7 @@ $quote-line-height: 19px;
 }
 
 // Цвет — у полосы и кавычки, фон лишь подтон: текст должен читаться так же
-// спокойно, как остальная таблица, а не кричать. Белую карточку пробовали —
-// внутри формы она похожа на поле ввода.
+// спокойно, как остальная таблица, а не кричать.
 .neutral {
   border-left-color: $navy-600;
   background: $navy-50;

src/webparts/requestPortal/shared/approval/ui/ApprovalComment.tsx

@@ -3,7 +3,7 @@ import styles from './ApprovalComment.module.scss';
 import { REQUEST_STATUS } from '../models/statuses';
 import { useTextOverflow } from './useTextOverflow';
 
-export type CommentTone = 'positive' | 'negative' | 'warning' | 'neutral';
+type CommentTone = 'positive' | 'negative' | 'warning' | 'neutral';
 
 // Цвет полосы — по решению на шаге: причину отказа или возврата видно с первого
 // взгляда, ещё до того, как глаз дойдёт до колонки «Статус».
@@ -31,23 +31,18 @@ export interface IApprovalCommentProps {
   text: string;
   /** Статус строки маршрута (см. REQUEST_STATUS) — от него цвет полосы. */
   status?: string;
-  /**
-   * Цвет полосы напрямую — для мест, где статуса строки нет (напр. лента
-   * «Истории согласования» знает вид события, а не статус). Важнее status.
-   */
-  tone?: CommentTone;
 }
 
 /**
  * Комментарий участника маршрута к своему решению. Длинный текст свёрнут до
  * нескольких строк (см. $comment-visible-lines), остальное — по кнопке.
  */
-export const ApprovalComment: React.FC<IApprovalCommentProps> = ({ text, status, tone: toneProp }) => {
+export const ApprovalComment: React.FC<IApprovalCommentProps> = ({ text, status }) => {
   const [isExpanded, setIsExpanded] = React.useState(false);
   const textRef = React.useRef<HTMLDivElement>(null);
   const isClamped = useTextOverflow(textRef, text);
 
-  const tone = toneProp || (status && TONE_BY_STATUS[status]) || 'neutral';
+  const tone = (status && TONE_BY_STATUS[status]) || 'neutral';
   // В развёрнутом виде обрезки нет, и замер честно вернёт false, но кнопка
   // «Свернуть» при этом всё равно нужна.
   const showToggle = isExpanded || isClamped;

src/webparts/requestPortal/shared/approval/ui/ApprovalMatrix.tsx

@@ -211,8 +211,7 @@ export const ApprovalMatrix: React.FC<IApprovalMatrixProps> = ({
 
   // Комментарий занимает всю ширину между объединёнными колонками «Шаг» и
   // стрелок: «Согласующий» + «Должность» + те необязательные колонки, что
-  // сейчас показаны. Колонку действий не захватывает — её ячейка из строки
-  // участника объединена и на строку комментария (rowSpan у .matrixActions).
+  // сейчас показаны. Колонку действий не захватывает — в ней своя пустая ячейка.
   const optionalColumns = [hasDepartment, hasOrganization, hasStatuses, hasDates, hasSla];
   const commentColSpan = 2 + optionalColumns.filter(Boolean).length;
   const hasActionsCol = editable || hasRemovable;
@@ -338,11 +337,8 @@ export const ApprovalMatrix: React.FC<IApprovalMatrixProps> = ({
                           )}
                         </td>
                       )}
-                      {/* Кнопки — на участника вместе с его комментарием, как номер
-                          шага и стрелки: иначе стрелки стоят по центру пары строк,
-                          а кнопки — по центру одной, и они расходятся по высоте. */}
                       {hasActionsCol && (
-                        <td className={styles.matrixActions} rowSpan={r.comment ? 2 : 1}>
+                        <td className={styles.matrixActions}>
                           {editable && (
                             <button
                               type="button"
@@ -383,13 +379,14 @@ export const ApprovalMatrix: React.FC<IApprovalMatrixProps> = ({
                     </tr>
                     {/* Комментарий — отдельной строкой во всю ширину под участником:
                         в узкой колонке «Согласующий» текст ломался по слову на строку.
-                        Ячейки «Шаг», стрелок и действий её не повторяют — их накрывает
-                        rowSpan из строки участника. */}
+                        Ячейки «Шаг» и стрелок её не повторяют — их накрывает rowSpan
+                        (см. block.span); колонка действий — пустая ячейка. */}
                     {r.comment && (
                       <tr ref={registerRow(commentRowKey(rowKeys[i]))} className={commentClassNames.join(' ')}>
                         <td colSpan={commentColSpan} className={styles.commentCell}>
                           <ApprovalComment text={r.comment} status={r.status} />
                         </td>
+                        {hasActionsCol && <td />}
                       </tr>
                     )}
                   </React.Fragment>

src/webparts/requestPortal/shared/approval/ui/approval.module.scss

@@ -159,10 +159,9 @@
 
 // Строка участника, под которой идёт его комментарий (см. ApprovalComment):
 // разделитель между ними убираем, иначе комментарий читается как отдельная
-// запись маршрута. Объединённые ячейки (rowSpan) не трогаем: «Шаг» и стрелки
-// накрывают весь шаг, действия — участника с комментарием, и их нижняя
-// граница — это граница всей записи.
-.rowWithComment > td:not(.matrixStepCol):not(.matrixMoveCol):not(.matrixActions) {
+// запись маршрута. Ячейки «Шаг» и стрелок не трогаем — они объединены на весь
+// шаг (rowSpan), и их нижняя граница — это граница всего шага.
+.rowWithComment > td:not(.matrixStepCol):not(.matrixMoveCol) {
   border-bottom-color: transparent;
 }
 
@@ -389,6 +388,11 @@
     flex: 1 1 100%;
   }
 
+  // Пустая ячейка под колонкой действий на телефоне дала бы лишний отступ.
+  .commentRow > td:empty {
+    display: none;
+  }
+
   .matrixActions,
   .matrixMoveCol {
     justify-content: flex-start;