zudoku 0.4.2-dev.1 → 0.4.2-dev.2

package/lib/zudoku.plugin-openapi.js

@@ -1,5 +1,5 @@
 import "./jsx-runtime-B6kdoens.js";
-import { o as s } from "./index-D2SS6ne_.js";
+import { o as s } from "./index-XW9taAve.js";
 import "./urql-YhcsXYy8.js";
 import "./ZudokuContext-BHNQL3XO.js";
 import "zudoku/openapi-worker";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.4.2-dev.1",
+  "version": "0.4.2-dev.2",
   "type": "module",
   "files": [
     "dist",

package/src/app/main.css

@@ -102,7 +102,7 @@
   html {
     scroll-padding-block: var(--scroll-padding);
     /* This is to prevent layout jumping when the scrollbar appears/disappears */
-    padding-left: var(--scrollbar-width);
+    @apply mr-[calc(-1*var(--scrollbar-width))] overflow-x-hidden;
   }
 
   body {
@@ -172,6 +172,16 @@
     }
   }
 
+  .scrollbar {
+    /* For Firefox */
+    scrollbar-width: thin;
+    scrollbar-color: transparent transparent;
+  }
+
+  .scrollbar:hover {
+    scrollbar-color: hsla(var(--border)) transparent;
+  }
+
   .scrollbar::-webkit-scrollbar {
     padding: 2px;
     width: 12px;

package/src/lib/components/Header.tsx

@@ -58,8 +58,8 @@ export const Header = memo(function HeaderInner() {
   const ThemeIcon = isDark ? MoonStarIcon : SunIcon;
 
   return (
-    // padding-left is to prevent layout jumping when scrollbar appears/disappears
-    <header className="fixed top-0 z-10 bg-background/80 backdrop-blur left-0 right-0 pl-[var(--scrollbar-width)]">
+    // margin-left is to prevent layout jumping when scrollbar appears/disappears
+    <header className="fixed top-0 z-10 bg-background/80 backdrop-blur left-0 right-0 2xl:ml-[--scrollbar-width]">
       <div className="max-w-screen-2xl mx-auto">
         <div className="grid grid-cols-[calc(var(--side-nav-width))_1fr] lg:gap-12 items-center border-b px-12 h-[--top-header-height]">
           <div className="flex">

package/src/lib/components/navigation/SidebarCategory.tsx

@@ -103,10 +103,13 @@ export const SidebarCategory = ({
         <ul className="mt-1 border-l ps-2">
           {category.items.map((item) => (
             <SidebarItem
-              key={item.label}
+              key={
+                ("id" in item ? item.id : "") +
+                ("href" in item ? item.href : "") +
+                item.label
+              }
               level={level + 1}
               item={item}
-              // activeAnchor={activeAnchor}
             />
           ))}
         </ul>

package/src/lib/plugins/openapi/playground/Playground.tsx

@@ -225,7 +225,7 @@ export const Playground = ({
             <Tabs
               defaultValue={pathParams.length > 0 ? "parameters" : "headers"}
             >
-              <div className="flex justify-between">
+              <div className="flex flex-wrap gap-1 justify-between">
                 <TabsList>
                   {queryParams.length + pathParams.length > 0 && (
                     <TabsTrigger value="parameters">Parameters</TabsTrigger>