Fix docs styling on mobile

crates/docs/src/lib.rs

@@ -241,20 +241,45 @@ fn render_package_index(docs_by_module: &[(ModuleId, ModuleDocumentation)]) -> S
         push_html(&mut module_list_buf, "li", [], link_buf.as_str());
     }
 
+    let header = {
+        let mut header_buf = String::new();
+
+        push_html(
+            &mut header_buf,
+            "h2",
+            [("class", "module-name")],
+            "Exposed Modules",
+        );
+
+        push_html(
+            &mut header_buf,
+            "a",
+            [
+                ("class", "llm-prompt-link"),
+                ("title", "Documentation in a LLM-friendly format"),
+                ("href", "llms.txt"),
+            ],
+            "LLM docs",
+        );
+
+        header_buf
+    };
+
     // The HTML for the index page
     let mut index_buf = String::new();
 
     push_html(
         &mut index_buf,
-        "h2",
-        [("class", "module-name")],
-        "Exposed Modules",
+        "div",
+        [("class", "module-header-container")],
+        &header,
     );
+
     push_html(
         &mut index_buf,
         "ul",
         [("class", "index-module-links")],
-        module_list_buf.as_str(),
+        &module_list_buf,
     );
 
     index_buf

crates/docs/src/static/index.html

@@ -93,15 +93,6 @@
                     <!-- Search Type Ahead -->
                 </ul>
             </form>
-            <div id="llm-prompt-container">
-                <a
-                    id="llm-prompt-link"
-                    href="llms.txt"
-                    title="Documentation in a LLM friendly format"
-                >
-                    LLM docs
-                </a>
-            </div>
         </header>
         <div class="header-end-extension">
             <!-- if the window gets big, this extends the purple bar on the top header to the right edge of the window -->

crates/docs/src/static/styles.css

@@ -582,26 +582,28 @@ pre>samp {
   pointer-events: none;
 }
 
-#llm-prompt-container {
-  background-color: var(--violet-bg);
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: initial;
-}
-
-#llm-prompt-copy-button:hover {
-  border-color: var(--link-hover-color);
-  color: var(--link-hover-color);
-}
-
 .builtins-tip {
   padding: 1em;
   font-style: italic;
   line-height: 1.3em;
 }
 
+.module-header-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  margin-bottom: 48px;
+}
+
+.llm-prompt-link {
+  flex-shrink: 0;
+}
+
+.module-name {
+    flex-grow: 1;
+    margin-bottom: 0;
+}
+
 @media (prefers-color-scheme: dark) {
   :root {
       /* WCAG AAA Compliant colors */
@@ -637,7 +639,19 @@ pre>samp {
       --top-header-height: 160px;
   }
 
-  #search-shortcut-key {
+  #search-shortcut-key, .header-start-extension, .header-end-extension, #search-label {
+      display: none;
+  }
+
+  #module-search-form {
+      padding: 0 16px;
+      width: 100%;
+      height: auto;
+      margin-bottom: 16px;
+  }
+
+  /* Hide the Copy Link button on mobile. */
+  .entry-name a:first-of-type {
       display: none;
   }
 
@@ -682,7 +696,6 @@ pre>samp {
       font-size: 36px;
       margin-top: 8px;
       margin-bottom: 8px;
-      max-width: calc(100% - 18px);
       overflow: hidden;
       text-overflow: ellipsis;
   }