Mobile UI sprint 1: actions-bar, version cards, meta line, safe area

- Add docs/СПРИНТЫ_МОБИЛЬНЫЙ_ДИЗАЙН.md and DOC/ШАГИ/ШАГ_2026-04-27_002.md
- cabinet-theme: .actions-bar, .version-card-list, .list-row__meta-tail,
  .inline-actions--block-mobile, btn--sm/ghost tweaks, safe-area main padding
- TestDetail: replace version table with cards; command panel uses actions-bar;
  assign list only when there are people; publication full-width on narrow
- TestsList: version suffix in non-breaking tail span

Made-with: Cursor

frontend/src/pages/TestDetail.jsx

@@ -938,8 +938,8 @@ export default function TestDetail() {
 
       <div className="cabinet-brick" 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}>
             Сохранить черновик
@@ -955,48 +955,41 @@ export default function TestDetail() {
         )}
       </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>
-            {versions.map((r) => (
-              <tr key={r.id}>
-                <td>
-                  v{r.version}
-                  {r.is_active && (
-                    <span
-                      className="code-inline"
-                      style={{ marginLeft: '0.5rem', fontSize: '0.7rem' }}
-                    >
-                      текущая
+        <ul className="version-card-list" aria-label="Список версий теста">
+          {versions.map((r) => (
+            <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>
-                  )}
-                </td>
-                <td>{r.is_active ? 'да' : 'нет'}</td>
-                <td className="mono">{fmtDt(r.created_at)}</td>
-                <td>
-                  {!r.is_active && (
-                    <button
-                      type="button"
-                      className="btn btn-ghost btn--sm"
-                      onClick={() => activateVersion(r.id)}
-                    >
-                      сделать активной
-                    </button>
-                  )}
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
+                    {r.is_active && (
+                      <span className="code-inline" style={{ fontSize: '0.7rem' }}>
+                        текущая
+                      </span>
+                    )}
+                  </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 version-card-list__action"
+                    onClick={() => activateVersion(r.id)}
+                  >
+                    Сделать активной
+                  </button>
+                )}
+              </div>
+            </li>
+          ))}
+        </ul>
       </AccSection>
 
       {attemptsList != null && attemptsList.length > 0 && (
@@ -1065,7 +1058,10 @@ export default function TestDetail() {
       )}
 
       <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"
@@ -1191,41 +1187,44 @@ export default function TestDetail() {
             </select>
             {assignLoadBusy && <span className="text-muted">Загрузка…</span>}
           </div>
-          <div className="assign-list" role="group" aria-label="Список сотрудников">
-            {assignPeople.length === 0 && !assignLoadBusy && (
+          {assignPeople.length > 0 ? (
+            <div className="assign-list" role="group" aria-label="Список сотрудников">
+              {assignPeople.map((p) => {
+                const k = assignPersonKey(p);
+                const picked = assignSelected.has(k);
+                return (
+                  <label
+                    key={k}
+                    className={`assign-row${picked ? ' assign-row--selected' : ''}`}
+                  >
+                    <input
+                      type="checkbox"
+                      checked={picked}
+                      onChange={() => toggleAssignPerson(p)}
+                    />
+                    <span className="assign-row__text">
+                      <span className="assign-row__fio">{p.fio}</span>
+                      {p.webLogin && (
+                        <span className="assign-row__login">{p.webLogin}</span>
+                      )}
+                      <span className="assign-row__meta">
+                        {p.departments || '—'}
+                        {p.clinicUserId
+                          ? ' · есть учётка в модуле'
+                          : ' · нет учётки (создадим при назначении)'}
+                      </span>
+                    </span>
+                  </label>
+                );
+              })}
+            </div>
+          ) : (
+            !assignLoadBusy && (
               <p className="text-muted" style={{ margin: '0.5rem 0' }}>
                 Нет подходящих записей. Смените фильтры или поиск.
               </p>
-            )}
-            {assignPeople.map((p) => {
-              const k = assignPersonKey(p);
-              const picked = assignSelected.has(k);
-              return (
-                <label
-                  key={k}
-                  className={`assign-row${picked ? ' assign-row--selected' : ''}`}
-                >
-                  <input
-                    type="checkbox"
-                    checked={picked}
-                    onChange={() => toggleAssignPerson(p)}
-                  />
-                  <span className="assign-row__text">
-                    <span className="assign-row__fio">{p.fio}</span>
-                    {p.webLogin && (
-                      <span className="assign-row__login">{p.webLogin}</span>
-                    )}
-                    <span className="assign-row__meta">
-                      {p.departments || '—'}
-                      {p.clinicUserId
-                        ? ' · есть учётка в модуле'
-                        : ' · нет учётки (создадим при назначении)'}
-                    </span>
-                  </span>
-                </label>
-              );
-            })}
-          </div>
+            )
+          )}
           <div className="inline-actions" style={{ marginTop: '0.75rem' }}>
             <button
               type="button"