fix(modal): center title independently of close button

[yeyuqwer]

Hi, thank you for open-sourcing this component library. I have really enjoyed using it in my project.

While using the Modal component, I tried to center the title:

title={<span className="block text-center">Delete atlas-edge?</span>}

However, I noticed that the title was not visually centered relative to the entire modal. The close button participates in the header's flex layout and occupies space on the right, so the title is only centered within the remaining content area.

This PR positions the close button independently from the title layout, allowing the title container to use the full header width and align with the actual center of the modal.

The purpose of this change is only to make centered titles work as expected for users who need them in the future. It does not change the demo or the default title alignment. Modal titles remain left-aligned by default.

This is only a small visual alignment improvement, not a critical issue. Please feel no pressure to merge it if the current behavior better matches the intended design.

After & Before

[vercel]

@yeyuqwer is attempting to deploy a commit to the ozer's projects Team on Vercel.

A member of the Team first needs to authorize it.

[ddoemonn]

@yeyuqwer nice catch, i'll try it myself and merge it. thanks a lot

[ddoemonn]

Real issue, nice fix.

But the old flex layout guaranteed the title could never run under the ✕, now a long first line can slide under it. Per DESIGN.md §14 (reserve space up front), can this be solved while keeping that guarantee?

Also drawer.tsx has the same header pattern and should stay consistent.

@yeyuqwer

[yeyuqwer]

Thanks for the feedback. I'll update the implementation to keep the title from overlapping with the close button and make drawer.tsx consistent as well.

[ddoemonn]

Thanks for the feedback. I'll update the implementation to keep the title from overlapping with the close button and make drawer.tsx consistent as well.

@yeyuqwer thank you so much! take your time!

[yeyuqwer]

Thanks for pointing this out. You are right that the original flex layout guaranteed the title and description would never overlap with the close button.

I revised the implementation and restored the existing flex header instead of absolutely positioning the close button.

I added an optional titleAlign prop to both Modal and Drawer:

<Modal title="Centered title" titleAlign="center" />
<Drawer title="Centered title" titleAlign="center" />

The default remains "left", so the existing appearance and behavior are unchanged.

When titleAlign="center" is used, the component reserves the same space on the left as the close button and header gap occupy on the right. This keeps the title centered within a balanced area while preserving the original flex layout for the description.

I used an explicit prop here because the component needs to know when extra space should be reserved. Inferring it from children would make the behavior harder to maintain.

Would this approach work for you?

Thanks again for catching the Drawer consistency issue.

screenshoots

[yeyuqwer]

One follow-up question: since titleAlign is now part of the Modal and Drawer APIs, should the generated props documentation be updated as well?

I saw that registry.generated.ts is generated and should not be edited manually, but I couldn't find the generation command in the repo.

Should I add metadata overrides in registry.meta.ts, or is the generated registry updated through a maintainer workflow?

I have left registry.generated.ts unchanged for now.

[ddoemonn]

@yeyuqwer i'll think about your comments a bit and get back to you. thanks for taking the time