Skip to content

Fix home page layout broken on small screens#165

Open
kisaragi-hiu wants to merge 1 commit into
gaois:masterfrom
kisaragi-hiu:fix-narrow-screen-home-page
Open

Fix home page layout broken on small screens#165
kisaragi-hiu wants to merge 1 commit into
gaois:masterfrom
kisaragi-hiu:fix-narrow-screen-home-page

Conversation

@kisaragi-hiu

Copy link
Copy Markdown

The home page layout is broken on narrow screens. This is because while the leftie and rightie classes have screen size rules that try to make them stacked vertically on narrow screens, these rules are not taking effect as they don't have enough specificity.

This PR fixes that, as well as making the welcome element not demand a minimum height on narrow screens, and making the user email get its own scrollbar if necessary instead of overflowing the whole page.

Before After
螢幕截圖_20260623_184044 螢幕截圖_20260623_184844

leftie/rightie:
  The max-width override was not taking effect as
  `[dir="ltr"] div.leftie` etc. have higher specificity (a media rule
  does not add specificity).

div.welcome:
  Remove its minimum height on narrow screens where it is now displayed
  on top of the user section.

div.usertop:
  Allow email to overflow and have its own scrollbar instead of making
  the whole page overflow.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant