diff --git a/web/src/sidebar_ui.ts b/web/src/sidebar_ui.ts
index c1243a646b..9bf2ff8b18 100644
--- a/web/src/sidebar_ui.ts
+++ b/web/src/sidebar_ui.ts
@@ -5,6 +5,8 @@ import render_right_sidebar from "../templates/right_sidebar.hbs";
 
 import {buddy_list} from "./buddy_list";
 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 * as rendered_markdown from "./rendered_markdown";
 import * as resize from "./resize";
@@ -116,6 +118,14 @@ export function initialize(): void {
 
         if (window.innerWidth >= media_breakpoints_num.md) {
             $("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;
         }
 
diff --git a/web/styles/zulip.css b/web/styles/zulip.css
index d37c40692d..fff60f61d2 100644
--- a/web/styles/zulip.css
+++ b/web/styles/zulip.css
@@ -2026,6 +2026,13 @@ body:not(.hide-left-sidebar) {
             margin-right: 7px;
         }
     }
+
+    .hide-left-sidebar {
+        #compose-content,
+        .app-main .column-middle {
+            margin-left: 7px;
+        }
+    }
 }
 
 @media (width < $md_min) {