Use react-select for page size dropdown

[Arnei]

Originally #1530

Fixes #1215.

We are currently using our own custom styled dropdown thingy for the page size selector. This patch instead uses "Select" from react-select for the page size selector. The goal is to get the accessibility features of using a proper select component "for free", instead of having to painstakingly code our own. Apart from that, the page size selector should work as before.

How to test this

Can be tested as is. The page size selector is the element at the bottom right of the page.

[github-actions]

Use docker or podman to test this pull request locally.

Run test server using develop.opencast.org as backend:

podman run --rm -it -p 127.0.0.1:3000:3000 ghcr.io/opencast/admin-interface:pr-1568

Specify a different backend like stable.opencast.org:

podman run --rm -it -p 127.0.0.1:3000:3000 -e PROXY_TARGET=https://stable.opencast.org ghcr.io/opencast/admin-interface:pr-1568

It may take a few seconds for the interface to spin up.
It will then be available at http://127.0.0.1:3000.
For more options you can pass on to the proxy, take a look at the README.md.

[github-actions]

This pull request is deployed at test.admin-interface.opencast.org/1568/2026-04-10_07-20-26/ .
It might take a few minutes for it to become available.

[geichelberger]

Should we use a different border color? It doesn't fit the other colors. I think the border color should be #378dd4

[github-actions]

This pull request has conflicts ☹
Please resolve those so we can review the pull request.
Thanks.

[Arnei]

The border color of what specific part of the select are you referring to? They look fine to me.

[geichelberger]

This one:

[geichelberger]

		"&:hover": {
				borderColor: state.isFocused ? "#378dd4" : "hsl(0, 0%, 80%)",
		},

Shouldn't it be like that?
But there is a box shadow with the wrong color, which is quite strange.