From 8ec785e5aa39643d2482e9379bb9c9c2bc1b46ea Mon Sep 17 00:00:00 2001
From: crowlkats <crowlkats@toaxl.com>
Date: Mon, 6 May 2024 18:13:20 +0200
Subject: [PATCH 1/3] fix: show search and usage on mobile

---
 frontend/routes/package/(_components)/Docs.tsx |  7 +++----
 frontend/static/styles.css                     | 10 ++++++++++
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/frontend/routes/package/(_components)/Docs.tsx b/frontend/routes/package/(_components)/Docs.tsx
index d18558e3..6f36a0c0 100644
--- a/frontend/routes/package/(_components)/Docs.tsx
+++ b/frontend/routes/package/(_components)/Docs.tsx
@@ -38,8 +38,8 @@ export function DocsView(
           </div>
         )}
 
-      <div class="grid grid-cols-1 lg:grid-cols-4 gap-12">
-        <div class={`min-w-0 ${docs.toc ? "col-span-3" : "col-span-full"}`}>
+      <div class="grid grid-cols-1 lg:grid-cols-4 gap-8 lg:gap-12">
+        <div class={`min-w-0 ${docs.toc ? "lg:col-span-3 lg:row-start-1" : "col-span-full"}`}>
           <div class="ddoc" dangerouslySetInnerHTML={{ __html: docs.main }} />
 
           {showProvenanceBadge && selectedVersion.rekorLogId && (
@@ -83,9 +83,8 @@ export function DocsView(
             </div>
           )}
         </div>
-
         {docs.toc && (
-          <div class="max-lg:hidden col-span-1 top-0 lg:sticky lg:max-h-screen box-border space-y-4 -mt-4 pt-4">
+          <div class="max-lg:row-start-1 lg:col-[span_1_/_-1] lg:top-0 lg:sticky lg:max-h-screen box-border space-y-4 -mt-4 pt-4">
             {!docs.breadcrumbs && (
               <LocalSymbolSearch
                 scope={params.scope}
diff --git a/frontend/static/styles.css b/frontend/static/styles.css
index 8a006335..bc6af0f8 100644
--- a/frontend/static/styles.css
+++ b/frontend/static/styles.css
@@ -335,6 +335,16 @@ body .ddoc .markdown th {
   @apply py-1.5;
 }
 
+body .ddoc .toc {
+  .topSymbols {
+    @apply max-lg:hidden;
+  }
+  
+  .documentNavigation {
+    @apply max-lg:hidden;
+  }
+}
+
 /* These might seem redundant but Tailwind won't always load them in the compiled stylesheet unless they're explicitly included here. */
 .score-ring-red {
   @apply bg-red-500;

From 793efea314d4ba975be304e42489b2003839a476 Mon Sep 17 00:00:00 2001
From: crowlkats <crowlkats@toaxl.com>
Date: Mon, 6 May 2024 18:15:16 +0200
Subject: [PATCH 2/3] clean

---
 frontend/static/styles.css | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/frontend/static/styles.css b/frontend/static/styles.css
index bc6af0f8..cf24f8e1 100644
--- a/frontend/static/styles.css
+++ b/frontend/static/styles.css
@@ -336,11 +336,7 @@ body .ddoc .markdown th {
 }
 
 body .ddoc .toc {
-  .topSymbols {
-    @apply max-lg:hidden;
-  }
-  
-  .documentNavigation {
+  .topSymbols, .documentNavigation {
     @apply max-lg:hidden;
   }
 }

From d9b26d565ef2b8a1d339768045fb7ab4d9e2a20b Mon Sep 17 00:00:00 2001
From: crowlkats <crowlkats@toaxl.com>
Date: Mon, 6 May 2024 18:15:45 +0200
Subject: [PATCH 3/3] fmt

---
 frontend/routes/package/(_components)/Docs.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/frontend/routes/package/(_components)/Docs.tsx b/frontend/routes/package/(_components)/Docs.tsx
index 6f36a0c0..2bfa89ca 100644
--- a/frontend/routes/package/(_components)/Docs.tsx
+++ b/frontend/routes/package/(_components)/Docs.tsx
@@ -39,7 +39,11 @@ export function DocsView(
         )}
 
       <div class="grid grid-cols-1 lg:grid-cols-4 gap-8 lg:gap-12">
-        <div class={`min-w-0 ${docs.toc ? "lg:col-span-3 lg:row-start-1" : "col-span-full"}`}>
+        <div
+          class={`min-w-0 ${
+            docs.toc ? "lg:col-span-3 lg:row-start-1" : "col-span-full"
+          }`}
+        >
           <div class="ddoc" dangerouslySetInnerHTML={{ __html: docs.main }} />
 
           {showProvenanceBadge && selectedVersion.rekorLogId && (