[UI/UX] Fix some visual issues related to logs, dialogs, and RTL layout #3207
Conversation
arielj
requested review from
a team,
flavioislima,
CommandMC,
Etaash-mathamsetty,
Nocccer and
imLinguin
and removed request for
a team
| .isRTL .Sidebar.collapsed .SidebarItemWithSubmenu:hover .SidebarSubmenu, | ||
| .isRTL .Sidebar.collapsed .SidebarItemWithSubmenu:focus-within .SidebarSubmenu { | ||
| right: var(--sidebar-width); | ||
| left: auto; |
There was a problem hiding this comment.
submenu for settings and stores was floating on the left side of the screen for RTL languages
| ::-webkit-scrollbar-corner, | ||
| ::-webkit-resizer { | ||
| background: var(--gradient-body-background, var(--body-background)); | ||
| } |
There was a problem hiding this comment.
the corner at the bottom of the logs was white
| @@ -143,7 +143,7 @@ | |||
| } | |||
| } | |||
|
|
|||
| .isRTL { | |||
| &.isRTL { | |||
There was a problem hiding this comment.
this fixes the menu and settings buttons too close, and the menu opening on the wrong direction
| .backButton { | ||
| left: auto !important; | ||
| right: 12px; | ||
| } |
There was a problem hiding this comment.
the menu and settings buttons were overlapping the back button
| max-height: 95vh; | ||
| max-width: 80vw; | ||
| height: 90vh; | ||
| max-height: 1000px; |
There was a problem hiding this comment.
this makes the install modal (and, weirdly, the settings modal too) taller and wider
| @@ -8,11 +8,12 @@ | |||
| grid-template-rows: 1fr; | |||
| column-gap: 0.5rem; | |||
| height: 25em; | |||
| width: 100%; | |||
There was a problem hiding this comment.
if no log, the log area was too narrow
|
|
||
| .log-buttongroup { | ||
| display: flex; | ||
| flex-direction: column; | ||
| width: 150px; | ||
| width: 180px; |
There was a problem hiding this comment.
added some space to display game names in the log screen
| } = this.state | ||
|
|
||
| const isRTL = RTL_LANGUAGES.includes(language) | ||
| document.body.classList.toggle('isRTL', isRTL) |
There was a problem hiding this comment.
we need the direction: rtl in the body to fix one issue with the scrollbar overlapping the content
there seems to be a bug in chrome that setting direction: rtl in the body doesn't move the scrollbar to the left side of the screen, but it seems to be a bug, we can't do much
it would work if the scroll were in a nested element, but then that breaks controllers
There was a problem hiding this comment.
Tested here and for me looks good, but maybe @Doods0 wants to take a second look at it.
This PR fixes most of the comments from this report #3204
I'll add comments in the diff itself
Fixes #3204
Use the following Checklist if you have changed something on the Backend or Frontend: