nextcloud-libraries / nextcloud-libraries/nextcloud-vue
`min-width` for `<body>`
Nobody has claimed this yet.
- Dominant language
- Vue
- Stars
- 246
- Forks
- 99
- Avg merge
- 1d 20h
- Merged PRs (30d)
- 103
Description
No web app can be expected to adapt infinitely. We should define a reasonable min-width for body, so that things don't look completely broken on small phone screens with large text sizes, for example.
https://github.com/nextcloud/server/issues/60496 reminded me of this, which should be fixed on its own, but we should also try to mitigate these issues in general.
~20em seems reasonable to me to avoid clipping.
(Testing in the browser inspector, simply setting min-wdith doesn't actually seem to do it, likely because it messes with Vue, but then whatever the proper way would be.)
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the small-screen and large-text case in the browser inspector, then inspect how the Vue application applies styles to the body element. Determine the proper project-supported way to set a roughly 20em minimum width without conflicting with Vue. Done means the layout avoids clipping at the target conditions and the change is verified in the browser.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100