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??

[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?