Шапка сравнения на телефоне: «×» в углу вместо кнопки «Убрать» отдельной строкойCompare table head on a phone: a «×» in the corner instead of a «Remove» button on its own line

ЦельGoal

Инвестор сравнивает два лота на телефоне. Над значениями стоит шапка: тип номера · площадь и проект каждого лота. Чем она ниже, тем раньше видны сами значения.An investor compares two lots on a phone. Above the values is the head: room type · area and the project of each lot. The shorter it is, the sooner the values themselves come into view.

ЗадачаProblem

Под названием каждого лота стояла кнопка «× Убрать» шириной 95 px и высотой 44 px — отдельной строкой. На 320 px шапка двух лотов с длинными типами номера занимала 199–221 px, на 360 px — 178–199 px.Under each lot's name sat a «× Remove» button, 99 px wide and 44 px tall, on its own line. At 320 px the head of two lots with long room types took 178–221 px, at 360 px 178–199 px.

Как решилиHow it was solved

• На экранах до 480 px «Убрать» — квадрат «×» 44×44 px в правом верхнем углу шапки лота. Слово «Убрать» остаётся в кнопке для экранных чтецов — скрыто так же, как у «×» выбранного лота и у «+» подборщика.On screens up to 480 px «Remove» is a square 44×44 px «×» in the top-right corner of the lot head. The word «Remove» stays in the button for screen readers — hidden the same way as next to the chosen lot's «×» and the picker's «+».
• Рядом с «×» обтекаются только первые строки типа номера; строки ниже и строка проекта — во всю ширину колонки. Слова не разрываются посередине (перенос — только по пробелу или дефису): слово, которое не помещается рядом с «×», переходит под неё, и рядом с «×» остаётся пустое место (на 320 px — «апартаменты» после «2+1»).Only the first lines of the room type wrap beside the «×»; the lines below and the project line use the full column width. Words are not split in the middle (lines break only at a space or a hyphen): a word that does not fit beside the «×» moves below it, leaving empty space beside the «×» (at 320 px, «апартаменты» after «2+1» in Russian).
• Шапка ниже на 27–50 px в 16 из 18 замеров (3 пары лотов × 320/360/390 px × русский/английский), в 2 — на 6 px (320 px, русский: тип номера там становится на 2 строки длиннее, 4 → 6 и 3 → 5, а не на одну). Анталья, Rixos 2+1 тип 02 и тип 03, по-русски: 320 px — 201 → 172 px, 360 px — 178 → 151 px. На компьютере кнопка по-прежнему «× Убрать» со словом.The head is 27–50 px shorter in 16 of 18 measurements (3 lot pairs × 320/360/390 px × Russian/English), in 2 by 6 px (320 px, Russian: the room type there grows by 2 lines, 4 → 6 and 3 → 5, not by one). Antalya, Rixos 2+1 type 02 and type 03, English: 320 px — 178 → 151 px, 360 px — 178 → 128 px (Russian: 201 → 172 and 178 → 151 px). On desktop the button still reads «× Remove» with the word.

До и послеBefore and after