enh(UnifiedSearch): Keep the searchbar on top of the modal

[susnux]

Summary

For me it is a bit inconvenient that I have to scroll all the way up to change the search query if I was scrolling through the results of the new unified search modal.
Therefor I changed the modal to keep the search bar and filter on top while scrolling (except for very small screens where this would be an accessibility problem).

Note The diff looks worse than it is due to white space changes...

Screencast

After ✨

vokoscreenNG-2023-12-13_01-13-02.mp4

Before

vokoscreenNG-2023-12-13_01-13-35.mp4

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)

[Fenn-CS]

Why is there a lot of whites pace changes? When this already passes out lint check? Unless the white space changes are necessitated by the changes required for this work, I think it's better we have commit that does exactly what the commit says and another one for the white space changes.

It might be worthwhile to introduce and editor-config file to make everyone always ends up with the same set of white space changes.

The sticky search bar look better though....🚀🚀

[susnux]

@Fenn-CS because I needed to indent the search bar one level meaning there is a wrapper div to keep all sticky parts in place (see the "...__header" class).

[jancborchardt]

@susnux now there’s no whitespace on the right of the hover/focus box – it should have the same amount on the right as it has on the left:

Sorry for all the little feedback – is this actually an issue with the component that other modals would have to fix on their own also? These are things which need to work out of the box, so might be better to fix in the component directly?

[susnux]

@jancborchardt this is not related and an issue with the vue library - it will be fixed with the next release - ref: nextcloud-libraries/nextcloud-vue#4956

With that it will look like this:

vokoscreenNG-2023-12-18_15-28-55.mp4

[jancborchardt]

Thanks for the info @susnux – looks great now. :)

[susnux]

/backport to stable28

[backportbot-nextcloud]

The backport to stable28 failed. Please do this backport manually.

# Switch to the target branch and update it
git checkout stable28
git pull origin stable28

# Create the new backport branch
git checkout -b fix/foo-stable28

# Cherry pick the change from the commit sha1 of the change against the default branch
# This might cause conflicts. Resolve them.
git cherry-pick abc123

# Push the cherry pick commit to the remote repository and open a pull request
git push origin fix/foo-stable28

Error: Unknown error

More info at https://docs.nextcloud.com/server/latest/developer_manual/getting_started/development_process.html#manual-backport

[skjnldsv]

/skjnldsv-backport to stable28