Your details on phones: the star and the bin of a row are not level #931

New issue

Closed

opened 2026-10-15 17:19:51 +00:00 by tiagoagueda · 0 comments

tiagoagueda commented

2026-10-15 17:19:51 +00:00

Owner

On a phone held upright, where a row of Your details has both a star (primary) and a bin (remove), the two are not level with each other.

What exists today

Since #866 the star comes first in a row and the bin last. Below 40rem both are on the row's first line (assets/css/app.css, @media (width < 40rem): .contact-row > [data-row-star] { order: -2 }, .contact-row > [data-row-bin] { order: -1; margin-inline-start: auto }).
.contact-row is flex flex-wrap items-end gap-3; the telephone row ([data-phone-row]) is items-start instead, and from 40rem its two controls get margin-block-start: 1.9rem.
The wrappers differ:
- Telephone numbers (partials/phone_numbers.html): [data-row-star] is flex flex-wrap items-center gap-x-3 gap-y-1 pb-1 and holds the star and more (the comment there: kept apart from Primary, #144), so it can be taller than the bin's wrapper.
- Links and messaging (partials/web_links.html, partials/messaging_handles.html): [data-row-star] and [data-row-bin] are each flex flex-none items-center pb-1.
- Postal addresses (partials/postal_addresses.html): not a .contact-row. Star and bin are in [data-address-head] > [data-row-actions] (flex items-center gap-x-3 pt-6), beside the Type select.
The star is <c-primary-choice> (a 24px label, .primary-choice) and the bin is <c-remove-button> (btn data-size="icon-xs", 24px).

What is wrong

Reported: star and bin are at different heights on a phone. Which blocks show it was not narrowed down. Likely the telephone row, where the star's wrapper holds more than the star and the row aligns items-start, and any row whose first line has a box between them (items-end aligns each to the bottom of its own wrapper).

Expected

On the line they share, star and bin are vertically centred on one axis, in every block (telephone numbers, messaging, social profiles, code repositories, websites, postal addresses), at every width below 40rem.

To check

A browser test at 360px that compares the vertical centres of [data-row-star] .primary-choice and [data-remove-trigger] in each block, within 1px.

Related: #866, #303, #213.

Checked against main at 56fc9d531.

On a phone held upright, where a row of *Your details* has both a star (primary) and a bin (remove), the two are not level with each other. ## What exists today - Since #866 the star comes first in a row and the bin last. Below 40rem both are on the row's first line (`assets/css/app.css`, `@media (width < 40rem)`: `.contact-row > [data-row-star] { order: -2 }`, `.contact-row > [data-row-bin] { order: -1; margin-inline-start: auto }`). - `.contact-row` is `flex flex-wrap items-end gap-3`; the telephone row (`[data-phone-row]`) is `items-start` instead, and from 40rem its two controls get `margin-block-start: 1.9rem`. - The wrappers differ: - **Telephone numbers** (`partials/phone_numbers.html`): `[data-row-star]` is `flex flex-wrap items-center gap-x-3 gap-y-1 pb-1` and holds the star **and more** (the comment there: kept apart from Primary, #144), so it can be taller than the bin's wrapper. - **Links and messaging** (`partials/web_links.html`, `partials/messaging_handles.html`): `[data-row-star]` and `[data-row-bin]` are each `flex flex-none items-center pb-1`. - **Postal addresses** (`partials/postal_addresses.html`): not a `.contact-row`. Star and bin are in `[data-address-head] > [data-row-actions]` (`flex items-center gap-x-3 pt-6`), beside the Type select. - The star is `<c-primary-choice>` (a 24px label, `.primary-choice`) and the bin is `<c-remove-button>` (`btn` `data-size="icon-xs"`, 24px). ## What is wrong - Reported: star and bin are at different heights on a phone. Which blocks show it was not narrowed down. Likely the telephone row, where the star's wrapper holds more than the star and the row aligns `items-start`, and any row whose first line has a box between them (`items-end` aligns each to the bottom of its own wrapper). ## Expected - On the line they share, star and bin are vertically centred on one axis, in every block (telephone numbers, messaging, social profiles, code repositories, websites, postal addresses), at every width below 40rem. ## To check - A browser test at 360px that compares the vertical centres of `[data-row-star] .primary-choice` and `[data-remove-trigger]` in each block, within 1px. Related: #866, #303, #213. Checked against `main` at `56fc9d531`.

tiagoagueda added the

bug

interface

labels

2026-10-15 17:19:51 +00:00

tiagoagueda referenced this issue

2026-10-16 13:22:16 +00:00

Phones, addresses and social profiles: one behaviour for companies, contacts and Your details #934

tiagoagueda referenced this issue from a commit

2026-10-18 18:04:25 +00:00

Your details: headings inside the cards, level star and bin, icons, primary identifier, map pin, one profile per service

tiagoagueda referenced this issue from a pull request that will close it,