fix: Improve styles of layout for QuestionFile #2253

[Koc]

See #2253 for more info. I'm not css-guy, so, if you have any suggestions how to fix it in a proper way - welcome 🙏

Fixed version has same height and paddings line other input types for both edit/view versions:

[Chartman123]

@Koc thanks for looking into it. Perhaps @susnux can also have a look at it, as I'm not an CSS expert either...

[Koc]

I guess for a long term it would be nice to add type=file support to NcActionInput

[susnux]

Just use the variables, but otherwise fine :)

[Koc]

@susnux for some reason it not works for me with variables 😕

Input should have height: 44px for edit mode, but variable is only 34px

Seems like it's overwritten with min-height: 44px without variables.

[susnux]

Input should have height: 44px for edit mode, but variable is only 34px

No starting with Nextcloud 30 all inputs should be 34px, that why we should only use the variables to be independent from the server version.

[Koc]

ok, but how can I properly calculate paddings?

[susnux]

ok, but how can I properly calculate paddings?

Paddings should always be multiple of --default-grid-baseline, if it is about centering then probably something like this:
calc((var(--default-clickable-area) - 1lh) / 2) (this would be the padding needed to center something).

[susnux]

I pushed another commit with unifies the style with other inputs form Nextcloud. Note that it might look not 100% equal currently (border width), but this is due to a missing fix for e.g. NcDatetimePicker which will be release this week.

Feel free to adjust or even drop my commit if you want to adjust :)

[Koc]

@susnux mate, it looks really amazing, thank you. This css is too hard for backend developers like me 🙈 . I've fixed formatting to pass pipeline

[Koc]

I guess for a long term it would be nice to add type=file support to NcActionInput

we have ticket for that™ nextcloud-libraries/nextcloud-vue#4339

[Chartman123]

@Koc yeah nice, so we could switch in the future, when it's integrated into the lib

Until then: let's get this merged :)