fixes

Author: crowlKats

src/html/templates/breadcrumbs.hbs

@@ -4,7 +4,7 @@
       <ul>
     {{~/if~}}
 
-    <li class="inline {{#if @first}}text-xl lg:text-2xl leading-none font-bold{{else}}lg:text-xl leading-[0.9em]{{/if}} {{#unless (or @last this.is_symbol)}}rounded-lg hover:bg-[#EBF6FF]{{/unless}}">
+    <li>
 	    {{~#if @last~}}
 	      {{~this.name~}}
       {{~else~}}

src/html/templates/pages/page.css

@@ -5,9 +5,15 @@
 body {
   @apply flex flex-col lg:flex-row w-full overflow-x-hidden;
 }
+
 #content {
-  @apply p-7 max-w-screen-xl w-full overflow-x-hidden
+  @apply p-7 max-w-screen-xl w-full overflow-x-hidden;
+
+  &:not(:has(#sidepanel)) {
+    @apply mx-auto;
+  }
 }
+
 #sidepanel {
   @apply py-3 pl-3 lg:w-72;
 }

src/html/templates/pages/page.gen.css

@@ -121,7 +121,7 @@ summary::-webkit-details-marker {
 }
 
 .namespaceSection {
-  @apply grid grid-cols-1 gap-y-3 lg:grid-cols-4 lg:gap-x-3 lg:gap-y-8;
+  @apply grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-y-3 md:gap-x-3 md:gap-y-8;
 
   .namespaceItem {
     @apply flex gap-x-2.5;
@@ -242,21 +242,25 @@ summary::-webkit-details-marker {
       }
     }
   }
+}
 
-  pre.highlight {
-    @apply border border-gray-300 max-md:border-x-0;
-  }
+.usageContent pre.highlight {
+  @apply border border-gray-300 max-md:border-x-0;
 }
 
 .contextLink {
-  @apply text-contextLink underline decoration-[1.5px] decoration-contextLink/50 underline-offset-4 hover:decoration-contextLink;
+  @apply text-contextLink/80 underline decoration-[1.5px] decoration-contextLink/50 underline-offset-4 hover:text-contextLink hover:decoration-contextLink;
 }
 
 .breadcrumbs {
   @apply whitespace-nowrap inline-flex gap-1 items-center;
 
-  > li, > ul {
-    @apply py-1 px-2;
+  > li:first-child {
+    @apply text-xl lg:text-2xl leading-none font-bold;
+  }
+
+  li {
+    @apply inline lg:text-xl leading-[0.9em];
   }
 }
 

src/html/templates/styles.css

@@ -1,14 +1,14 @@
-<div class="usage">
-  {{~#each usages~}}
-    <style scoped>
-      {{{~additional_css~}}} {{! css }}
-    </style>
+{{~#if (gte (len usages) 2) ~}}
+  <div class="usage">
+    {{~#each usages~}}
+      <style scoped>
+        {{{~additional_css~}}} {{! css }}
+      </style>
 
-    <input type="radio" name="usage" id="{{name}}" class="hidden" {{~#if @first~}}checked{{~/if~}} />
-  {{~/each~}}
+      <input type="radio" name="usage" id="{{name}}" class="hidden" {{~#if @first~}}checked{{~/if~}} />
+    {{~/each~}}
 
-	{{~#if ../show_tabs~}}
-	  <nav>
+    <nav>
 		  <span>Usage instructions for</span>
 
 		  <details id="usageSelector">
@@ -37,13 +37,17 @@
 			  </div>
 		  </details>
 	  </nav>
-	{{~/if}}
 
-  <div>
-    {{~#each usages~}}
-      <div id="{{name}}_content">
-        {{{~content~}}} {{! markdown rendering }}
-      </div>
-    {{~/each~}}
+    <div>
+      {{~#each usages~}}
+        <div id="{{name}}_content" class="usageContent">
+          {{{~content~}}} {{! markdown rendering }}
+        </div>
+      {{~/each~}}
+    </div>
+  </div>
+{{~else~}}
+  <div class="usageContent">
+    {{{~usages.[0].content~}}} {{! markdown rendering }}
   </div>
-</div>
+{{~/if~}}

src/html/templates/styles.gen.css

@@ -103,7 +103,6 @@ pub fn usage_to_md(
 
 #[derive(Clone, Debug, Serialize)]
 pub struct UsagesCtx {
-  show_tabs: bool,
   usages: Vec<UsageCtx>,
 }
 
@@ -149,18 +148,14 @@ impl UsagesCtx {
       if usages.is_empty() {
         None
       } else {
-        Some(UsagesCtx {
-          show_tabs: true,
-          usages,
-        })
+        Some(UsagesCtx { usages })
       }
     } else {
       let import_statement = usage_to_md(ctx, doc_nodes, &url);
       let rendered_import_statement =
         crate::html::jsdoc::render_markdown(ctx, &import_statement);
 
       Some(UsagesCtx {
-        show_tabs: false,
         usages: vec![UsageCtx {
           name: "".to_string(),
           content: rendered_import_statement,