zudoku 0.63.0 → 0.64.0

package/src/lib/plugins/markdown/MdxPage.tsx

@@ -27,6 +27,7 @@ import {
 } from "../../components/navigation/utils.js";
 import { Pagination } from "../../components/Pagination.js";
 import { Typography } from "../../components/Typography.js";
+import { joinUrl } from "../../util/joinUrl.js";
 import type { MdxComponentsType } from "../../util/MdxComponents.js";
 import { ChatGPTLogo } from "./assets/ChatGPTLogo.js";
 import { ClaudeLogo } from "./assets/ClaudeLogo.js";
@@ -55,6 +56,7 @@ const MarkdownHeadings = {
 
 export const MdxPage = ({
   mdxComponent: MdxComponent,
+  basePath,
   frontmatter = {},
   defaultOptions,
   __filepath,
@@ -62,6 +64,7 @@ export const MdxPage = ({
   excerpt,
 }: PropsWithChildren<
   Omit<MDXImport, "default"> & {
+    basePath: string;
     mdxComponent: MDXImport["default"];
     defaultOptions?: MarkdownPluginDefaultOptions;
   }
@@ -101,7 +104,7 @@ export const MdxPage = ({
   const copyMarkdownConfig =
     frontmatter.copyPage !== false && defaultOptions?.copyPage !== false;
 
-  const markdownUrl = `${location.pathname}.md`;
+  const markdownUrl = joinUrl(basePath, `${location.pathname}.md`);
 
   const handleCopyMarkdown = async () => {
     const response = await fetch(markdownUrl);

package/src/lib/plugins/markdown/index.tsx

@@ -5,6 +5,7 @@ import type { ZudokuDocsConfig } from "../../../config/validators/validate.js";
 import type { ZudokuPlugin } from "../../core/plugins.js";
 
 export interface MarkdownPluginOptions extends ZudokuDocsConfig {
+  basePath: string;
   fileImports: Record<string, () => Promise<MDXImport>>;
 }
 export type MarkdownPluginDefaultOptions = Pick<
@@ -46,6 +47,7 @@ export const markdownPlugin = (
           return {
             element: (
               <MdxPage
+                basePath={options.basePath}
                 mdxComponent={Component}
                 {...props}
                 defaultOptions={options.defaultOptions}

package/src/lib/plugins/openapi/index.tsx

@@ -1,8 +1,7 @@
-import { CirclePlayIcon, LogInIcon } from "lucide-react";
-import type { ReactNode } from "react";
+import { CirclePlayIcon } from "lucide-react";
+import type { PropsWithChildren } from "react";
 import { matchPath } from "react-router";
 import type { NavigationItem } from "../../../config/validators/NavigationSchema.js";
-import { useAuth } from "../../authentication/hook.js";
 import type { ZudokuPlugin } from "../../core/plugins.js";
 import { Button } from "../../ui/Button.js";
 import { joinUrl } from "../../util/joinUrl.js";
@@ -71,47 +70,28 @@ export const openApiPlugin = (config: OasPluginConfig): ZudokuPlugin => {
     },
     getMdxComponents: () => ({
       OpenPlaygroundButton: ({
-        requireAuth,
         server,
-        method,
-        url,
+        method = "get",
+        url = "/",
         children,
         ...props
-      }: Partial<PlaygroundContentProps> & { children: ReactNode } & Pick<
-          PlaygroundContentProps,
-          "server"
-        > & {
-          requireAuth: boolean;
-        }) => {
-        const auth = useAuth();
-
+      }: PropsWithChildren<Partial<PlaygroundContentProps>>) => {
         if (!server) {
           throw new Error("Server is required");
         }
 
-        if (requireAuth && !auth.isAuthenticated) {
-          return (
-            <Button
-              className="gap-2 items-center"
-              variant="outline"
-              onClick={auth.login}
-            >
-              Login to open in Playground <LogInIcon size={16} />
-            </Button>
-          );
-        }
-
         return (
           <PlaygroundDialog
-            url={url ?? "/"}
-            method={method ?? "get"}
+            url={url}
+            method={method}
             server={server}
             {...props}
           >
             <Button className="gap-2 items-center" variant="outline">
               {children ?? (
                 <>
-                  Open in Playground <CirclePlayIcon size={16} />
+                  Open in Playground
+                  <CirclePlayIcon size={16} />
                 </>
               )}
             </Button>

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

@@ -12,7 +12,7 @@ export const CollapsibleHeaderTrigger = ({
   return (
     <div
       className={cn(
-        "grid grid-cols-[max-content_1fr_min-content_max-content] items-center gap-4 group bg-muted w-full h-10 ps-4 pe-2 border-b",
+        "grid grid-cols-[max-content_1fr_min-content_max-content] items-center gap-2 group bg-muted w-full h-10 ps-4 pe-2 border-b",
         className,
       )}
     >
@@ -24,7 +24,7 @@ export const CollapsibleHeaderTrigger = ({
         )}
       >
         <ChevronUpIcon
-          className="group-data-[state=open]:rotate-180 transition-transform flex-shrink-0"
+          className="group-data-[state=open]:rotate-180 transition-transform shrink-0"
           size={16}
         />
       </CollapsibleTrigger>

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

@@ -145,6 +145,7 @@ export const Playground = ({
   const { setRememberedIdentity, getRememberedIdentity } = useIdentityStore();
   const [, startTransition] = useTransition();
   const { skipLogin, setSkipLogin } = useRememberSkipLoginDialog();
+  const [isLoginDialogDismissed, setIsLoginDialogDismissed] = useState(false);
   const [showLongRunningWarning, setShowLongRunningWarning] = useState(false);
   const abortControllerRef = useRef<AbortController | undefined>(undefined);
   const latestSetRememberedIdentity = useLatest(setRememberedIdentity);
@@ -361,7 +362,7 @@ export const Playground = ({
     </div>
   );
 
-  const showLogin = requiresLogin && !skipLogin;
+  const showLogin = requiresLogin && !skipLogin && !isLoginDialogDismissed;
   const isBodySupported = ["POST", "PUT", "PATCH", "DELETE"].includes(
     method.toUpperCase(),
   );
@@ -397,7 +398,17 @@ export const Playground = ({
           />
           <RequestLoginDialog
             open={showLogin}
-            setOpen={(open) => setSkipLogin(!open)}
+            setOpen={(open) => {
+              if (!open) {
+                setIsLoginDialogDismissed(true);
+              }
+            }}
+            onSkip={(rememberSkip) => {
+              setIsLoginDialogDismissed(true);
+              if (rememberSkip) {
+                setSkipLogin(true);
+              }
+            }}
             onSignUp={onSignUp}
             onLogin={onLogin}
           />

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

@@ -1,4 +1,6 @@
+import { useState } from "react";
 import { Button } from "zudoku/ui/Button.js";
+import { Checkbox } from "zudoku/ui/Checkbox.js";
 import {
   Dialog,
   DialogContent,
@@ -6,18 +8,28 @@ import {
   DialogFooter,
   DialogTitle,
 } from "zudoku/ui/Dialog.js";
+import { Label } from "zudoku/ui/Label.js";
 
 const RequestLoginDialog = ({
   open,
   setOpen,
   onSignUp,
   onLogin,
+  onSkip,
 }: {
   open: boolean;
   onSignUp?: () => void;
   onLogin?: () => void;
   setOpen: (open: boolean) => void;
+  onSkip?: (rememberSkip: boolean) => void;
 }) => {
+  const [rememberSkip, setRememberSkip] = useState(false);
+
+  const handleSkip = () => {
+    onSkip?.(rememberSkip);
+    setOpen(false);
+  };
+
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogContent>
@@ -26,8 +38,15 @@ const RequestLoginDialog = ({
           The Playground is a tool for developers to test and explore our APIs.
           To use the Playground, you need to login.
         </DialogDescription>
+        <Label className="flex items-center gap-2 font-normal">
+          <Checkbox
+            checked={rememberSkip}
+            onCheckedChange={(checked) => setRememberSkip(checked === true)}
+          />
+          Don't show this again
+        </Label>
         <DialogFooter className="flex gap-2 sm:justify-between">
-          <Button type="button" variant="ghost" onClick={() => setOpen(false)}>
+          <Button type="button" variant="outline" onClick={handleSkip}>
             Skip
           </Button>
           <div className="flex gap-2">

package/src/lib/plugins/openapi/playground/result-panel/ResponseStatusBar.tsx

@@ -84,7 +84,7 @@ export const ResponseStatusBar = ({
   };
 
   return (
-    <div className="relative flex h-10 text-xs gap-4 px-4 items-center justify-between font-mono border-b">
+    <div className="relative shrink-0 flex h-10 text-xs gap-4 px-4 items-center justify-between font-mono border-b">
       <div className="flex items-center gap-2">
         <ResponseCodeCircle status={status} /> {status ?? "Sending Request..."}
         {status ? ` ${statusCodeMap[status]}` : ""}
@@ -104,7 +104,7 @@ export const ResponseStatusBar = ({
         </div>
       </div>
       <div
-        className="h-full bg-neutral-500/10 absolute left-0 -bottom-0 z-10 transition-all duration-200 ease-in-out"
+        className="h-full bg-neutral-500/10 absolute left-0 bottom-0 z-10 transition-all duration-200 ease-in-out"
         style={{
           opacity: isFinished ? 0 : 1,
           width: isFinished ? 0 : `${progress * 100}%`,

package/src/lib/plugins/openapi/playground/result-panel/ResponseTab.tsx

@@ -5,7 +5,9 @@ import {
   DownloadIcon,
   EyeIcon,
   EyeOffIcon,
+  MinusCircleIcon,
   PlusCircleIcon,
+  SquareCodeIcon,
 } from "lucide-react";
 import { useState } from "react";
 import { Button } from "zudoku/ui/Button.js";
@@ -22,6 +24,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "zudoku/ui/Select.js";
+import { SyntaxHighlight } from "zudoku/ui/SyntaxHighlight.js";
 import { cn } from "../../../../util/cn.js";
 import createVariantComponent from "../../../../util/createVariantComponent.js";
 import { humanFileSize } from "../../../../util/humanFileSize.js";
@@ -30,7 +33,6 @@ import {
   CollapsibleHeaderTrigger,
 } from "../CollapsibleHeader.js";
 import { convertToTypes } from "./convertToTypes.js";
-import { Highlight } from "./Highlight.js";
 
 const mimeTypeToLanguage = (mimeType: string) => {
   const mimeTypeMapping = {
@@ -92,28 +94,35 @@ const Row = createVariantComponent(
   "grid-cols-subgrid grid border-b col-span-full px-4 py-1.5 font-mono text-xs",
 );
 
-const RowContent = createVariantComponent("div", "py-1 break-all");
+const RowContent = createVariantComponent("div", "py-1 break-words");
 const RowValue = ({ value, header }: { value: string; header: string }) => {
   const secretHeaders = ["authorization", "key", "secret", "token"];
   const isSecret = secretHeaders.includes(header.toLowerCase());
   const [revealed, setRevealed] = useState(!isSecret);
   return (
     <RowContent
-      className={cn(isSecret && "cursor-pointer flex group")}
+      className={cn(
+        "max-h-28 overflow-auto",
+        isSecret && "cursor-pointer flex group",
+      )}
       onClick={() => {
         if (isSecret) {
           setRevealed((prev) => !prev);
         }
       }}
     >
-      <SecretText secret={value} previewChars={0} revealed={revealed} />
-      {isSecret ? (
-        revealed ? (
-          <EyeOffIcon size={14} className={cn("hidden group-hover:block")} />
-        ) : (
-          <EyeIcon size={14} className={cn("hidden group-hover:block")} />
-        )
-      ) : null}
+      {!isSecret ? (
+        value
+      ) : (
+        <>
+          <SecretText secret={value} previewChars={0} revealed={revealed} />
+          {revealed ? (
+            <EyeOffIcon size={14} className={cn("hidden group-hover:block")} />
+          ) : (
+            <EyeIcon size={14} className={cn("hidden group-hover:block")} />
+          )}
+        </>
+      )}
     </RowContent>
   );
 };
@@ -174,13 +183,13 @@ export const ResponseTab = ({
     <>
       <Collapsible defaultOpen>
         <CollapsibleHeaderTrigger>
-          <CornerDownRightIcon size={16} />
+          <CornerDownRightIcon size={14} />
           <CollapsibleHeader className="col-span-2">
-            Header Request
+            Request Headers
           </CollapsibleHeader>
         </CollapsibleHeaderTrigger>
         <CollapsibleContent>
-          <div className="grid grid-cols-2 gap-x-6 text-sm">
+          <div className="grid grid-cols-[2fr_3fr] gap-x-6 text-sm">
             {request.headers
               .slice(0, MAX_HEADERS_TO_SHOW)
               .map(([key, value]) => (
@@ -189,19 +198,45 @@ export const ResponseTab = ({
                   <RowValue value={value} header={key} />
                 </Row>
               ))}
+            {request.headers.length > MAX_HEADERS_TO_SHOW && (
+              <Collapsible className="col-span-full grid-cols-subgrid grid group">
+                <CollapsibleTrigger className="data-[state=open]:hidden justify-center col-span-2 text-xs text-muted-foreground hover:text-primary border-b h-8 flex items-center gap-2">
+                  Show {request.headers.length - MAX_HEADERS_TO_SHOW} more
+                  headers
+                  <PlusCircleIcon size={12} className="text-muted-foreground" />
+                </CollapsibleTrigger>
+                <CollapsibleContent className="col-span-full grid grid-cols-subgrid">
+                  {request.headers
+                    .slice(MAX_HEADERS_TO_SHOW)
+                    .map(([key, value]) => (
+                      <Row key={key}>
+                        <RowContent>{key}</RowContent>
+                        <RowValue value={value} header={key} />
+                      </Row>
+                    ))}
+                  <CollapsibleTrigger className="justify-center col-span-2 text-xs text-muted-foreground hover:text-primary border-b h-8 flex items-center gap-2">
+                    Hide {request.headers.length - MAX_HEADERS_TO_SHOW} headers
+                    <MinusCircleIcon
+                      size={12}
+                      className="text-muted-foreground"
+                    />
+                  </CollapsibleTrigger>
+                </CollapsibleContent>
+              </Collapsible>
+            )}
           </div>
         </CollapsibleContent>
       </Collapsible>
 
       <Collapsible defaultOpen>
         <CollapsibleHeaderTrigger>
-          <CornerDownLeftIcon size={16} />
+          <CornerDownLeftIcon size={14} />
           <CollapsibleHeader className="col-span-2">
-            Header Response
+            Response Headers
           </CollapsibleHeader>
         </CollapsibleHeaderTrigger>
         <CollapsibleContent>
-          <div className="grid grid-cols-2 gap-x-6 text-sm">
+          <div className="grid grid-cols-[2fr_3fr] gap-x-6 text-sm">
             {sortedHeaders.slice(0, MAX_HEADERS_TO_SHOW).map(([key, value]) => (
               <Row key={key}>
                 <RowContent>{key}</RowContent>
@@ -211,10 +246,7 @@ export const ResponseTab = ({
             {sortedHeaders.length > MAX_HEADERS_TO_SHOW && (
               <Collapsible className="col-span-full grid-cols-subgrid grid group">
                 <CollapsibleTrigger className="data-[state=open]:hidden justify-center col-span-2 text-xs text-muted-foreground hover:text-primary border-b h-8 flex items-center gap-2">
-                  <span>
-                    Show {sortedHeaders.length - MAX_HEADERS_TO_SHOW} more
-                    headers
-                  </span>
+                  Show {sortedHeaders.length - MAX_HEADERS_TO_SHOW} more headers
                   <PlusCircleIcon size={12} className="text-muted-foreground" />
                 </CollapsibleTrigger>
                 <CollapsibleContent className="col-span-full grid grid-cols-subgrid">
@@ -226,6 +258,13 @@ export const ResponseTab = ({
                         <RowValue value={value} header={key} />
                       </Row>
                     ))}
+                  <CollapsibleTrigger className="justify-center col-span-2 text-xs text-muted-foreground hover:text-primary border-b h-8 flex items-center gap-2">
+                    Hide {sortedHeaders.length - MAX_HEADERS_TO_SHOW} headers
+                    <MinusCircleIcon
+                      size={12}
+                      className="text-muted-foreground"
+                    />
+                  </CollapsibleTrigger>
                 </CollapsibleContent>
               </Collapsible>
             )}
@@ -233,26 +272,30 @@ export const ResponseTab = ({
         </CollapsibleContent>
       </Collapsible>
 
-      <div className="flex gap-2 justify-between items-center border-b h-10">
+      <div className="flex gap-2 justify-between items-center border-b px-2 flex-0">
+        <CollapsibleHeader className="flex items-center gap-2">
+          <SquareCodeIcon size={14} />
+          Response body
+        </CollapsibleHeader>
         {jsonContent && !isBinary && (
-          <div className="px-2">
-            <Select
-              value={view}
-              onValueChange={(value) => setView(value as "formatted" | "raw")}
-            >
-              <SelectTrigger className="min-w-32 border-none h-8">
-                <SelectValue placeholder="View" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="formatted">Formatted</SelectItem>
-                <SelectItem value="raw">Raw</SelectItem>
-                <SelectItem value="types">Types</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
+          <Select
+            value={view}
+            onValueChange={(value) =>
+              setView(value as "formatted" | "raw" | "types")
+            }
+          >
+            <SelectTrigger className="max-w-32 border-0 bg-transparent">
+              <SelectValue placeholder="View" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="formatted">Formatted</SelectItem>
+              <SelectItem value="raw">Raw</SelectItem>
+              <SelectItem value="types">Types</SelectItem>
+            </SelectContent>
+          </Select>
         )}
       </div>
-      <div>
+      <div className="flex-1">
         {isBinary ? (
           <div className="p-4 text-center">
             <div className="flex flex-col items-center gap-4">
@@ -272,26 +315,27 @@ export const ResponseTab = ({
             </div>
           </div>
         ) : (
-          <div className="overflow-auto max-w-full p-4 text-xs max-h-[calc(83.333vh-180px)]">
-            <Highlight
-              language={
-                view === "types"
-                  ? "typescript"
-                  : view === "raw"
-                    ? jsonContent
-                      ? "plain"
-                      : detectedLanguage
-                    : "json"
-              }
-              code={
-                (view === "raw"
-                  ? body
-                  : view === "types"
-                    ? types.data?.lines.join("\n")
-                    : beautifiedBody) ?? ""
-              }
-            />
-          </div>
+          <SyntaxHighlight
+            className="text-xs flex-1"
+            embedded
+            fullHeight
+            language={
+              view === "types"
+                ? "typescript"
+                : view === "raw"
+                  ? jsonContent
+                    ? "plain"
+                    : detectedLanguage
+                  : "json"
+            }
+            code={
+              (view === "raw"
+                ? body
+                : view === "types"
+                  ? types.data?.lines.join("\n")
+                  : beautifiedBody) ?? ""
+            }
+          />
         )}
       </div>
     </>

package/src/lib/plugins/openapi/playground/result-panel/ResultPanel.tsx

@@ -25,7 +25,7 @@ export const ResultPanel = ({
   tip?: React.ReactNode;
 }) => {
   return (
-    <div className="overflow-y-auto h-[80vh] bg-muted/50">
+    <div className="flex flex-col overflow-y-auto h-[80vh] bg-muted/50">
       {(queryMutation.isPending || queryMutation.data) && (
         <ResponseStatusBar
           status={queryMutation.data?.status}

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

@@ -1,5 +1,6 @@
 import { create } from "zustand";
 import { createJSONStorage, persist } from "zustand/middleware";
+import { syncZustandState } from "../../../util/syncZustandState.js";
 
 type RememberSkipLoginState = {
   skipLogin: boolean;
@@ -18,3 +19,5 @@ export const useRememberSkipLoginDialog = create<RememberSkipLoginState>()(
     },
   ),
 );
+
+syncZustandState(useRememberSkipLoginDialog);

package/src/lib/shiki.ts

@@ -7,7 +7,7 @@ import {
 } from "@shikijs/transformers";
 import type { Root } from "hast";
 import { toJsxRuntime } from "hast-util-to-jsx-runtime";
-import { Fragment, type JSX } from "react";
+import { createElement, Fragment } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import type {
   BundledLanguage,
@@ -21,6 +21,9 @@ import type { Pluggable } from "unified";
 import { visit } from "unist-util-visit";
 import { cn } from "./util/cn.js";
 
+export const HIGHLIGHT_CODE_BLOCK_CLASS =
+  "overflow-x-auto scrollbar not-inline";
+
 const engine = createJavaScriptRegexEngine({ forgiving: true });
 export const highlighter = await createHighlighterCore({
   engine,
@@ -143,5 +146,16 @@ export const highlight = (
     themes,
   });
 
-  return toJsxRuntime(value, { Fragment, jsx, jsxs }) as JSX.Element;
+  return toJsxRuntime(value, {
+    Fragment,
+    jsx,
+    jsxs,
+    components: {
+      code: (props) =>
+        createElement("code", {
+          ...props,
+          className: cn(props.className, HIGHLIGHT_CODE_BLOCK_CLASS),
+        }),
+    },
+  });
 };

package/src/lib/ui/Callout.tsx

@@ -14,7 +14,8 @@ const stylesMap = {
     bg: "bg-gray-100 dark:bg-zinc-800/50",
     iconColor: "text-gray-600 dark:text-zinc-300",
     titleColor: "text-gray-600 dark:text-zinc-300",
-    textColor: "text-gray-600 dark:text-zinc-300",
+    textColor:
+      "text-gray-600 dark:text-zinc-300 [&_a]:hover:text-gray-700 [&_a]:dark:hover:text-zinc-400",
     Icon: InfoIcon as LucideIcon,
   },
   tip: {
@@ -22,7 +23,8 @@ const stylesMap = {
     bg: "bg-green-200/25 dark:bg-green-950/70",
     iconColor: "text-green-600 dark:text-green-200",
     titleColor: "text-green-700 dark:text-green-200",
-    textColor: "text-green-600 dark:text-green-50",
+    textColor:
+      "text-green-600 dark:text-green-50 [&_a]:hover:text-green-700 [&_a]:dark:hover:text-green-300",
     Icon: LightbulbIcon as LucideIcon,
   },
   info: {
@@ -30,7 +32,8 @@ const stylesMap = {
     bg: "bg-blue-50 dark:bg-blue-950/40",
     iconColor: "text-blue-400 dark:text-blue-200",
     titleColor: "text-blue-700 dark:text-blue-200",
-    textColor: "text-blue-600 dark:text-blue-100",
+    textColor:
+      "text-blue-600 dark:text-blue-100 [&_a]:hover:text-blue-800 [&_a]:dark:hover:text-blue-300",
     Icon: InfoIcon as LucideIcon,
   },
   caution: {
@@ -38,7 +41,8 @@ const stylesMap = {
     bg: "bg-yellow-100/60 dark:bg-yellow-400/10",
     iconColor: "text-yellow-500 dark:text-yellow-300",
     titleColor: "text-yellow-600 dark:text-yellow-300",
-    textColor: "text-yellow-700 dark:text-yellow-200",
+    textColor:
+      "text-yellow-700 dark:text-yellow-200 [&_a]:hover:text-yellow-800 [&_a]:dark:hover:text-yellow-300",
     Icon: AlertTriangleIcon as LucideIcon,
   },
   danger: {
@@ -46,7 +50,8 @@ const stylesMap = {
     bg: "bg-rose-50 dark:bg-rose-950/40",
     iconColor: "text-rose-400 dark:text-rose-300",
     titleColor: "text-rose-800 dark:text-rose-300",
-    textColor: "text-rose-700 dark:text-rose-100",
+    textColor:
+      "text-rose-700 dark:text-rose-100 [&_a]:hover:text-rose-800 [&_a]:dark:hover:text-rose-300",
     Icon: ShieldAlertIcon as LucideIcon,
   },
 } as const;

package/src/lib/ui/EmbeddedCodeBlock.tsx

@@ -19,13 +19,14 @@ export type CodeBlockProps = {
 
 export const EmbeddedCodeBlock = ({
   children,
+  fullHeight,
   language,
   showCopy = "hover",
   showCopyText,
   showLanguageIndicator = true,
   showLineNumbers,
   ...props
-}: CodeBlockProps) => {
+}: CodeBlockProps & { fullHeight?: boolean }) => {
   const [isCopied, setIsCopied] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
 
@@ -36,11 +37,13 @@ export const EmbeddedCodeBlock = ({
       className={cn(
         "code-block-wrapper relative group bg-muted/50",
         showLineNumbers && "line-numbers",
+        fullHeight && "h-full",
       )}
     >
       <div
         className={cn(
-          "code-block text-sm not-prose scrollbar overflow-x-auto [&>pre]:p-2",
+          "code-block text-sm not-prose scrollbar [&>pre]:overflow-x-auto [&>pre]:p-2",
+          fullHeight && "h-full [&>pre]:h-full",
           props.className,
         )}
         ref={ref}
@@ -50,7 +53,7 @@ export const EmbeddedCodeBlock = ({
       {showLanguageIndicator && (
         <span
           className={cn(
-            "absolute top-1.5 end-3 !text-[11px] font-mono text-muted-foreground transition group-hover:opacity-0",
+            "absolute top-1.5 end-3 text-[11px]! font-mono text-muted-foreground transition group-hover:opacity-0",
             showCopy === "always" && "hidden",
           )}
         >