review screen: fix text wrap + cleanup stale answers from removed steps

CSS:
- .rev-val: flex:1, min-width:0, overflow-wrap:break-word — длинные значения
  больше не ломаются мид-словом ('энергоэффективнос·...')
- .rev-label: max-width:40% — лейбл не съедает всё место
- hyphens:auto для перенос длинных слов на дефис

JS (getCatState):
- При загрузке per_cat фильтруем answers — оставляем только ключи которые
  есть в текущем config.steps
- Это убирает stale-поля типа 'class' у ПММ, оставшиеся в localStorage
  после рефакторинга шагов
- Безопасно: меняет только в памяти, не перезаписывает state (renderReview
  всё равно итерирует config.steps)
This commit is contained in:
wasrusgen 2026-05-11 23:25:23 +03:00
parent 6915bba845
commit cecb8d3444
3 changed files with 30 additions and 9 deletions

View File

@ -1130,6 +1130,7 @@
text-transform: uppercase; text-transform: uppercase;
color: var(--muted); color: var(--muted);
flex-shrink: 0; flex-shrink: 0;
max-width: 40%;
} }
.rev-val { .rev-val {
font-family: var(--font-sans); font-family: var(--font-sans);
@ -1137,7 +1138,12 @@
font-weight: 500; font-weight: 500;
color: var(--ink); color: var(--ink);
text-align: right; text-align: right;
line-height: 1.3; line-height: 1.35;
flex: 1;
min-width: 0;
overflow-wrap: break-word;
word-break: normal;
hyphens: auto;
} }
.rev-val .muted { color: var(--muted); font-weight: 400; } .rev-val .muted { color: var(--muted); font-weight: 400; }

View File

@ -439,7 +439,22 @@ const Podbor = (function () {
function getCatState(catKey) { function getCatState(catKey) {
const cs = state.per_cat[catKey]; const cs = state.per_cat[catKey];
if (cs && cs.answers) return cs; // уже в новой форме if (cs && cs.answers) {
// Чистим ответы для шагов, которых больше нет в текущей схеме
// (нужно при обновлении логики категории: например убрали класс энерго у ПММ)
const config = PODBOR_PARAMS[catKey];
if (config?.steps) {
const validKeys = new Set(config.steps.map(s => s.key));
const filtered = {};
for (const [k, v] of Object.entries(cs.answers)) {
if (validKeys.has(k)) filtered[k] = v;
}
if (Object.keys(filtered).length !== Object.keys(cs.answers).length) {
cs.answers = filtered;
}
}
return cs;
}
// Миграция / инициализация // Миграция / инициализация
return { answers: {}, notes: cs?.notes || "", _step: 0 }; return { answers: {}, notes: cs?.notes || "", _step: 0 };
} }

View File

@ -12,8 +12,8 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Geist:wght@400;500;600&family=Newsreader:ital,wght@0,400..600;1,400..600&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Geist:wght@400;500;600&family=Newsreader:ital,wght@0,400..600;1,400..600&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap">
<script src="https://telegram.org/js/telegram-web-app.js"></script> <script src="https://telegram.org/js/telegram-web-app.js"></script>
<link rel="stylesheet" href="assets/styles.css?v=20260511n"> <link rel="stylesheet" href="assets/styles.css?v=20260511o">
<link rel="stylesheet" href="assets/podbor.css?v=20260511n"> <link rel="stylesheet" href="assets/podbor.css?v=20260511o">
</head> </head>
<body> <body>
<main id="app"> <main id="app">
@ -21,10 +21,10 @@
<div class="spinner"></div> <div class="spinner"></div>
</div> </div>
</main> </main>
<script src="assets/icons.js?v=20260511n"></script> <script src="assets/icons.js?v=20260511o"></script>
<script src="assets/podbor.config.js?v=20260511n"></script> <script src="assets/podbor.config.js?v=20260511o"></script>
<script src="assets/podbor.picts.js?v=20260511n"></script> <script src="assets/podbor.picts.js?v=20260511o"></script>
<script src="assets/podbor.js?v=20260511n"></script> <script src="assets/podbor.js?v=20260511o"></script>
<script src="assets/app.js?v=20260511n"></script> <script src="assets/app.js?v=20260511o"></script>
</body> </body>
</html> </html>