docs: Improve header on mobile (#41404)

Release Notes:

- N/A

docs/theme/css/chrome.css

@@ -26,6 +26,14 @@ a > .hljs {
   overflow-x: clip;
 }
 
+.large-logo-img {
+  display: block;
+}
+
+.icon-logo-img {
+  display: none;
+}
+
 /* Menu Bar */
 
 #menu-bar,
@@ -34,7 +42,7 @@ a > .hljs {
   margin: auto calc(0px - var(--page-padding));
 }
 #menu-bar {
-  padding: 16px;
+  padding: 12px 16px;
   position: relative;
   display: flex;
   flex-wrap: wrap;
@@ -77,9 +85,24 @@ a > .hljs {
 }
 
 @media only screen and (max-width: 420px) {
-  #menu-bar i,
-  #menu-bar .icon-button {
-    padding: 0 5px;
+  .large-logo-img {
+    display: none;
+  }
+
+  .icon-logo-img {
+    display: block;
+  }
+
+  #menu-bar {
+    padding: 12px;
+  }
+
+  #menu-bar .ib-hidden-mobile {
+    display: none;
+  }
+
+  .right-buttons {
+    width: 100px; /*For center aligning the icon link*/
   }
 }
 
@@ -96,7 +119,9 @@ a > .hljs {
 .right-buttons {
   display: flex;
   align-items: center;
+  justify-content: end;
 }
+
 .right-buttons a {
   text-decoration: none;
 }

docs/theme/index.hbs

@@ -139,7 +139,7 @@
                             <li role="none"><button role="menuitem" class="theme" id="dark">Dark</button></li>
                         </ul>
 
-                        <button id="copy-markdown-toggle" class="icon-button" type="button" title="Copy Page as Markdown" aria-label="Copy page as markdown">
+                        <button id="copy-markdown-toggle" class="icon-button ib-hidden-mobile" type="button" title="Copy Page as Markdown" aria-label="Copy page as markdown">
                             <i class="fa fa-copy"></i>
                         </button>
 
@@ -152,7 +152,8 @@
 
                     <header class="menu-title">
                         <a href="/">
-                            <img src="https://zed.dev/logo_wordmark_1500.webp" alt="Zed Industries" style="height: 28px;">
+                            <img src="https://zed.dev/logo_wordmark_1500.webp" class="large-logo-img" alt="Zed Industries" style="height: 28px;">
+                            <img src="https://zed.dev/logo_icon.webp" class="icon-logo-img" alt="Zed Industries" style="height: 28px;">
                         </a>
                     </header>