Calendar: the month, week or day on show is not centred on the page, as #858 asked #900

New issue

Closed

opened 2026-10-12 18:15:16 +00:00 by tiagoagueda · 1 comment

tiagoagueda commented

2026-10-12 18:15:16 +00:00

Owner

#858 asked for the period's name (October 2026, Week 42, Monday 12 October) to be centred on the page in every calendar view, with the controls either side of it. cae5f61ec closed #858, but the name is still not centred. It sits straight after the Previous · This month · Next group, and the view switcher is pushed to the right. So the name lands somewhere left of centre, and the place moves with the label lengths, the language and the view.

Where

templates/applications/calendar.html:166-197. The <nav data-period> is flex flex-wrap items-center gap-3 with three children in a row: the step group, the <h2> holding the picker button, and the views group with ms-auto. Nothing centres the <h2>. It only follows the step group.

What to do

Lay the bar out as three tracks, for example grid grid-cols-[1fr_auto_1fr]: the step group at the start, the period in the middle track, centred, and the views group at the end. The period then stays at the centre of the page whatever width the two groups take. In right-to-left languages the logical order flips by itself.
Keep it centred in all four views (month, week, day, agenda) and on both settings for the button labels (#859: chevrons alone or with words).
On a phone, where the three no longer fit on one line, put the period on its own line, centred, above or between the two groups. It must not wrap off-centre. The views group stays full width, as now, within 320 px.
The picker popover (data-align="start") should open under the centred name, so align it to the centre.

Done when

In every view, at desktop and phone widths, in en-GB and in a right-to-left language, the period's name is centred on the content column, within a pixel or two.
A browser test checks that the centre of [data-period] h2 matches the centre of the nav, for month, week, day and agenda.

Checked against main at 75f31208b.

#858 asked for the period's name (*October 2026*, *Week 42*, *Monday 12 October*) to be **centred on the page** in every calendar view, with the controls either side of it. `cae5f61ec` closed #858, but the name is still not centred. It sits straight after the *Previous · This month · Next* group, and the view switcher is pushed to the right. So the name lands somewhere left of centre, and the place moves with the label lengths, the language and the view. ## Where `templates/applications/calendar.html:166-197`. The `<nav data-period>` is `flex flex-wrap items-center gap-3` with three children in a row: the step group, the `<h2>` holding the picker button, and the views group with `ms-auto`. Nothing centres the `<h2>`. It only follows the step group. ## What to do - Lay the bar out as three tracks, for example `grid grid-cols-[1fr_auto_1fr]`: the step group at the start, the period in the middle track, centred, and the views group at the end. The period then stays at the centre of the page whatever width the two groups take. In right-to-left languages the logical order flips by itself. - Keep it centred in all four views (month, week, day, agenda) and on both settings for the button labels (#859: chevrons alone or with words). - On a phone, where the three no longer fit on one line, put the period on its own line, centred, above or between the two groups. It must not wrap off-centre. The views group stays full width, as now, within 320 px. - The picker popover (`data-align="start"`) should open under the centred name, so align it to the centre. ## Done when - In every view, at desktop and phone widths, in en-GB and in a right-to-left language, the period's name is centred on the content column, within a pixel or two. - A browser test checks that the centre of `[data-period] h2` matches the centre of the nav, for month, week, day and agenda. Checked against `main` at `75f31208b`.

tiagoagueda added the

bug

interface

labels

2026-10-12 18:15:18 +00:00

tiagoagueda commented

2026-10-13 08:34:15 +00:00

Author

Owner