media_query: Use 767px instead of 775px as md breakpoint.

We use 767px for hiding left column.

The components changed here were tested to be working fine.

This change is not likely to introduce any regression as the
calculations in the components here were not dependent upon the
breakpoint being at 775px.

static/js/scroll_bar.js

@@ -63,7 +63,9 @@ exports.initialize = function () {
                 ") { .compose-content, .header-main .column-middle { margin-right: " +
                 (7 + sbWidth) +
                 "px !important; } } " +
-                "@media (max-width: 775px) { .fixed-app .column-middle { margin-left: " +
+                "@media (max-width: " +
+                media_breakpoints["xl-max"] +
+                ") { .fixed-app .column-middle { margin-left: " +
                 (7 + sbWidth) +
                 "px !important; } } " +
                 "</style>",

static/styles/compose.css

@@ -503,7 +503,7 @@ a#undo_markdown_preview {
     }
 }
 
-@media (max-width: 775px) {
+@media (max-width: $md-max) {
     .compose-content {
         margin-right: 7px;
         margin-left: 7px;

static/styles/right_sidebar.css

@@ -210,7 +210,7 @@
     }
 }
 
-@media (max-width: 775px) {
+@media (max-width: $md-max) {
     #user_search_section .user-list-filter {
         /* input should be 100% - 6px padding x2 - 1px border x2. */
         width: calc(100% - 12px - 2px);

static/styles/typing_notifications.css

@@ -17,7 +17,7 @@
     }
 }
 
-@media (max-width: 775px) {
+@media (max-width: $md-max) {
     #typing_notifications {
         margin-right: 7px;
         margin-left: 7px;

static/styles/zulip.css

@@ -2680,7 +2680,7 @@ select.inline_select_topic_edit {
     }
 }
 
-@media (max-width: 775px) {
+@media (max-width: $md-max) {
     body {
         padding: 0;
     }