2061194 - Implement dialog sizing, body scrolling, and sticky header/footer

Status: RESOLVED FIXED

(Calendar :: Calendar Frontend, enhancement, P2)

Description

[Alex Schmitz]

Summary:
Match the Zeplin container behavior: fit to contents, resize on row expansion, and scroll body rows only when content exceeds available height.

Links:

• Zeplin main create/edit sizing annotation: https://app.zeplin.io/project/66dd0f2b2fe8f1b63cda36f1/screen/6a0f2f285393a283202254bc

• Interaction guide: Container > Size: https://docs.google.com/document/d/15OpMthOHmBGyPpDBNRW8vp6uCxeoitBp8n7Fti3LD10/edit?tab=t.ca06q18w3qfr#heading=h.yfmlsekhmpbe

• Planning: Redux - Show Readiness Before Future Positioning

• Planning: Questions - Q01 User-Driven Dialog Movement And Resizing
  Acceptance criteria:

• Dialog sizes to fit contents on open after positioning has chosen its target or fallback centered placement.

• Expanding/collapsing rows resizes the dialog while space is available.

• If content exceeds the container, header and footer stay fixed and body rows scroll.

• Header and footer are excluded from the scrollable area.

• Dialog respects the interaction-guide minimum size of 424px wide by 476px tall unless constrained by product-supported small viewport behavior.

• Create/edit dialog width can grow up to the interaction-guide maximum of 1292px before any takeover/expanded-mode decision applies.

• Dialog height responds to available window/container height, and the body becomes scrollable when content exceeds available vertical space.

• Behavior is covered by browser tests using constrained viewport/container sizes.

• Adds sizing and overflow tests for fit-to-content, min/max width, responsive height, sticky header/footer, body scrolling, and row expansion/collapse; browser layout states run axe where supported.

Comment 1

[Toby Pilling [:tobyp]]

Remove

• Create/edit dialog width can grow up to the interaction-guide maximum of 1292px before any takeover/expanded-mode decision applies.
• See Read dialog tests for sizing/constraints without content

Comment 2

[Kevin Lamping]

In https://docs.google.com/document/d/15OpMthOHmBGyPpDBNRW8vp6uCxeoitBp8n7Fti3LD10/edit?tab=t.ca06q18w3qfr, the guidelines for height have been updated to say "height defined by contents", and there's no longer a minimum height.

Alex, can you confirm I'm correct on this change, and if so, update the description of "Dialog respects the interaction-guide minimum size of 424px wide by 476px tall unless constrained by product-supported small viewport behavior" to match that?

Comment 3

[Kevin Lamping]

Attachment: Bug 2061194 - Calendar create/edit dialog: sizing, body scrolling, and sticky header/footer. r=#thunderbird-front-end-reviewers

Adds styles and tests to validate the visual behavior of the dialog element.

Comment 4

[Alex Schmitz]

@Kevin That is a question for laurel as these documents are both design documents. I believe the interaction guide still is the only source for most of the size and position rules for the dialog and these were written by Laurel so i would want to check with her on this. Reality though is i don't think it will matter i think even with everything that can be hidden or collapsed it will still hit that height. we should get clarification from design on this though.

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/comm-central/rev/2936b3173789
Calendar create/edit dialog: sizing, body scrolling, and sticky header/footer. r=arschmitz