Sprint 2: attempt cards, file import button, question layout, radio/check, sticky save

- Replace attempts table with attempts-card-list cards - Custom import: sr-only file input + btn-styled label - question-editor-block: stack header on mobile, row from 520px - option marks: radio for single correct, checkbox for multiple - Fixed bottom actions on max-width 640px with draft status; hide in-flow panel - Update СПРИНТЫ_МОБИЛЬНЫЙ_ДИЗАЙН.md and DOC/ШАГИ/ШАГ_2026-04-27_003.md Made-with: Cursor
docs: sprint checklist use [x]/[ ] task list format
2026-04-27 19:38:42 +05:00 · 2026-04-27 19:35:57 +05:00 · 2026-04-27 19:35:08 +05:00
6 changed files with 499 additions and 157 deletions
@@ -0,0 +1,5 @@
+# Шаг 2026-04-27 — спринты мобильного UI и правки
+
+- Документ спринтов: [`docs/СПРИНТЫ_МОБИЛЬНЫЙ_ДИЗАЙН.md`](../../docs/СПРИНТЫ_МОБИЛЬНЫЙ_ДИЗАЙН.md) (спринт 1 выполнен в коде).
+- Стили: `actions-bar`, `version-card-list`, `list-row__meta-tail`, `inline-actions--block-mobile`, safe-area у `.cabinet-main`, `.btn--sm` / `.btn-ghost`, `assign-list` без пустой «коробки`.
+- Страницы: `TestDetail.jsx` (карточки версий, панель команд, назначение), `TestsList.jsx` (мета-строка).
@@ -0,0 +1,4 @@
+# Шаг 2026-04-27 — спринт 2 (мобильный UI)
+
+- См. [`docs/СПРИНТЫ_МОБИЛЬНЫЙ_ДИЗАЙН.md`](../../docs/СПРИНТЫ_МОБИЛЬНЫЙ_ДИЗАЙН.md): пункты 2.1–2.5 отмечены выполненными.
+- Реализация: `TestDetail.jsx` (прогоны карточками, импорт через label+input, заголовок вопроса, radio/checkbox, фикс-футер), `cabinet-theme.css` (классы спринта 2).
@@ -0,0 +1,36 @@
+# Спринты: мобильный UI кабинета тестов
+
+---
+
+## Спринт 1 — быстрые исправления
+
+**Цель:** выровнять кнопки, мета-строку списка, историю версий, назначение и safe-area; без смены контентной модели страниц.
+
+- [x] **1.1** Панель «Сохранить черновик / К списку»: убрать конфликт `inline-actions .btn { width: auto }` с `btn-primary` — колонка на всю ширину (`.actions-bar`)
+- [x] **1.2** Touch: `min-height` у `.btn--sm` (убрать, удалить вопрос, сделать активной…)
+- [x] **1.3** Список тестов: не разбивать «· v1» — хвост в `list-row__meta-tail` + `white-space: nowrap`
+- [x] **1.4** «История версий»: вместо `<table>` — карточки (`surface-card` + flex)
+- [x] **1.5** «Назначение»: не рендерить пустой `.assign-list` (убрать «коробку» без людей)
+- [x] **1.6** Сильнее рамка `.btn-ghost` (согласование с полями)
+- [x] **1.7** `padding-bottom` у `.cabinet-main` + `env(safe-area-inset-bottom)`
+- [x] **1.8** «Публикация»: на узком экране — кнопка на всю ширину (`.inline-actions--block-mobile`)
+
+**Файлы:** `frontend/src/styles/cabinet-theme.css`, `frontend/src/pages/TestDetail.jsx`, `frontend/src/pages/TestsList.jsx`.
+
+---
+
+## Спринт 2 — карточки, импорт, вопрос, радио/чек, фикс-футер
+
+- [x] **2.1** «Прогоны и разбор»: таблица заменена на список карточек (`.attempts-card-list`)
+- [x] **2.2** «Импорт из файла»: скрытый `input` + `label` с `.btn` (`.import-file-input` / `.import-file-label`)
+- [x] **2.3** «Вопрос N» + «Сгенерировать вопрос (ИИ)»: колонка на мобилке, ряд от `min-width: 520px` (`.question-editor-block__header`)
+- [x] **2.4** Варианты: `type="radio"` при одном верном, `checkbox` при нескольких
+- [x] **2.5** Моб. фикс-футер `≤640px` с «Сохранить» / «К списку» + статус черновика; панель в потоке скрыта
+
+**Файлы:** `frontend/src/styles/cabinet-theme.css`, `frontend/src/pages/TestDetail.jsx`.
+
+---
+
+## Спринт 3 — дизайн-токены (по желанию)
+
+- [ ] Единая шкала: `--control-height`, `--control-padding-x`, `--button-gap` — рефакторинг всех `inline-actions` и форм
@@ -622,7 +622,7 @@ export default function TestDetail() {
  );

  return (
-    <div className="test-detail-page">
+    <div className="test-detail-page test-detail-page--with-fixed-actions">
      <div className="cabinet-brick cabinet-brick--hero">
        <p className="link-back" style={{ marginTop: 0 }}>
          <Link to="/tests">← к списку</Link>
@@ -792,22 +792,23 @@ export default function TestDetail() {
        {draftQuestions.map((q, qi) => (
          <div
            key={q.key}
+            className="question-editor-block"
            style={{
              borderTop: '1px solid var(--border-subtle, #2a2a2a)',
              marginTop: '1rem',
              paddingTop: '1rem',
            }}
          >
-            <div
-              className="inline-actions"
-              style={{ marginBottom: 6, flexWrap: 'wrap', alignItems: 'center' }}
+            <div className="question-editor-block__header">
+              <label
+                className="form-label question-editor-block__title"
+                htmlFor={`qtext-${q.key}`}
              >
-              <label className="form-label" htmlFor={`qtext-${q.key}`} style={{ marginBottom: 0 }}>
                Вопрос {qi + 1}
              </label>
              <button
                type="button"
-                className="btn btn-ghost btn--sm"
+                className="btn btn-ghost btn--sm question-editor-block__ai-btn"
                disabled={aiQBusy != null}
                onClick={() => runAiGenerateQuestion(qi)}
              >
@@ -845,14 +846,18 @@ export default function TestDetail() {
            <p className="muted" style={{ marginBottom: 6, fontSize: 13 }}>
              Варианты
            </p>
-            <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
+            <ul className="question-options-list" style={{ listStyle: 'none', padding: 0, margin: 0 }}>
              {q.options.map((o, oi) => (
                <li
                  key={o.key}
+                  className="question-option-row"
                  style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 8, marginBottom: 8 }}
                >
                  <input
-                    type="checkbox"
+                    key={`${o.key}-${q.hasMultipleAnswers ? 'm' : 's'}`}
+                    className="question-option-row__mark"
+                    type={q.hasMultipleAnswers ? 'checkbox' : 'radio'}
+                    name={q.hasMultipleAnswers ? undefined : `q-${q.key}-correct`}
                    checked={o.isCorrect}
                    onChange={(e) => {
                      const v = e.target.checked;
@@ -936,10 +941,10 @@ export default function TestDetail() {
        </div>
      </AccSection>

-      <div className="cabinet-brick" style={{ marginTop: 0 }}>
+      <div className="cabinet-brick editor-actions-flow" style={{ marginTop: 0 }}>
        <div
-          className="inline-actions"
-          style={{ flexWrap: 'wrap', gap: '0.5rem', marginBottom: draftStatus ? '0.35rem' : 0 }}
+          className="actions-bar"
+          style={{ marginBottom: draftStatus ? '0.35rem' : 0 }}
        >
          <button type="button" className="btn btn-primary" onClick={saveDraft}>
            Сохранить черновик
@@ -949,54 +954,47 @@ export default function TestDetail() {
          </Link>
        </div>
        {draftStatus && (
-          <p className="muted" style={{ marginTop: 0, marginBottom: 0 }}>
+          <p className="muted editor-actions-status--flow" style={{ marginTop: 0, marginBottom: 0 }}>
            {draftStatus}
          </p>
        )}
      </div>
      <AccSection title="История версий" defaultOpen={false}>
-      <div className="surface-card" style={{ padding: 0, overflow: 'hidden' }}>
-        <table className="table-cabinet">
-          <thead>
-            <tr>
-              <th>Версия</th>
-              <th>Активна</th>
-              <th>Создана</th>
-              <th />
-            </tr>
-          </thead>
-          <tbody>
+        <ul className="version-card-list" aria-label="Список версий теста">
          {versions.map((r) => (
-              <tr key={r.id}>
-                <td>
+            <li key={r.id} className="surface-card version-card-list__item">
+              <div className="version-card-list__row">
+                <div className="version-card-list__main">
+                  <div className="version-card-list__title-line">
+                    <span className="font-headline" style={{ fontSize: '1rem' }}>
                      v{r.version}
+                    </span>
                    {r.is_active && (
-                    <span
-                      className="code-inline"
-                      style={{ marginLeft: '0.5rem', fontSize: '0.7rem' }}
-                    >
+                      <span className="code-inline" style={{ fontSize: '0.7rem' }}>
                        текущая
                      </span>
                    )}
-                </td>
-                <td>{r.is_active ? 'да' : 'нет'}</td>
-                <td className="mono">{fmtDt(r.created_at)}</td>
-                <td>
+                  </div>
+                  <p className="muted mono" style={{ margin: '0.4rem 0 0', fontSize: '0.8rem' }}>
+                    {fmtDt(r.created_at)}
+                  </p>
+                  <p className="muted" style={{ margin: '0.2rem 0 0', fontSize: '0.8rem' }}>
+                    Активна: {r.is_active ? 'да' : 'нет'}
+                  </p>
+                </div>
                {!r.is_active && (
                  <button
                    type="button"
-                      className="btn btn-ghost btn--sm"
+                    className="btn btn-ghost btn--sm version-card-list__action"
                    onClick={() => activateVersion(r.id)}
                  >
-                      сделать активной
+                    Сделать активной
                  </button>
                )}
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
              </div>
+            </li>
+          ))}
+        </ul>
      </AccSection>

      {attemptsList != null && attemptsList.length > 0 && (
@@ -1006,66 +1004,63 @@ export default function TestDetail() {
              {attemptsErr}
            </p>
          )}
-          <div className="surface-card" style={{ padding: 0, overflow: 'auto' }}>
-            <table className="table-cabinet">
-              <thead>
-                <tr>
-                  <th>Когда</th>
-                  <th>Участник</th>
-                  <th>v</th>
-                  <th>Результат</th>
-                  <th />
-                </tr>
-              </thead>
-              <tbody>
-                {attemptsList.map((a) => (
-                  <tr key={a.id}>
-                    <td className="mono" style={{ whiteSpace: 'nowrap' }}>
-                      {a.completedAt
+          <ul className="attempts-card-list" aria-label="Список прогонов">
+            {attemptsList.map((a) => {
+              const when = a.completedAt
                ? fmtDt(a.completedAt)
                : a.startedAt
                  ? fmtDt(a.startedAt)
-                          : '—'}
-                    </td>
-                    <td>
-                      {a.attempterName || '—'}
-                      {a.attempterLogin && (
-                        <span className="code-inline" style={{ fontSize: 11, marginLeft: 6 }}>
-                          {a.attempterLogin}
-                        </span>
-                      )}
-                    </td>
-                    <td>v{a.testVersion}</td>
-                    <td>
-                      {a.status === 'completed' && a.totalQuestions != null ? (
+                  : '—';
+              const result =
+                a.status === 'completed' && a.totalQuestions != null ? (
                  <>
                    {a.correctCount}/{a.totalQuestions}
                    {a.passed ? ' · зачёт' : ' · незачёт'}
                  </>
                ) : (
                  a.status
+                );
+              return (
+                <li key={a.id} className="surface-card attempts-card-list__item">
+                  <div className="attempts-card-list__row">
+                    <div className="attempts-card-list__main">
+                      <p className="muted attempts-card-list__when mono" style={{ margin: 0, fontSize: '0.8rem' }}>
+                        {when}
+                      </p>
+                      <p className="attempts-card-list__who" style={{ margin: '0.35rem 0 0', fontWeight: 600 }}>
+                        {a.attempterName || '—'}
+                        {a.attempterLogin && (
+                          <span className="code-inline" style={{ fontSize: 11, marginLeft: 6 }}>
+                            {a.attempterLogin}
+                          </span>
                        )}
-                    </td>
-                    <td>
+                      </p>
+                      <p className="muted" style={{ margin: '0.25rem 0 0', fontSize: '0.85rem' }}>
+                        v{a.testVersion} ·{' '}
+                        <span className="attempts-card-list__result">{result}</span>
+                      </p>
+                    </div>
                    {a.status === 'completed' && (
                      <Link
                        to={`/tests/${id}/attempts/${a.id}/review`}
-                          className="btn btn-ghost btn--sm"
+                        className="btn btn-ghost btn--sm attempts-card-list__action"
                      >
                        Разбор
                      </Link>
                    )}
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
                  </div>
+                </li>
+              );
+            })}
+          </ul>
        </AccSection>
      )}

      <AccSection title="Публикация (видимость в списке)" defaultOpen={false}>
-      <div className="inline-actions" style={{ marginTop: '0.5rem' }}>
+      <div
+        className="inline-actions inline-actions--block-mobile"
+        style={{ marginTop: '0.5rem' }}
+      >
        {test?.chainActive !== false ? (
          <button
            type="button"
@@ -1089,15 +1084,23 @@ export default function TestDetail() {
      </AccSection>

      <AccSection title="Импорт из файла" defaultOpen={false}>
-      <div className="inline-actions" style={{ marginBottom: '0.5rem' }}>
+      <div className="import-file-row" style={{ marginBottom: '0.5rem' }}>
        <input
+          id="import-test-file"
+          className="import-file-input"
          type="file"
          accept=".pdf,.docx,.txt,.md,application/pdf"
          onChange={onImportFile}
          disabled={importBusy}
          aria-label="Выбрать файл для импорта"
        />
-        {importBusy && <span className="text-muted">Обработка…</span>}
+        <label
+          htmlFor="import-test-file"
+          className={`btn btn-ghost import-file-label${importBusy ? ' is-busy' : ''}`}
+          style={importBusy ? { pointerEvents: 'none' } : undefined}
+        >
+          {importBusy ? 'Обработка…' : 'Выбрать файл'}
+        </label>
      </div>
      {importErr && (
        <p className="error-text" role="alert">
@@ -1191,12 +1194,8 @@ export default function TestDetail() {
            </select>
            {assignLoadBusy && <span className="text-muted">Загрузка…</span>}
          </div>
+          {assignPeople.length > 0 ? (
            <div className="assign-list" role="group" aria-label="Список сотрудников">
-            {assignPeople.length === 0 && !assignLoadBusy && (
-              <p className="text-muted" style={{ margin: '0.5rem 0' }}>
-                Нет подходящих записей. Смените фильтры или поиск.
-              </p>
-            )}
              {assignPeople.map((p) => {
                const k = assignPersonKey(p);
                const picked = assignSelected.has(k);
@@ -1226,6 +1225,13 @@ export default function TestDetail() {
                );
              })}
            </div>
+          ) : (
+            !assignLoadBusy && (
+              <p className="text-muted" style={{ margin: '0.5rem 0' }}>
+                Нет подходящих записей. Смените фильтры или поиск.
+              </p>
+            )
+          )}
          <div className="inline-actions" style={{ marginTop: '0.75rem' }}>
            <button
              type="button"
@@ -1242,6 +1248,28 @@ export default function TestDetail() {
          {assignMsg && <p className="text-muted">{assignMsg}</p>}
        </AccSection>
      )}
+
+      <div
+        className="test-detail-fixed-actions"
+        role="region"
+        aria-label="Быстрые действия с черновиком"
+      >
+        <div className="test-detail-fixed-actions__inner">
+          {draftStatus && (
+            <p className="muted test-detail-fixed-actions__status" role="status">
+              {draftStatus}
+            </p>
+          )}
+          <div className="actions-bar">
+            <button type="button" className="btn btn-primary" onClick={saveDraft}>
+              Сохранить черновик
+            </button>
+            <Link to="/tests" className="btn btn-ghost">
+              К списку
+            </Link>
+          </div>
+        </div>
+      </div>
    </div>
  );
 }
@@ -106,11 +106,7 @@ export default function TestsList() {
                <span className="list-row__title">{t.title}</span>
                <span className="list-row__meta">
                  {formatTestAuthorLabel(user, t.created_by, t.author_full_name)}
-                  <span className="list-row__meta-sep" aria-hidden>
-                    {' '}
-                    ·{' '}
-                  </span>
-                  v{t.version}
+                  <span className="list-row__meta-tail">{' · '}v{t.version}</span>
                </span>
              </Link>
            </div>
@@ -151,11 +147,9 @@ export default function TestsList() {
                    <span className="list-row__title">{t.title}</span>
                    <span className="list-row__meta">
                      {formatTestAuthorLabel(user, t.created_by, t.author_full_name)}
-                      <span className="list-row__meta-sep" aria-hidden>
-                        {' '}
-                        ·{' '}
+                      <span className="list-row__meta-tail">
+                        {' · '}v{t.version} · скрыт
                      </span>
-                      v{t.version} · скрыт
                    </span>
                  </Link>
                </div>
@@ -248,7 +248,7 @@ code,
 .btn-ghost {
  background: transparent;
  color: var(--primary);
-  border-color: color-mix(in srgb, var(--outline-variant) 50%, transparent);
+  border-color: color-mix(in srgb, var(--outline-variant) 70%, transparent);
 }

 .btn-ghost:hover {
@@ -264,8 +264,11 @@ code,

 .btn--sm {
  font-size: 0.8rem;
-  padding: 0.35rem 0.6rem;
+  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
+  min-height: 2.75rem;
+  min-width: 2.75rem;
+  box-sizing: border-box;
 }

 /* --- App shell (cabinet/base) --- */
@@ -378,7 +381,7 @@ code,
  max-width: var(--max-content);
  width: 100%;
  margin: 0 auto;
-  padding: 1.25rem 1.25rem 2.5rem;
+  padding: 1.25rem 1.25rem calc(2.5rem + env(safe-area-inset-bottom, 0px));
 }

 /* Cards & lists */
@@ -431,6 +434,11 @@ code,
  margin-top: 0.25rem;
 }

+/* «· v1» и хвост мета — не рвём посередине (мобайл) */
+.list-row__meta-tail {
+  white-space: nowrap;
+}
+
 /* Вся плитка — одна ссылка */
 .list-row--action {
  padding: 0;
@@ -609,7 +617,8 @@ code,
 }

 .assign-list {
-  max-height: min(50vh, 22rem);
+  max-height: min(40vh, 18rem);
+  min-height: 0;
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--outline-variant) 30%, transparent);
  border-radius: 0.75rem;
@@ -755,6 +764,57 @@ code,
  color: var(--on-surface-variant);
 }

+/* История версий: карточки вместо таблицы (мобайл) */
+.version-card-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.version-card-list__item {
+  margin: 0;
+}
+
+.version-card-list__row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.version-card-list__main {
+  min-width: 0;
+  flex: 1 1 12rem;
+}
+
+.version-card-list__title-line {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.version-card-list__action {
+  flex: 0 0 auto;
+  align-self: center;
+}
+
+@media (max-width: 520px) {
+  .version-card-list__row {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .version-card-list__action {
+    width: 100%;
+    align-self: stretch;
+  }
+}
+
 .draft-block {
  margin-top: 1.25rem;
  padding: 1rem;
@@ -783,3 +843,218 @@ code,
 .inline-actions .btn {
  width: auto;
 }
+
+/* Нижняя панель: полноширинные primary + secondary (без перебития .inline-actions .btn) */
+.actions-bar {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 0.5rem;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.actions-bar .btn-primary {
+  width: 100%;
+  margin-top: 0;
+  box-sizing: border-box;
+}
+
+.actions-bar a.btn,
+.actions-bar .btn.btn-ghost {
+  display: block;
+  width: 100%;
+  text-align: center;
+  box-sizing: border-box;
+}
+
+@media (min-width: 480px) {
+  .actions-bar {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+
+  .actions-bar .btn-primary {
+    width: auto;
+    min-width: 12rem;
+    flex: 1 1 auto;
+  }
+
+  .actions-bar a.btn,
+  .actions-bar .btn.btn-ghost {
+    display: inline-block;
+    width: auto;
+    flex: 0 0 auto;
+  }
+}
+
+@media (max-width: 520px) {
+  .inline-actions--block-mobile {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .inline-actions--block-mobile .btn {
+    width: 100%;
+    box-sizing: border-box;
+  }
+}
+
+/* --- Спринт 2: редактор вопроса, прогоны, импорт, фикс. футер --- */
+
+.question-editor-block__header {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.question-editor-block__title {
+  margin-bottom: 0;
+  font-size: 0.95rem;
+}
+
+.question-editor-block__ai-btn {
+  width: 100%;
+  text-align: center;
+  box-sizing: border-box;
+  align-self: stretch;
+}
+
+@media (min-width: 520px) {
+  .question-editor-block__header {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .question-editor-block__ai-btn {
+    width: auto;
+    align-self: center;
+  }
+}
+
+/* Спринт 2.4: radio = один верный, checkbox = несколько (нативная метафора) */
+.question-option-row__mark {
+  width: 1.15rem;
+  height: 1.15rem;
+  flex-shrink: 0;
+  margin-top: 0.1rem;
+  cursor: pointer;
+  accent-color: var(--primary);
+}
+
+/* Список прогонов: карточки */
+.attempts-card-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.attempts-card-list__item {
+  margin: 0;
+}
+
+.attempts-card-list__row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.attempts-card-list__main {
+  flex: 1 1 12rem;
+  min-width: 0;
+}
+
+.attempts-card-list__action {
+  flex: 0 0 auto;
+}
+
+@media (max-width: 520px) {
+  .attempts-card-list__row {
+    flex-direction: column;
+  }
+
+  .attempts-card-list__action {
+    width: 100%;
+    text-align: center;
+  }
+}
+
+/* Импорт: скрытый input + кнопка-стиль */
+.import-file-input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.import-file-row {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.import-file-label {
+  margin: 0;
+  cursor: pointer;
+  width: auto;
+  display: inline-block;
+  box-sizing: border-box;
+}
+
+/* Мобилка: закреплённый футер с «Сохранить» (дубль панели скрыт) */
+.test-detail-fixed-actions {
+  display: none;
+}
+
+@media (max-width: 640px) {
+  .test-detail-page--with-fixed-actions {
+    padding-bottom: calc(6.5rem + env(safe-area-inset-bottom, 0px));
+  }
+
+  .test-detail-page--with-fixed-actions .editor-actions-flow {
+    display: none;
+  }
+
+  .test-detail-fixed-actions {
+    display: block;
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 30;
+    padding: 0.65rem 1.25rem calc(0.65rem + env(safe-area-inset-bottom, 0px));
+    background: color-mix(in srgb, var(--surface) 96%, #fff);
+    border-top: 1px solid color-mix(in srgb, var(--outline-variant) 45%, transparent);
+    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08);
+  }
+
+  .test-detail-fixed-actions__inner {
+    max-width: var(--max-content);
+    margin: 0 auto;
+  }
+
+  .test-detail-fixed-actions__status {
+    margin: 0 0 0.45rem;
+    font-size: 0.8rem;
+    line-height: 1.3;
+    max-height: 3.2rem;
+    overflow: auto;
+  }
+}