@gunjo/ui 0.0.1-alpha.1 → 0.0.1-alpha.2

package/src/components/overlay/ShareModal.tsx

@@ -0,0 +1,324 @@
+"use client"
+import React, { useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { IconX as X, IconCopy as Copy, IconGlobe as Globe, IconLock as Lock, IconCheck as Check, IconExternalLink as ExternalLink } from "@tabler/icons-react";
+import { cn } from '../../lib/utils';
+import { Button } from '../inputs/Button';
+import { Switch } from '../inputs/Switch';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './Tooltip';
+
+export interface ShareData {
+    isPublic: boolean;
+    token?: string;
+    accessCount?: number;
+    createdAt?: string;
+}
+
+export interface ShareableItem {
+    id: string;
+    share?: ShareData;
+    [key: string]: any;
+}
+
+export interface ShareModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    item: ShareableItem;
+    onUpdate: (id: string, updates: Partial<ShareableItem>) => void;
+    apiEndpoint?: string; // Allow customizing API endpoint
+    onToggleShare?: (id: string, enable: boolean) => ShareData | Promise<ShareData>;
+    onCopyShareUrl?: (url: string) => void | Promise<void>;
+    onOpenShareUrl?: (url: string) => void | Promise<void>;
+    portalContainer?: HTMLElement | null;
+    labels?: {
+        title?: string;
+        publicLink?: string;
+        publicDescription?: string;
+        privateDescription?: string;
+        publicUrl?: string;
+        sharingDisabled?: string;
+        accessCount?: string;
+        token?: string;
+        copy?: string;
+        copied?: string;
+        copyFailed?: string;
+        open?: string;
+        openPreview?: string;
+        close?: string;
+        enablePublicLink?: string;
+        disablePublicLink?: string;
+        sharingDisabledReason?: string;
+    };
+}
+
+async function writeClipboardText(text: string) {
+    if (navigator.clipboard?.writeText) {
+        await navigator.clipboard.writeText(text);
+        return;
+    }
+
+    const textarea = document.createElement("textarea");
+    textarea.value = text;
+    textarea.setAttribute("readonly", "");
+    textarea.style.position = "fixed";
+    textarea.style.left = "-9999px";
+    document.body.appendChild(textarea);
+    textarea.select();
+    const copied = document.execCommand("copy");
+    document.body.removeChild(textarea);
+
+    if (!copied) {
+        throw new Error("Failed to copy share URL");
+    }
+}
+
+export const ShareModal = ({
+    isOpen,
+    onClose,
+    item,
+    onUpdate,
+    apiEndpoint = '/api/share',
+    onToggleShare,
+    onCopyShareUrl,
+    onOpenShareUrl,
+    portalContainer,
+    labels,
+}: ShareModalProps) => {
+    const titleId = React.useId();
+    const [isPublic, setIsPublic] = useState(item.share?.isPublic || false);
+    const [isLoading, setIsLoading] = useState(false);
+    const [copied, setCopied] = useState(false);
+    const [shareData, setShareData] = useState<ShareData | undefined>(item.share);
+    const [mounted, setMounted] = useState(false);
+
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+
+    useEffect(() => {
+        setIsPublic(item.share?.isPublic || false);
+        setShareData(item.share);
+    }, [item.id, item.share]);
+
+    if (!isOpen || !mounted) return null;
+
+    const handleToggleShare = async () => {
+        setIsLoading(true);
+        try {
+            const nextIsPublic = !isPublic;
+            const nextShare = onToggleShare
+                ? await onToggleShare(item.id, nextIsPublic)
+                : (await fetch(apiEndpoint, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        id: item.id,
+                        enable: nextIsPublic
+                    })
+                }).then((res) => res.ok ? res.json() : Promise.reject(new Error("Failed to toggle share")))).share;
+
+            setIsPublic(nextIsPublic);
+            setShareData(nextShare);
+            onUpdate(item.id, { share: nextShare });
+        } catch (error) {
+            console.error('Failed to toggle share', error);
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const shareUrl = shareData?.token
+        ? `${window.location.origin}/share/${shareData.token}`
+        : '';
+
+    const handleCopy = async () => {
+        if (!shareUrl) return;
+
+        try {
+            if (onCopyShareUrl) {
+                await onCopyShareUrl(shareUrl);
+            } else {
+                await writeClipboardText(shareUrl);
+            }
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        } catch (error) {
+            console.error('Failed to copy share URL', error);
+        }
+    };
+
+    const handleOpen = async () => {
+        if (!shareUrl) return;
+
+        if (onOpenShareUrl) {
+            await onOpenShareUrl(shareUrl);
+            return;
+        }
+
+        window.open(shareUrl, "_blank", "noopener,noreferrer");
+    };
+
+    return createPortal(
+        <div
+            className={cn(
+                "fixed inset-0 z-50 flex items-center justify-center bg-overlay/50 backdrop-blur-sm animate-in fade-in duration-200",
+                portalContainer && "absolute"
+            )}
+            onClick={(e) => { e.stopPropagation(); onClose(); }}
+        >
+            <div
+                className="mx-4 w-[448px] max-w-md max-w-[calc(100%-2rem)] overflow-hidden rounded-xl border border-border bg-background shadow-2xl animate-in zoom-in-95 duration-200"
+                role="dialog"
+                aria-modal="true"
+                aria-labelledby={titleId}
+                onClick={e => e.stopPropagation()}
+            >
+                {/* Header */}
+                <div className="flex items-center justify-between px-4 py-3 border-b border-border bg-muted/50">
+                    <h3 id={titleId} className="text-sm font-semibold text-foreground flex items-center gap-2">
+                        <Globe size={16} className="text-primary" />
+                        {labels?.title ?? "Share Image"}
+                    </h3>
+                    <TooltipProvider>
+                        <Tooltip>
+                            <TooltipTrigger asChild>
+                                <Button
+                                    type="button"
+                                    size="icon"
+                                    variant="ghost"
+                                    onClick={onClose}
+                                    className="h-8 w-8 text-muted-foreground"
+                                    aria-label={labels?.close ?? "Close"}
+                                >
+                                    <X size={18} />
+                                </Button>
+                            </TooltipTrigger>
+                            <TooltipContent portalContainer={portalContainer}>
+                                {labels?.close ?? "Close"}
+                            </TooltipContent>
+                        </Tooltip>
+                    </TooltipProvider>
+                </div>
+
+                {/* Content */}
+                <div className="p-6 space-y-6">
+
+                    {/* Toggle Switch */}
+                    <div className="flex items-center justify-between">
+                        <div className="space-y-1">
+                            <div className="text-sm font-medium text-foreground">{labels?.publicLink ?? "Public Link"}</div>
+                            <div className="text-xs text-muted-foreground">
+                                {isPublic
+                                    ? labels?.publicDescription ?? "Anyone with the link can view this image."
+                                    : labels?.privateDescription ?? "Only you can view this image."}
+                            </div>
+                        </div>
+
+                        <TooltipProvider>
+                            <Tooltip>
+                                <TooltipTrigger asChild>
+                                    <Switch
+                                        checked={isPublic}
+                                        onCheckedChange={handleToggleShare}
+                                        disabled={isLoading}
+                                        aria-label={
+                                            isPublic
+                                                ? labels?.disablePublicLink ?? "Turn public link off"
+                                                : labels?.enablePublicLink ?? "Turn public link on"
+                                        }
+                                    />
+                                </TooltipTrigger>
+                                <TooltipContent portalContainer={portalContainer}>
+                                    {isPublic
+                                        ? labels?.disablePublicLink ?? "Turn public link off"
+                                        : labels?.enablePublicLink ?? "Turn public link on"}
+                                </TooltipContent>
+                            </Tooltip>
+                        </TooltipProvider>
+                    </div>
+
+                    {/* URL Display */}
+                    {isPublic && shareData && (
+                        <div className="space-y-2 animate-in slide-in-from-top-2 duration-200">
+                            <label className="text-xs font-medium text-muted-foreground">{labels?.publicUrl ?? "Public URL"}</label>
+                            <div className="flex items-center gap-2">
+                                <div className="flex-1 bg-muted border border-border rounded-md px-3 py-2 text-xs text-muted-foreground font-mono truncate select-all">
+                                    {shareUrl}
+                                </div>
+                                <TooltipProvider>
+                                    <Tooltip>
+                                        <TooltipTrigger asChild>
+                                            <Button
+                                                type="button"
+                                                size="icon"
+                                                variant="outline"
+                                                onClick={handleCopy}
+                                                className="h-9 w-9 shrink-0 text-muted-foreground"
+                                                aria-label={labels?.copy ?? "Copy to clipboard"}
+                                            >
+                                                {copied ? <Check size={16} className="text-primary" /> : <Copy size={16} />}
+                                            </Button>
+                                        </TooltipTrigger>
+                                        <TooltipContent portalContainer={portalContainer}>
+                                            {copied ? labels?.copied ?? "Copied" : labels?.copy ?? "Copy to clipboard"}
+                                        </TooltipContent>
+                                    </Tooltip>
+                                    <Tooltip>
+                                        <TooltipTrigger asChild>
+                                            <Button
+                                                type="button"
+                                                size="icon"
+                                                variant="outline"
+                                                onClick={handleOpen}
+                                                className="h-9 w-9 shrink-0 text-muted-foreground"
+                                                aria-label={labels?.open ?? "Open in new tab"}
+                                            >
+                                                <ExternalLink size={16} />
+                                            </Button>
+                                        </TooltipTrigger>
+                                        <TooltipContent portalContainer={portalContainer}>
+                                            {labels?.openPreview ?? labels?.open ?? "Open in new tab"}
+                                        </TooltipContent>
+                                    </Tooltip>
+                                </TooltipProvider>
+                            </div>
+
+                            {/* Stats */}
+                            <div className="flex items-center gap-4 pt-2">
+                                <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                                    <Globe size={12} />
+                                    <span>{labels?.accessCount ?? "Access Count"}: <span className="text-foreground font-mono">{shareData.accessCount || 0}</span></span>
+                                </div>
+                                <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                                    <Lock size={12} />
+                                    <span>{labels?.token ?? "Token"}: <span className="text-foreground font-mono">{shareData.token?.slice(0, 8)}...</span></span>
+                                </div>
+                            </div>
+                        </div>
+                    )}
+
+                    {!isPublic && (
+                        <TooltipProvider>
+                            <Tooltip>
+                                <TooltipTrigger asChild>
+                                    <div
+                                        className="flex cursor-help flex-col items-center justify-center space-y-2 rounded-lg border-2 border-dashed border-border bg-muted/50 py-4 text-muted-foreground"
+                                        tabIndex={0}
+                                    >
+                                        <Lock size={24} />
+                                        <span className="text-xs">{labels?.sharingDisabled ?? "Sharing is disabled"}</span>
+                                    </div>
+                                </TooltipTrigger>
+                                <TooltipContent portalContainer={portalContainer}>
+                                    {labels?.sharingDisabledReason ?? "Turn on the public link switch to create a share URL."}
+                                </TooltipContent>
+                            </Tooltip>
+                        </TooltipProvider>
+                    )}
+
+                </div>
+            </div>
+        </div>,
+        portalContainer ?? document.body
+    );
+};

