fix(web): мобильная адаптация MedArchive (шапка, таблица, очередь)

- шапка: кросс-логотип MedPrice + разделитель скрыты на мобиле (nav Поиск/Админка
  больше не обрезается)
- таблица сравнения: вторичные колонки (Нерезидент, Прайс от) скрыты на мобиле,
  паддинги px-3 sm:px-5 — 3 колонки влезают без обрезки
- очередь верификации: карточка стекается flex-col на мобиле, кнопки flex-wrap —
  не наезжают на текст
Все правки под sm:-брейкпоинт, десктоп без изменений.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-06-28 16:00:30 +05:00
parent e94979a623
commit 5f5c166527
+15 -15
View File
@@ -21,9 +21,9 @@
<header class="max-w-5xl mx-auto px-5 pt-8 pb-2 flex items-center justify-between">
<div class="flex items-center gap-2.5">
<span class="text-2xl font-bold">Med<span class="text-brand">Archive</span></span>
<span class="h-6 w-px bg-[#d1d5db]"></span>
<span class="h-6 w-px bg-[#d1d5db] hidden sm:block"></span>
<a href="https://medprice.secondbrain.tools" title="Перейти в MedPrice — агрегатор цен на медуслуги"
aria-label="Открыть MedPrice" class="text-2xl font-bold opacity-55 hover:opacity-100 transition-opacity">Med<span class="text-[#0d9488]">Price</span></a>
aria-label="Открыть MedPrice" class="hidden sm:inline text-2xl font-bold opacity-55 hover:opacity-100 transition-opacity">Med<span class="text-[#0d9488]">Price</span></a>
<span class="text-xs text-tg bg-flint border border-[#ebedf0] rounded-full px-2 py-0.5 ml-3 hidden sm:inline">прайсы клиник-партнёров</span>
</div>
<nav class="text-sm text-tg flex gap-4">
@@ -152,11 +152,11 @@ async function compare(serviceId, name) {
</div>
<table class="w-full text-sm">
<thead class="bg-flint text-tg text-left">
<tr><th class="px-5 py-2.5 font-semibold">Клиника</th>
<th class="px-5 py-2.5 font-semibold text-right">Резидент</th>
<th class="px-5 py-2.5 font-semibold text-right">vs медиана</th>
<th class="px-5 py-2.5 font-semibold text-right">Нерезидент</th>
<th class="px-5 py-2.5 font-semibold text-right">Прайс от</th></tr>
<tr><th class="px-3 sm:px-5 py-2.5 font-semibold">Клиника</th>
<th class="px-3 sm:px-5 py-2.5 font-semibold text-right whitespace-nowrap">Резидент</th>
<th class="px-3 sm:px-5 py-2.5 font-semibold text-right whitespace-nowrap">vs медиана</th>
<th class="px-3 sm:px-5 py-2.5 font-semibold text-right hidden sm:table-cell">Нерезидент</th>
<th class="px-3 sm:px-5 py-2.5 font-semibold text-right hidden sm:table-cell">Прайс от</th></tr>
</thead>
<tbody class="divide-y divide-[#f0f0f0]">
${rows.map(r => {
@@ -166,11 +166,11 @@ async function compare(serviceId, name) {
? `<span class="text-[#dc2626] font-medium">+${d}%</span>`
: `<span class="text-[#0f973d] font-medium">${d}%</span>`);
return `<tr class="${cheapest ? 'bg-brand-soft' : ''}">
<td class="px-5 py-3">${r.partner_name}${cheapest ? ' <span class="text-brand text-xs font-semibold">· выгодно</span>' : ''}</td>
<td class="px-5 py-3 text-right tabular-nums font-medium">${money(r.price_resident_kzt)}</td>
<td class="px-5 py-3 text-right tabular-nums text-xs">${badge}</td>
<td class="px-5 py-3 text-right tabular-nums text-tg">${money(r.price_nonresident_kzt)}</td>
<td class="px-5 py-3 text-right text-tg text-xs">${r.effective_date || '—'}</td></tr>`;
<td class="px-3 sm:px-5 py-3">${r.partner_name}${cheapest ? ' <span class="text-brand text-xs font-semibold">· выгодно</span>' : ''}</td>
<td class="px-3 sm:px-5 py-3 text-right tabular-nums font-medium whitespace-nowrap">${money(r.price_resident_kzt)}</td>
<td class="px-3 sm:px-5 py-3 text-right tabular-nums text-xs">${badge}</td>
<td class="px-3 sm:px-5 py-3 text-right tabular-nums text-tg hidden sm:table-cell whitespace-nowrap">${money(r.price_nonresident_kzt)}</td>
<td class="px-3 sm:px-5 py-3 text-right text-tg text-xs hidden sm:table-cell whitespace-nowrap">${r.effective_date || '—'}</td></tr>`;
}).join('')}
</tbody>
</table>
@@ -287,13 +287,13 @@ function renderCard(it) {
? `<button onclick="doMatch(${it.item_id}, '${sug.service_id}', this)" class="bg-brand text-white text-sm rounded-lg px-3 py-1.5 hover:bg-brand-dark">✓ Подтвердить</button>`
: '';
return `<div id="card-${it.item_id}" class="bg-white border border-[#ebedf0] rounded-xl p-4">
<div class="flex justify-between items-start gap-3">
<div>
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-3">
<div class="min-w-0">
<div>извлечено: <b>${it.service_name_raw}</b></div>
<div class="text-sm text-tg">${it.partner_name}${price != null ? ' · ' + money(price) : ''}</div>
${sugHtml}
</div>
<div class="flex gap-2 shrink-0">
<div class="flex gap-2 flex-wrap sm:shrink-0">
${confirm}
<button onclick="togglePick(${it.item_id})" class="border border-[#e5e7eb] text-sm rounded-lg px-3 py-1.5 hover:bg-flint">Другое</button>
<button onclick="skipCard(${it.item_id})" class="text-tg text-sm rounded-lg px-3 py-1.5 hover:bg-flint">Пропустить</button>