css: Expand to occupy left sidebar space if available on narrow widths.

This commit is contained in:
Aman Agrawal 2024-05-09 07:52:21 +00:00 committed by Tim Abbott
parent 8aafb72e18
commit 043e0311d2
2 changed files with 17 additions and 0 deletions

View File

@ -5,6 +5,8 @@ import render_right_sidebar from "../templates/right_sidebar.hbs";
import {buddy_list} from "./buddy_list"; import {buddy_list} from "./buddy_list";
import {media_breakpoints_num} from "./css_variables"; import {media_breakpoints_num} from "./css_variables";
import * as message_lists from "./message_lists";
import * as message_viewport from "./message_viewport";
import {page_params} from "./page_params"; import {page_params} from "./page_params";
import * as rendered_markdown from "./rendered_markdown"; import * as rendered_markdown from "./rendered_markdown";
import * as resize from "./resize"; import * as resize from "./resize";
@ -116,6 +118,14 @@ export function initialize(): void {
if (window.innerWidth >= media_breakpoints_num.md) { if (window.innerWidth >= media_breakpoints_num.md) {
$("body").toggleClass("hide-left-sidebar"); $("body").toggleClass("hide-left-sidebar");
if (
message_lists.current !== undefined &&
window.innerWidth <= media_breakpoints_num.xl
) {
// We expand the middle column width between md and xl breakpoints when the
// left sidebar is hidden. This can cause the pointer to move out of view.
message_viewport.scroll_to_selected();
}
return; return;
} }

View File

@ -2026,6 +2026,13 @@ body:not(.hide-left-sidebar) {
margin-right: 7px; margin-right: 7px;
} }
} }
.hide-left-sidebar {
#compose-content,
.app-main .column-middle {
margin-left: 7px;
}
}
} }
@media (width < $md_min) { @media (width < $md_min) {