Backupcodes button sizes

[MariusBluem]

If you want to call something a papercut ... then ... this 😅😜 The buttons should all have the same size 😉 @nextcloud/designers

[MorrisJobke]

cc @ChristophWurst

[MorrisJobke]

Reason for this is that the left one is a link and the right one is a button. Both with the class button.

Maybe somebody from @nextcloud/designers want to have a look.

[MorrisJobke]

Or @ChristophWurst wants to migrate the a tag to a button ;)

[ChristophWurst]

Doesn't the button size depend on the length of the text (which furthermore depends on the language)?

[MariusBluem]

This is about the height of the button.

[violoncelloCH]

I don't know why the <a class="button"> doesn't respect any (min-)height value.
Is it ok to fix it by creating a <button> with the text inside the <a>-tag (and removing the button-class of the link of corse)?

[te-online]

a elements are inline elements and generally don't behave like block elements. (https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements)
Why not replace the a with a button? Would make for a better markup. Unless there is actually a link associated to that a element. Then I would experiment with adding something like display: inline-block.

[violoncelloCH]

<a> is an actual (download)link, so simply changing it to a <button> doesn't work, but display: inline-block does.

[violoncelloCH]

should this be added specifically to the css of twofactor_backupcodes or maybe better to the general rules?

---

server/core/css/inputs.scss

Line 157 in 13abee2

/* 'Click' inputs */

directly here? or under a new rule only affecting link buttons?

[te-online]

Cool you made it work 😎
I'd add it to the specific CSS, since I don't know how other people expect .button to work.

However, I have to say that I'm not really familiar with the CSS structure here. @ChristophWurst, can you help us here? How is the process to change something like this in global CSS?

I'm wondering if this height difference is something other places also experience, then it would make sense to change it globally.

[ChristophWurst]

However, I have to say that I'm not really familiar with the CSS structure here. @ChristophWurst, can you help us here? How is the process to change something like this in global CSS?

I'm wondering if this height difference is something other places also experience, then it would make sense to change it globally.

Summoning our export for the standardization: @skjnldsv 🙌

[skjnldsv]

Summoning our export for the standardization: @skjnldsv 🙌

export default from skjnldsv

You called? 😁

Yes, we should probably force the .button class to an inline-block :)

[MorrisJobke]

Fix is in #12138