-
-
Notifications
You must be signed in to change notification settings - Fork 6.9k
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
Fix sidebar cut-off on small screens in admin UI #23764
Fix sidebar cut-off on small screens in admin UI #23764
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for the fix!
For the record, this was introduced by #19533 and could not be replicated in firefox's “adaptative view” because it does not feature the same behavior as an actual mobile browser. It could be replicated in Firefox on an actual mobile though.
It might be worth checking the codebase for other uses of vh
that could cause similar issues.
* Autofix Rubocop Style/EmptyMethod (#23732) * Autofix Rubocop Rails/RedundantForeignKey (#23731) * Autofix Rubocop Rails/Pluck (#23730) * Autofix Rubocop RSpec/ReturnFromStub (#23724) * Enable Rubocop RSpec/NotToNot (#23723) * Autofix Rubocop Lint/UnusedBlockArgument (#23712) * Autofix Rubocop RSpec/EmptyLineAfterSubject (#23719) * Enable Rubocop HTTP status rules (#23717) * Autofix Rubocops RSpec/ScatteredLet (#23725) * Autofix Rubocop Style/ExplicitBlockArgument (#23704) * Rename JSX files with proper `.jsx` extension (#23733) * Autofix Rubocop Rails/EnumHash (#23737) * Autofix Rubocop RSpec/ImplicitSubject (#23721) * Enable Rubocop RSpec/ExpectActual (#23720) * Autofix Rubocop RSpec/LeadingSubject (#23670) * Audofix Rubocop Style/WordArray (#23739) * Autofix Rubocop RSpec/BeEq (#23740) * Autofix Rubocop Style/UnpackFirst (#23741) * Autofix Rubocop remaining Layout rules (#23679) * Fix Markdown files with Prettier and check in CI (#21972) * Autofix Rubocop Style/FormatString (#23743) * Autofix Rubocop Style/SymbolProc (#23742) * Make larger part of status clickable (#23621) * Autofix Rubocop Style/RescueStandardError (#23745) * Update rebase needed job settings (#23746) * Change compose form checkbox to native input with `appearance: none` (#22949) * Autofix Rubocop Rails/WhereEquals (#23759) * Autofix Rubocop Security/IoMethods (#23757) * Autofix Rubocop Rails/FindById (#23762) * Add `lang` tag to native language names in language picker (#23749) * Bump capistrano from 3.17.1 to 3.17.2 (#23775) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump sass from 1.58.2 to 1.58.3 (#23772) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump blurhash from 2.0.4 to 2.0.5 (#23771) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump stylelint from 15.1.0 to 15.2.0 (#23770) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Fix sidebar cut-off on small screens in admin UI (#23764) * Bump devise from 4.8.1 to 4.9.0 (#23691) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump @babel/runtime from 7.20.13 to 7.21.0 (#23773) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump @babel/core from 7.20.12 to 7.21.0 (#23767) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump @babel/plugin-transform-runtime from 7.19.6 to 7.21.0 (#23774) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump @babel/plugin-transform-react-inline-elements from 7.18.6 to 7.21.0 (#23766) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump @babel/plugin-proposal-decorators from 7.20.13 to 7.21.0 (#23769) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Delete CHANGELOG.md * Delete CONTRIBUTING.md --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: Nick Schonning <[email protected]> Co-authored-by: Renaud Chaput <[email protected]> Co-authored-by: Christian Schmidt <[email protected]> Co-authored-by: Claire <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Botao Wang <[email protected]>
Currently, version 4.1.0 doesn't show the sidebar on the admin UI correctly for small screens.
For example, on Google Pixel 4 XL Chrome, it shows like this (logo and close button are missing): Android Screenshot
On iPhone 14 iOS 16.2, it shows like this (buttons are cut-off): iOS Screenshot
This fix makes sure the sidebar can be displayed correctly on such screens, like this: Fixed Screenshot
P.S. ideally we should use
100dvh
here, but for the old browsers' compatibility let me use the old way instead : )Fix #21279