fix: Fix alignment issues of app password form

[sandicej]

• Resolves: [Bug]: Alignment issues of app password form #52171

Summary

Set form max-width to 400px for consistency with other settings forms.
Moved "Create new app password" to a new line to align with the styling of other forms.

---

Before fix:

After fix:

Checklist

• Code is properly formatted
• Sign-off message is added to all commits
• Tests (unit, integration, api and/or acceptance) are included
• Screenshots before/after for front-end changes
• Documentation (manuals or wiki) has been updated or is not required
• Backports requested where applicable (ex: critical bugfixes)

[joshtrichards]

/compile

[susnux]

as you removed the styling for the classes row and spacing, please also remove the class from the element.

[marcoambrosini]

Hi @sandicej, thanks for your contribution :)

I think it would be better to just fix the vertical alignment of the button here, without moving the submit button to a new line.
The current with of the table is more than 400px, but I agree with your idea of equalizing the with of the new-app-password-form to it.

---

That said, what do you think about setting the with of these elements at 900px, like many other other settings elements? Something like this:

I think it would also make sense to create a css variable --settings-width for this, but that's probably for another pr :)

[github-actions]

Hello there,
Thank you so much for taking the time and effort to create a pull request to our Nextcloud project.

We hope that the review process is going smooth and is helpful for you. We want to ensure your pull request is reviewed to your satisfaction. If you have a moment, our community management team would very much appreciate your feedback on your experience with this PR review process.

Your feedback is valuable to us as we continuously strive to improve our community developer experience. Please take a moment to complete our short survey by clicking on the following link: https://cloud.nextcloud.com/apps/forms/s/i9Ago4EQRZ7TWxjfmeEpPkf6

Thank you for contributing to Nextcloud and we hope to hear from you soon!

(If you believe you should not receive this message, you can add yourself to the blocklist.)

[sandicej]

Hi @marcoambrosini,

thank you for the feedback.

I'm fine with the proposed fix.
There are a couple of points I'd like to clarify:

---

1. The "App name" field will have a variable width depending on the length of already added app names.
   
   

---

2. On mobile, the button currently takes up most of the available space. I think it might be better to wrap it to a new line when the field width drops below 50% of the row width.
   
   

---

Please let me know if these points sound reasonable to you.

[marcoambrosini]

Hi @sandicej,

1. I think the app name field should be of fixed width regardless of the length of the app name itself. If it overflows, we ellipsize.
2. It's fine to wrap on mobile for sure!

Thanks again :)

[sandicej]

Hi @marcoambrosini,

Thanks for the feedback! I've applied the requested changes:

• Set the form width to 900px as suggested.
• The "Create new app password" button now wraps to a new line when its width drops below 50%

I haven’t introduced a --settings-width CSS variable at this stage, but I agree it's a good idea for a future PR

Let me know if there's anything else you'd like me to adjust!

[susnux]

Due to the branch name conflict (it was not a proper branch but just a PR from "master") I failed to properly rebase the branch.
Copy in #61186

Thank you for your contribution!