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;
 }