Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

stream_menu: Fix Stream Menu Viewport Width Issue 

Address the issue of the left panel layout getting distorted and creating a second
line of options on top when the screen width is between 768px and 881px. The problem
was caused by a gap in the media query coverage in this range.

These changes ensure a smooth transition of styles across different screen widths and
prevent the layout from breaking at the specific 768-881px range.

Fixes: #29514.
This commit is contained in:
rs545837 2024-04-11 00:16:11 +05:30
parent 2734a9483b
commit 4c17cb14a8
1 changed files with 28 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
web/styles/subscriptions.css
View File

@ -1125,6 +1125,34 @@ div.settings-radio-input-parent {
Longer-term we should extract this logic two-column-overlay class Longer-term we should extract this logic two-column-overlay class
to read more naturally. */ to read more naturally. */
@media (calc($md_min - 1px) < width < calc($md_min + 113px)) {
.user-groups-container .right,
.subscriptions-container .right {
position: absolute;
left: 50% !important;
top: 45px;
background-color: var(--color-background-modal) !important;
border-top: none !important;
transition: all 0.3s ease;
z-index: 10 !important;
width: 50% !important;
display: block;
margin: 0;
height: calc(100% - 45px);
border-left: 1px solid hsl(0deg 0% 0% / 20%);
}
.user-groups-container .left,
.subscriptions-container .left {
position: absolute;
display: block;
margin: 0;
width: 50% !important;
height: calc(100% - 45px);
border-right: 1px solid hsl(0deg 0% 0% / 20%);
}
}
@media (width < $md_min) { @media (width < $md_min) {
.user-groups-container, .user-groups-container,
.subscriptions-container { .subscriptions-container {