Alignment of button content

[trueqbit]

Checklist

• I could not find a solution in the existing issues or docs.
• I agree to follow this project's Code of Conduct.

Description

I am using hanko-elements for login functionality in a web application.
The CSS for the wrapper of a button icon explicitly sets width and flex alignment:

.hanko_loadingSpinnerWrapperIcon {
  justify-content: center;
  width: 100%;
  column-gap: 10px;
  margin-left: 10px;
}

This makes it currently impossible to align the button content (icon and text) using the shadow DOM.

Describe your ideal solution

The ideal would probably be a CSS variable or respect alignment of the parent ::part(button).

Workarounds or alternatives

No response

Hanko Version

v0.9.0

Additional Context

The background is that I want to center-align the content of the button in the same way as usual in our application, also I find it a bit inconsistent with the alignment of the "Continue" button when all form elements are stacked.

A few screenshots show what it currently looks like:
Login challenge form:
Create Passkey form:

[dhananjay-Byte]

hey @trueqbit i would like to work on this can you please assign me this?

[trueqbit]

hey @trueqbit i would like to work on this can you please assign me this?

@dhananjay-Byte As I am not a contributor, I cannot change the metadata of a ticket...

[trueqbit]

hey @trueqbit i would like to work on this can you please assign me this?

@dhananjay-Byte As I am not a contributor, I cannot change the metadata of a ticket...

@dhananjay-Byte Is there any progress here?

[FlxMgdnz]

@trueqbit I'm assuming that you want to center-align the buttons, right?

[ahadalichowdhury]

@FlxMgdnz can i contribute on this issue??

[akash1812]

/assign

[oss-gg]

Assigned to @akash1812! Please open a draft PR linking this issue within 48h ⚠️ If we can't detect a PR from you linking this issue in 48h, you'll be unassigned automatically 🕹️ Excited to have you ship this 🚀

[akash1812]

Can I use the approach where it allows developers to modify alignment through custom css properties?

[awsmdeep]

/assign

[oss-gg]

This issue is already assigned to another person. Please find more issues here.

[Anjalisharma3463]

/assign

[oss-gg]

This issue is already assigned to another person. Please find more issues here.

[ItsVicky25]

/assign

[oss-gg]

This issue is already assigned to another person. Please find more issues here.

[Vishal-Agg1]

/assign

[oss-gg]

This issue is already assigned to another person. Please find more issues here.

[thisissushant]

/assign

[oss-gg]

This issue is already assigned to another person. Please find more issues here.

[poswalsameer]

Hi @trueqbit, any screenshot available would help a lot in finding the exact issue that you are facing in the UI. If possible, can you provide screenshots or exactly tell where you found this issue?

[vdhruvannaidu]

/assign

[oss-gg]

This issue is already assigned to another person. Please find more issues here.

[Sahil-Husen]

/assign

[oss-gg]

This issue is already assigned to another person. Please find more issues here.

[siddhakdak]

/assign

[oss-gg]

This issue is already assigned to another person. Please find more issues here.

[oss-gg]

Assigned to @hamidayubdev! Please open a draft PR linking this issue within 48h ⚠️ If we can't detect a PR from you linking this issue in 48h, you'll be unassigned automatically 🕹️ Excited to have you ship this 🚀

[nil-frontend]

/assign

[oss-gg]

This issue is already assigned to another person. Please find more issues here.

[Anonymous096]

/assign

[oss-gg]

This issue is already assigned to another person. Please find more issues here.

[oss-gg]

@hamidayubdev, Just a little reminder: Please open a draft PR linking this issue within 12 hours. If we can't detect a PR in 12h, you will be unassigned automatically.

[oss-gg]

@Ryadav0654, Just a little reminder: Please open a draft PR linking this issue within 12 hours. If we can't detect a PR in 12h, you will be unassigned automatically.

[HSRAKTU]

/assign

[oss-gg]

This issue is already assigned to another person. Please find more issues here.

[oss-gg]

@Pushpender1122, Just a little reminder: Please open a draft PR linking this issue within 12 hours. If we can't detect a PR in 12h, you will be unassigned automatically.

[AmanSagar0607]

/assign

[oss-gg]

This issue is already assigned to another person. Please find more issues here.

[Awais142]

/assign

[oss-gg]

This issue is already assigned to another person. Please find more issues here.

[DanishAliUmar]

/assign

[oss-gg]

This issue is already assigned to another person. Please find more issues here.

[oss-gg]

@hamidayubdev, Just a little reminder: Please open a draft PR linking this issue within 12 hours. If we can't detect a PR in 12h, you will be unassigned automatically.

[mohdshubair313]

/assign

[oss-gg]

This issue is already assigned to another person. Please find more issues here.

[sanyamhbtu]

/assign

[oss-gg]

This issue is already assigned to another person. Please find more issues here.

[oss-gg]

This issue is already assigned to another person. Please find more issues here.

[Shahab-16]

/assign

[oss-gg]

This issue is already assigned to another person. Please find more issues here.

[oss-gg]

@Pushpender1122, Just a little reminder: Please open a draft PR linking this issue within 12 hours. If we can't detect a PR in 12h, you will be unassigned automatically.

[oss-gg]

@hamidayubdev, Just a little reminder: Please open a draft PR linking this issue within 12 hours. If we can't detect a PR in 12h, you will be unassigned automatically.

[Sarthak102]

/assign

[oss-gg]

This issue is already assigned to another person. Please find more issues here.

[prithak01]

/assign

[oss-gg]

This issue is already assigned to another person. Please find more issues here.