stream_menu: Fix Stream Menu Viewport Width Issue

[rs545837]

Addressed 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.

Other ways of solving the same problem included things like adding a padding but that was not actually going to solve the cause of main problem that was a second line getting added due to shifting of buttons.

I am also a GSOC applicant for this year.

Fixes: #29514.

Screenshots and screen captures: Before Changes:

After Changes: https://github.com/zulip/zulip/assets/114828377/376e7950-4124-465d-9270-a5c165bba2a7

Self-review checklist

• [x] Self-reviewed the changes for clarity and maintainability (variable names, code reuse, readability, etc.).

Communicate decisions, questions, and potential concerns.

• [x] Explains differences from previous plans (e.g., issue description).
• [x] Highlights technical choices and bugs encountered.
• [ ] Calls out remaining decisions and concerns.
• [ ] Automated tests verify logic where appropriate.

Individual commits are ready for review (see commit discipline).

• [x] Each commit is a coherent idea.
• [x] Commit message(s) explain reasoning and motivation for changes.

Completed manual review and testing of the following:

• [ ] Visual appearance of the changes.
• [x] Responsiveness and internationalization.
• [x] Strings and tooltips.
• [x] End-to-end functionality of buttons, interactions and flows.
• [ ] Corner cases, error conditions, and easily imagined bugs.

[zulipbot]

Hello @zulip/server-streams members, this pull request was labeled with the "area: stream settings" label, so you may want to check it out!

[rs545837]

I would request a review for this!.

[alya]

As requested in the PR template, please post screenshots of all your changes in the PR description. Before / after screenshots at the same screen width would be helpful here.

[rs545837]

I added the screenshots.

[alya]

Thanks! I don't know if we need the left panel to be quite this wide, but maybe it's OK. Having the placeholder text in the right-side panel spill onto the second line is not ideal, but I dunno how much more common that becomes.

[alya]

@sahil839 Do you want to take a look at this one? I haven't tested, but maybe the next step is to check whether this is a good direction.

[sahil839]

A couple of points -

• I tested it and I can see the issue at some width (somewhere around 890px) for sure.
• Regarding the behavior, if we do not want to make the right section narrower, are we fine with having the buttons in left panel in two different lines but with "Subscribed | All channels" button always together and the stream sorting and "+" icons always together on the same line. Something like the image below. We would need to adjust the height of the scrolling container below to make sure that the user can scroll till the last stream.

[sahil839]

Regarding the implementation, instead of adding this much CSS can we do something using combination of max-width and min-width properties here by setting them to appropriate values in media queries?

[alya]

What if we (1) kept the + with the other buttons, as suggested above, and (2) left-aligned the buttons when they spill onto a second line, rather than keeping them on the right? I think that would look reasonable.

[alya]

I've never liked the sorting buttons very much, by the way -- I think it's quite hard to interpret them at a glance. A more standard approach would be to have columns with headings, and let clicking on those headings control the sorting order. I don't know how exactly to make that work without over-emphasizing the user and message counts, though, so rethinking that can probably wait until we do a dedicated design pass.

[sahil839]

What if we (1) kept the + with the other buttons, as suggested above, and (2) left-aligned the buttons when they spill onto a second line, rather than keeping them on the right? I think that would look reasonable.

Yes, keeping them of left should be fine.