fix(genui): Fix DateTimeInput calendar modal layout

[MoonfaceX]

Summary

• Center the DateTimeInput dialog against the full page overlay using supported positional bounds.
• Remove the DateTimeInput dialog title/header and the unused getDateTimeDialogTitle helper.
• Compact the calendar/time picker sizing so the modal leaves top and bottom breathing room in phone previews.

Why

The DateTimeInput modal was visually too tall in the playground phone preview and its header was no longer needed. The previous overlay centering also used inset, which the Lynx template encoder drops.

Validation

• pnpm -C packages/genui/a2ui test test/dateTimeInput.test.ts
• pnpm -C packages/genui/a2ui build
• pnpm -C packages/genui/a2ui-playground build:lynx

Note: the playground build still reports an existing Modal.css inset warning unrelated to this DateTimeInput change.

Summary by CodeRabbit

• Documentation

  • Updated guidelines for overlay centering specifications and compact picker dialogs in phone previews.

• Style

  • Simplified DateTimeInput dialog by removing header component.
  • Refined layout spacing, sizing, and typography for more compact presentation.

• Tests

  • Updated DateTimeInput tests to reflect dialog structure changes.

[changeset-bot]

⚠️ No Changeset found

Latest commit: f84c48e

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 3ff8012a-7a2b-4a39-a842-7bd937c648fe

📥 Commits

Reviewing files that changed from the base of the PR and between fc55da2 and f84c48e.

📒 Files selected for processing (5)

• .github/a2ui-catalog.instructions.md
• packages/genui/a2ui/src/catalog/DateTimeInput/index.tsx
• packages/genui/a2ui/src/catalog/DateTimeInput/utils.ts
• packages/genui/a2ui/styles/catalog/DateTimeInput.css
• packages/genui/a2ui/test/dateTimeInput.test.ts

💤 Files with no reviewable changes (2)

• packages/genui/a2ui/src/catalog/DateTimeInput/utils.ts
• packages/genui/a2ui/src/catalog/DateTimeInput/index.tsx

---

📝 Walkthrough

Walkthrough

DateTimeInput removes its dialog header (title and close icon), eliminates the getDateTimeDialogTitle utility, compacts the CSS layout across the calendar and time picker, updates tests accordingly, and provides new documentation guidance for dialog overlays and compact picker dialogs.

Changes

DateTimeInput Header Removal and Compact Layout

Layer / File(s)	Summary
Remove dialog header and title utility packages/genui/a2ui/src/catalog/DateTimeInput/index.tsx, packages/genui/a2ui/src/catalog/DateTimeInput/utils.ts	DateTimeInput component no longer renders the dialog header section (title and close icon); the calendar/time picker UI is now the first content in the dialog. The getDateTimeDialogTitle utility function and its import are removed.
CSS layout and spacing adjustments for compact dialog packages/genui/a2ui/styles/catalog/DateTimeInput.css	CSS styles updated across dialog container, calendar grid, time panel, and icon selectors to create a more compact layout: dialog view padding increased, dialog content padding and gaps adjusted, calendar header restructured, calendar cell heights and gaps tightened, time panel spacing and field widths reduced, and time value/stepper typography scaled down.
Test updates for dialog title removal packages/genui/a2ui/test/dateTimeInput.test.ts	Test file removes the import of getDateTimeDialogTitle and updates the label normalization test to remove all dialog-title assertions while keeping placeholder and weekday-label validations.
Catalog guidance for dialog overlays and compact pickers .github/a2ui-catalog.instructions.md	Documentation updated with new guidance for centering DialogView overlays using explicit page-filling bounds and avoiding inset, and guidance for compact picker dialogs in phone previews to control content height and adjust dense row heights.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• lynx-family/lynx-stack#2718: The main PR directly removes the getDateTimeDialogTitle helper and dialog header that were added in the initial DateTimeInput implementation, updates related CSS selectors, and adjusts corresponding utils tests.
• lynx-family/lynx-stack#2724: Main PR updates A2UI dialog overlay guidance to avoid using inset when centering full-page bounds, while the retrieved PR adds inset: 0 to modal overlay CSS positioning—both target overlay inset behavior.

Suggested reviewers

• HuJean
• Sherry-hue
• PupilTong
• gaoachao

Poem

🐰 A dialog header fades away,
Neat CSS trims the day,
The picker shrinks, compact and tight,
New guidance shines so bright,
DateTimeInput takes flight!

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'fix(genui): Fix DateTimeInput calendar modal layout' accurately describes the main changes: fixing the DateTimeInput calendar modal layout by removing the dialog header, adjusting sizing, and fixing overlay centering.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

[codspeed-hq]

Merging this PR will not alter performance

✅ 81 untouched benchmarks
⏩ 26 skipped benchmarks¹

---

_{Comparing MoonfaceX:fix/datetime-input-calendar-modal (f84c48e) with main (fc55da2)}

Footnotes

1. 26 benchmarks were skipped, so the baseline results were used instead. If they were deleted from the codebase, click here and archive them to remove them from the performance reports. ↩