Пояснение «Как посчитано» у цены лота — читаемой строкой на телефонеThe price «how it is calculated» note — a readable block on phones
· Открыть на сайтеOpen on the site
ЦельGoal
Инвестор видит цену лота в своей валюте (пересчёт по курсу ЦБ Турции) и открывает «i», чтобы проверить, по какой формуле и на какую дату её посчитали. Пересчёт есть у 123 лотов.An investor sees the lot price in their own currency (converted at the Central Bank of Turkey rate) and opens the «i» to check by which formula and on what date it was computed. 123 lots have conversions.
ЗадачаProblem
На телефоне окошко «Как посчитано» открывалось шириной ~125 px — узкой колонкой, прижатой к правому краю и уезжавшей за край экрана (ширина страницы 396 px при экране 390 px, появлялась горизонтальная прокрутка). подпись «Тип источника:» ломалась на строки, формула пересчёта рвалась по два-три слова, а зелёная метка «посчитано нами, курс на …» отскакивала вниз налево. Так выходило потому, что окошко лежало внутри строки пересчётов как один тесный элемент flex-строки.On a phone the «how it is calculated» box opened ~125 px wide — a narrow column pinned to the right edge and running off-screen (page width 396 px on a 390 px screen, so the page scrolled sideways). the «Source type:» label broke across lines, the conversion formula broke every two or three words, and the green «derived, rate of …» mark jumped down to the left. It happened because the box sat inside the conversions line as one cramped flex item.
Как решилиHow it was solved
- Когда «i» открыт, метка и значок остаются на строке пересчётов, а само пояснение падает отдельной строкой во всю ширину карточки (≈ 332 px на экране 390 px) — формула и даты читаются как обычный текст.When the «i» is open, the mark and icon stay on the conversions line and the note itself drops to its own full-width row (≈ 332 px on a 390 px screen) — the formula and dates read as ordinary text.
- Горизонтальная прокрутка исчезла: ширина страницы 390 px = ширине экрана и на 390, и на 320 px.The sideways scroll is gone: page width equals the screen on both 390 and 320 px.
- Только CSS, через `:has()` и `display: contents` у открытого источника в строке пересчётов; закрытое состояние и остальные значки «i» на странице не меняются. На компьютере пояснение так же ложится под строку, во всю ширину поля.CSS only, via `:has()` and `display: contents` on the open source tag inside the conversions line; the closed state and the other «i» icons on the page are unchanged. On desktop the note likewise drops below the line, full field width.
До и послеBefore and after
