Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enforce minimum column width #588

Closed

Conversation

gregorydlogan
Copy link
Member

This PR enforces a minimum column width to prevent the sorting arrow from dropping down a line.

Fixes #450

…ing. Some languages could go lower here, but our longest one (DE) needs 79 px. Rounded up to 80 since round numbers are better.

Fixes opencast#450
@gregorydlogan gregorydlogan added the type:visual-clarity Improves UI readability label Jun 4, 2024
Copy link
Contributor

github-actions bot commented Jun 4, 2024

This pull request is deployed at test.admin-interface.opencast.org/588/2024-06-05_16-05-29/ .
It might take a few minutes for it to become available.

Copy link
Contributor

github-actions bot commented Jun 4, 2024

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/opencast-admin-interface:pr-588

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/opencast-admin-interface:pr-588

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.

@ziegenberg
Copy link
Member

ziegenberg commented Jun 5, 2024

Setting the min-width to 80px does not seem to be enough:

image

The location still drops

@ziegenberg ziegenberg self-requested a review June 5, 2024 01:37
@ziegenberg
Copy link
Member

And if you switch language, other columns drop too:

image

Copy link
Member

@ziegenberg ziegenberg left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a way to make this safe with even longer translations?

@gregorydlogan
Copy link
Member Author

I came up with the 80 value by expanding things until (i thought...) nothing dropped. Honestly not sure how to make the minimum auto set - I'm guessing we need to check all the languages, find the longest, and then add a bit extra?

@gregorydlogan
Copy link
Member Author

Bringing that value up to 150(!) gets you no more dropping sorts, but in the case where the window width is smaller than rows * 150 + table/window dressing you get

image

The minimum window size that triggers this is 1490px, which is... not that small. Unclear what the correct course of action is here. It looks goofy to have the page do this, but the dropping sorters also look silly.

@gregorydlogan
Copy link
Member Author

@ziegenberg is fixing the translations, but they're not done yet. Putting this to draft until I've had a chance to test with the full set of translations.

@gregorydlogan gregorydlogan marked this pull request as draft June 5, 2024 16:40
@gregorydlogan
Copy link
Member Author

Conclusion on 2024-06-25 was that fixing this right is out of scope. Something about rewriting things in flexbox? Iunno, not a front end guy :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type:visual-clarity Improves UI readability
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Header looks strange
2 participants