fix: show search and usage on mobile (#485)

![image](https://github.com/jsr-io/jsr/assets/13135287/839453e7-3eaa-46f1-87cc-3921819f91a4)

Author: crowlKats

frontend/routes/package/(_components)/Docs.tsx

@@ -38,8 +38,12 @@ 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 +87,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}

frontend/static/styles.css

@@ -335,6 +335,12 @@ body .ddoc .markdown th {
   @apply py-1.5;
 }
 
+body .ddoc .toc {
+  .topSymbols, .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;