package/src/components/{molecules → overlay}/Sheet.tsx

@@ -3,9 +3,10 @@
 import * as React from "react"
 import * as SheetPrimitive from "@radix-ui/react-dialog"
 import { type VariantProps, cva } from "class-variance-authority"
-import { X } from "lucide-react"
+import { IconX as X } from "@tabler/icons-react";
 
 import { cn } from "../../lib/utils"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./Tooltip"
 
 const Sheet = SheetPrimitive.Root
 
@@ -51,27 +52,83 @@ const sheetVariants = cva(
 
 interface SheetContentProps
     extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
-    VariantProps<typeof sheetVariants> { }
+    VariantProps<typeof sheetVariants> {
+    portalContainer?: HTMLElement | null
+    overlayClassName?: string
+    closeLabel?: string
+}
 
 const SheetContent = React.forwardRef<
     React.ElementRef<typeof SheetPrimitive.Content>,
     SheetContentProps
->(({ side = "right", className, children, ...props }, ref) => (
-    <SheetPortal>
-        <SheetOverlay />
-        <SheetPrimitive.Content
-            ref={ref}
-            className={cn(sheetVariants({ side }), className)}
-            {...props}
-        >
-            <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
-                <X className="h-4 w-4" />
-                <span className="sr-only">Close</span>
-            </SheetPrimitive.Close>
-            {children}
-        </SheetPrimitive.Content>
-    </SheetPortal>
-))
+>(({ side = "right", className, children, portalContainer, overlayClassName, closeLabel = "Close", onOpenAutoFocus, ...props }, ref) => {
+    const contentRef = React.useRef<React.ElementRef<typeof SheetPrimitive.Content> | null>(null)
+
+    const setRefs = React.useCallback(
+        (node: React.ElementRef<typeof SheetPrimitive.Content> | null) => {
+            contentRef.current = node
+            if (typeof ref === "function") {
+                ref(node)
+            } else if (ref) {
+                ref.current = node
+            }
+        },
+        [ref]
+    )
+
+    const handleOpenAutoFocus = React.useCallback(
+        (event: Event) => {
+            onOpenAutoFocus?.(event)
+            if (event.defaultPrevented) return
+
+            event.preventDefault()
+            requestAnimationFrame(() => {
+                contentRef.current?.focus({ preventScroll: true })
+            })
+        },
+        [onOpenAutoFocus]
+    )
+
+    return (
+        <SheetPortal container={portalContainer ?? undefined}>
+            <SheetOverlay className={cn(portalContainer && "absolute", overlayClassName)} />
+            <SheetPrimitive.Content
+                ref={setRefs}
+                tabIndex={-1}
+                onOpenAutoFocus={handleOpenAutoFocus}
+                className={cn(
+                    sheetVariants({ side }),
+                    portalContainer && "absolute",
+                    portalContainer && "data-[state=open]:!transform-none",
+                    portalContainer && side === "right" && "right-0 top-0 h-full",
+                    portalContainer && side === "left" && "left-0 top-0 h-full",
+                    portalContainer && side === "top" && "left-0 right-0 top-0",
+                    portalContainer && side === "bottom" && "bottom-0 left-0 right-0",
+                    className
+                )}
+                {...props}
+            >
+                <TooltipProvider>
+                    <Tooltip>
+                        <TooltipTrigger asChild>
+                            <SheetPrimitive.Close
+                                className="absolute right-4 top-4 rounded-sm p-1 opacity-70 ring-offset-background transition-opacity hover:bg-muted hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
+                                aria-label={closeLabel}
+                            >
+                                <X className="h-4 w-4" />
+                                <span className="sr-only">{closeLabel}</span>
+                            </SheetPrimitive.Close>
+                        </TooltipTrigger>
+                        <TooltipContent portalContainer={portalContainer}>
+                            {closeLabel}
+                        </TooltipContent>
+                    </Tooltip>
+                </TooltipProvider>
+                {children}
+            </SheetPrimitive.Content>
+        </SheetPortal>
+    )
+})
 SheetContent.displayName = SheetPrimitive.Content.displayName
 
 const SheetHeader = ({
@@ -94,7 +151,7 @@ const SheetFooter = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
     <div
         className={cn(
-            "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+            "flex flex-row flex-wrap justify-end gap-2 sm:space-x-2",
             className
         )}
         {...props}

package/src/components/overlay/Tooltip.tsx

@@ -0,0 +1,130 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "../../lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+type TooltipProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root> & {
+    /**
+     * Opens the tooltip for a short time on touch/pen press.
+     * This keeps disabled reasons and icon-only feedback available on mobile.
+     */
+    openOnPress?: boolean
+    pressOpenDuration?: number
+}
+
+type TooltipInteractionContextValue = {
+    openFromPress: () => void
+}
+
+const TooltipInteractionContext = React.createContext<TooltipInteractionContextValue | null>(null)
+
+const Tooltip = ({
+    children,
+    open,
+    defaultOpen,
+    onOpenChange,
+    openOnPress = true,
+    pressOpenDuration = 2200,
+    ...props
+}: TooltipProps) => {
+    const [internalOpen, setInternalOpen] = React.useState(defaultOpen ?? false)
+    const closeTimerRef = React.useRef<number | null>(null)
+    const isControlled = open !== undefined
+    const resolvedOpen = isControlled ? open : internalOpen
+
+    React.useEffect(() => {
+        return () => {
+            if (closeTimerRef.current !== null) {
+                window.clearTimeout(closeTimerRef.current)
+            }
+        }
+    }, [])
+
+    const setOpen = React.useCallback(
+        (nextOpen: boolean) => {
+            if (!isControlled) {
+                setInternalOpen(nextOpen)
+            }
+            onOpenChange?.(nextOpen)
+        },
+        [isControlled, onOpenChange]
+    )
+
+    const openFromPress = React.useCallback(() => {
+        if (!openOnPress) return
+
+        if (closeTimerRef.current !== null) {
+            window.clearTimeout(closeTimerRef.current)
+        }
+
+        setOpen(true)
+        closeTimerRef.current = window.setTimeout(() => {
+            setOpen(false)
+            closeTimerRef.current = null
+        }, pressOpenDuration)
+    }, [openOnPress, pressOpenDuration, setOpen])
+
+    const contextValue = React.useMemo(() => ({ openFromPress }), [openFromPress])
+
+    return (
+        <TooltipInteractionContext.Provider value={contextValue}>
+            <TooltipPrimitive.Root
+                open={resolvedOpen}
+                onOpenChange={setOpen}
+                {...props}
+            >
+                {children}
+            </TooltipPrimitive.Root>
+        </TooltipInteractionContext.Provider>
+    )
+}
+
+const TooltipTrigger = React.forwardRef<
+    React.ElementRef<typeof TooltipPrimitive.Trigger>,
+    React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger>
+>(({ onPointerDown, ...props }, ref) => {
+    const interaction = React.useContext(TooltipInteractionContext)
+
+    return (
+        <TooltipPrimitive.Trigger
+            ref={ref}
+            onPointerDown={(event) => {
+                onPointerDown?.(event)
+                if (event.defaultPrevented) return
+                if (event.pointerType === "touch" || event.pointerType === "pen") {
+                    interaction?.openFromPress()
+                }
+            }}
+            {...props}
+        />
+    )
+})
+TooltipTrigger.displayName = TooltipPrimitive.Trigger.displayName
+
+type TooltipContentProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {
+    portalContainer?: HTMLElement | null
+}
+
+const TooltipContent = React.forwardRef<
+    React.ElementRef<typeof TooltipPrimitive.Content>,
+    TooltipContentProps
+>(({ className, sideOffset = 4, portalContainer, ...props }, ref) => (
+    <TooltipPrimitive.Portal container={portalContainer ?? undefined}>
+        <TooltipPrimitive.Content
+            ref={ref}
+            sideOffset={sideOffset}
+            className={cn(
+                "pointer-events-none z-50 w-fit max-w-xs overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-center text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+                className
+            )}
+            {...props}
+        />
+    </TooltipPrimitive.Portal>
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/src/components/overlay/generated/default-variant-keys.ts

@@ -0,0 +1,14 @@
+/* eslint-disable */
+// Generated by `npm run design:sync:components`. Do not edit manually.
+
+import type { ChatPanelVariantKey, MediaLightboxVariantKey, MediaPickerDialogVariantKey } from "./variant-keys";
+
+export const chatPanelDefaultVariantKey: ChatPanelVariantKey = "default";
+export const mediaLightboxDefaultVariantKey: MediaLightboxVariantKey = "default";
+export const mediaPickerDialogDefaultVariantKey: MediaPickerDialogVariantKey = "default";
+
+export const overlayDefaultVariantKeys = {
+  chatPanel: chatPanelDefaultVariantKey,
+  mediaLightbox: mediaLightboxDefaultVariantKey,
+  mediaPickerDialog: mediaPickerDialogDefaultVariantKey,
+} as const;

package/src/components/overlay/generated/variant-keys.ts

@@ -0,0 +1,17 @@
+/* eslint-disable */
+// Generated by `npm run design:sync:components`. Do not edit manually.
+
+export const chatPanelVariantKeys = ["compact", "default"] as const;
+export type ChatPanelVariantKey = (typeof chatPanelVariantKeys)[number];
+
+export const mediaLightboxVariantKeys = ["compact", "default"] as const;
+export type MediaLightboxVariantKey = (typeof mediaLightboxVariantKeys)[number];
+
+export const mediaPickerDialogVariantKeys = ["compact", "default"] as const;
+export type MediaPickerDialogVariantKey = (typeof mediaPickerDialogVariantKeys)[number];
+
+export const overlayVariantKeys = {
+  chatPanel: chatPanelVariantKeys,
+  mediaLightbox: mediaLightboxVariantKeys,
+  mediaPickerDialog: mediaPickerDialogVariantKeys,
+} as const;

package/src/components/patterns/BlogTemplate.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+
+export interface BlogTemplateProps
+    extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
+    category?: React.ReactNode
+    title: React.ReactNode
+    /** Author / read time / date row. */
+    meta?: React.ReactNode
+    hero?: React.ReactNode
+}
+
+const BlogTemplate = React.forwardRef<HTMLElement, BlogTemplateProps>(
+    (
+        { className, category, title, meta, hero, children, ...props },
+        ref
+    ) => (
+        <article
+            ref={ref}
+            className={cn("mx-auto flex w-full max-w-3xl flex-col gap-6 px-6 py-12", className)}
+            {...props}
+        >
+            {category ? (
+                <p className="text-sm font-medium uppercase tracking-wide text-muted-foreground">
+                    {category}
+                </p>
+            ) : null}
+            <h1 className="text-4xl font-bold tracking-tight md:text-5xl">{title}</h1>
+            {meta ? (
+                <div className="text-sm text-muted-foreground">{meta}</div>
+            ) : null}
+            {hero ? (
+                <div className="overflow-hidden rounded-lg border border-border">
+                    {hero}
+                </div>
+            ) : null}
+            <div className="prose prose-sm max-w-none text-foreground prose-headings:text-foreground prose-strong:text-foreground prose-a:text-foreground">
+                {children}
+            </div>
+        </article>
+    )
+)
+BlogTemplate.displayName = "BlogTemplate"
+
+export { BlogTemplate }

package/src/components/{templates → patterns}/DashboardTemplate.tsx

@@ -17,13 +17,13 @@ export function DashboardTemplate({
     return (
         <div className={cn("flex flex-col w-[1280px] h-[720px] min-h-screen w-full", className)} {...props}>
             {header && <div className="border-b">{header}</div>}
-            <div className="flex flex-1">
+            <div className="flex flex-1 min-h-0">
                 {sidebar && (
                     <aside className="hidden border-r w-64 md:block flex-shrink-0">
                         {sidebar}
                     </aside>
                 )}
-                <main className="flex-1 overflow-auto bg-muted/50">
+                <main className="flex-1 min-h-0 overflow-auto bg-muted/50">
                     <div className="container mx-auto py-6 space-y-8 px-4 md:px-6">
                         {children}
                     </div>