Add link anchors and fix scroll padding (#158)

zuplo · Sep 4, 2024 · 73686d2 · 73686d2
1 parent 5ba99d7
commit 73686d2
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 10 deletions.
diff --git a/packages/zudoku/src/app/main.css b/packages/zudoku/src/app/main.css
@@ -81,18 +81,23 @@
     --top-header-height: 65px;
     --top-nav-height: 50px;
     --banner-height: 48px;
-    --side-nav-width: theme("spacing.72");
     --header-height: calc(
       var(--top-header-height) + var(--top-nav-height) + var(--banner-height)
     );
     --scroll-padding: calc(var(--header-height) + 10px);
+    --side-nav-width: theme("spacing.72");
     --padding-content-top: theme("spacing.12");
     --padding-content-bottom: theme("spacing.12");
     --padding-nav-item: theme("spacing[2.5]");
     --sidecar-grid-cols: 1fr minmax(200px, 260px);
     --scrollbar-width: calc(100vw - 100%);
   }
 
+  html {
+    /* This is to prevent layout jumping when the scrollbar appears/disappears */
+    @apply -mr-[--scrollbar-width] scroll-pt-[--scroll-padding];
+  }
+
   html,
   body {
     @apply h-full overscroll-none;
@@ -105,12 +110,6 @@
     @apply border-border;
   }
 
-  html {
-    scroll-padding-block: var(--scroll-padding);
-    /* This is to prevent layout jumping when the scrollbar appears/disappears */
-    @apply -mr-[--scrollbar-width];
-  }
-
   body {
     @apply antialiased bg-background text-foreground overflow-y-auto overflow-x-clip;
     font-feature-settings:

diff --git a/packages/zudoku/src/lib/components/Header.tsx b/packages/zudoku/src/lib/components/Header.tsx
@@ -66,7 +66,7 @@ export const Header = memo(function HeaderInner() {
             <div>{page.banner.message}</div>
           </div>
         ) : (
-          <style>{`:root{--banner-height: 0}`}</style>
+          <style>{`:root{ --banner-height: 0px }`}</style>
         )}
       </>
       <div className="max-w-screen-2xl mx-auto">

diff --git a/packages/zudoku/src/lib/plugins/openapi/OperationListItem.tsx b/packages/zudoku/src/lib/plugins/openapi/OperationListItem.tsx
@@ -60,15 +60,25 @@ export const OperationListItem = ({
         )}
         {renderIf(operation.requestBody?.content?.at(0)?.schema, (schema) => (
           <div className="mt-4 flex flex-col gap-4">
-            <Heading level={3} className="capitalize">
+            <Heading
+              level={3}
+              className="capitalize"
+              id={`${operation.slug}/request-body`}
+              registerSidebarAnchor
+            >
               Request Body
             </Heading>
             <SchemaView schema={schema} />
           </div>
         ))}
         {operation.responses.length > 0 && (
           <>
-            <Heading level={3} className="capitalize mt-8 pt-8 border-t">
+            <Heading
+              level={3}
+              className="capitalize mt-8 pt-8 border-t"
+              id={`${operation.slug}/responses`}
+              registerSidebarAnchor
+            >
               Responses
             </Heading>
             <Tabs