@tscircuit/fake-snippets 0.0.97 → 0.0.99

package/src/components/package-port/CodeEditorHeader.tsx

@@ -29,6 +29,7 @@ import { convertRawEasyToTsx, fetchEasyEDAComponent } from "easyeda/browser"
 import { ComponentSearchResult } from "@tscircuit/runframe/runner"
 import { usePackagesBaseApiUrl } from "@/hooks/use-packages-base-api-url"
 import { ICreateFileProps, ICreateFileResult } from "@/hooks/useFileManagement"
+import { useGlobalStore } from "@/hooks/use-global-store"
 
 export type FileName = string
 
@@ -61,6 +62,7 @@ export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
   const [sidebarOpen, setSidebarOpen] = fileSidebarState
   const API_BASE = usePackagesBaseApiUrl()
   const [aiAutocompleteEnabled, setAiAutocompleteEnabled] = aiAutocompleteState
+  const session = useGlobalStore((s) => s.session)
 
   const handleFormatFile = useCallback(() => {
     if (!window.prettier || !window.prettierPlugins) return
@@ -157,18 +159,21 @@ export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
       updateFileContent(currentFile, newContent)
     }
     if (component.source == "jlcpcb") {
+      if (!session?.token) {
+        throw new Error("You need to be logged in to import jlcpcb component")
+      }
       const jlcpcbComponent = await fetchEasyEDAComponent("C1", {
         fetch: ((url, options: any) => {
           return fetch(`${API_BASE}/proxy`, {
-            ...options,
+            body: options.body,
+            method: options.method,
             headers: {
-              ...options?.headers,
+              authority: options.headers.authority,
+              Authorization: `Bearer ${session?.token}`,
               "X-Target-Url": url.toString(),
-              "X-Sender-Origin": options?.headers?.origin ?? "",
-              "X-Sender-Host": options?.headers?.host ?? "https://easyeda.com",
-              "X-Sender-Referer": options?.headers?.referer ?? "",
-              "X-Sender-User-Agent": options?.headers?.userAgent ?? "",
-              "X-Sender-Cookie": options?.headers?.cookie ?? "",
+              "X-Sender-Host": options.headers.origin,
+              "X-Sender-Origin": options.headers.origin,
+              "content-type": options.headers["content-type"],
             },
           })
         }) as typeof fetch,
@@ -184,13 +189,10 @@ export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
         onError: (error) => {
           throw error
         },
-        openFile: false,
       })
       if (!createFileResult.newFileCreated) {
-        throw new Error("Failed to create file")
+        throw new Error("Failed to create component file")
       }
-      const newContent = `import ${componentName.replace(/-/g, "")} from "./${componentName}.tsx"\n${files[currentFile || ""]}`
-      updateFileContent(currentFile, newContent)
     }
   }
 
@@ -216,7 +218,15 @@ export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
                 sidebarOpen ? "-ml-2" : "-ml-1"
               }`}
             >
-              <SelectValue placeholder="Select file" />
+              <SelectValue
+                placeholder={
+                  Object.keys(files).filter(
+                    (filename) => !isHiddenFile(filename),
+                  ).length > 0
+                    ? "Select file"
+                    : "No files"
+                }
+              />
             </SelectTrigger>
             <SelectContent>
               {Object.keys(files)
@@ -302,12 +312,12 @@ export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
                   onClick={() => {
                     setAiAutocompleteEnabled((prev) => !prev)
                   }}
-                  className={`relative bg-transparent ${aiAutocompleteEnabled ? "text-gray-600 bg-gray-50" : "text-gray-400"}`}
+                  className={`relative group bg-transparent ${aiAutocompleteEnabled ? "text-gray-600 bg-gray-50" : "text-gray-400"}`}
                 >
                   <Bot className="h-4 w-4" />
                   {!aiAutocompleteEnabled && (
                     <div className="absolute inset-0 flex items-center justify-center">
-                      <div className="w-5 h-0.5 bg-gray-400 rotate-45 rounded-full" />
+                      <div className="w-5 h-0.5 group-hover:bg-slate-900 bg-gray-400 rotate-45 rounded-full" />
                     </div>
                   )}
                 </Button>

package/src/components/ui/tree-view.tsx

@@ -3,6 +3,7 @@ import * as AccordionPrimitive from "@radix-ui/react-accordion"
 import { ChevronRight } from "lucide-react"
 import { cva } from "class-variance-authority"
 import { cn } from "@/lib/utils"
+import { Input } from "@/components/ui/input"
 
 const treeVariants = cva(
   "group hover:before:opacity-100 before:absolute before:rounded-lg before:left-0 before:w-full before:opacity-0 before:bg-slate-100/70 before:h-[2rem] before:-z-10' dark:before:bg-slate-800/70",
@@ -18,7 +19,7 @@ const dragOverVariants = cva(
 
 interface TreeDataItem {
   id: string
-  name: string
+  name: React.ReactNode
   icon?: any
   selectedIcon?: any
   openIcon?: any
@@ -27,6 +28,9 @@ interface TreeDataItem {
   onClick?: () => void
   draggable?: boolean
   droppable?: boolean
+  isRenaming?: boolean
+  onRename?: (newName: string) => void
+  onCancelRename?: () => void
 }
 
 type TreeProps = React.HTMLAttributes<HTMLDivElement> & {
@@ -403,7 +407,52 @@ const TreeLeaf = React.forwardRef<
           isSelected={selectedItemId === item.id}
           default={defaultLeafIcon}
         />
-        <span className="flex-grow text-sm truncate">{item.name}</span>
+        {item.isRenaming ? (
+          <Input
+            style={{
+              zIndex: 50,
+            }}
+            defaultValue={item.name as string}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                e.preventDefault()
+                const value = e.currentTarget.value.trim()
+                if (value && value !== item.name) {
+                  item.onRename?.(value)
+                } else {
+                  item.onCancelRename?.()
+                }
+              } else if (e.key === "Escape") {
+                e.preventDefault()
+                item.onCancelRename?.()
+              }
+            }}
+            spellCheck={false}
+            autoComplete="off"
+            onBlur={(e) => {
+              const value = e.currentTarget.value.trim()
+              if (value && value !== item.name) {
+                item.onRename?.(value)
+              } else {
+                item.onCancelRename?.()
+              }
+            }}
+            autoFocus
+            onClick={(e) => e.stopPropagation()}
+            className="h-6 px-2 py-0 text-sm flex-1 mr-8 bg-white border border-blue-500 rounded-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 shadow-sm"
+            onFocus={(e) => {
+              e.currentTarget.select()
+              // Select filename without extension
+              const filename = e.currentTarget.value
+              const lastDotIndex = filename.lastIndexOf(".")
+              if (lastDotIndex > 0) {
+                e.currentTarget.setSelectionRange(0, lastDotIndex)
+              }
+            }}
+          />
+        ) : (
+          <span className="text-sm truncate">{item.name}</span>
+        )}
         <div className="flex items-center" onClick={(e) => e.stopPropagation()}>
           <TreeActions isSelected={true}>{item.actions}</TreeActions>
         </div>

package/src/hooks/use-create-package-release-mutation.ts

@@ -42,9 +42,9 @@ export const useCreatePackageReleaseMutation = ({
         resolvedPkgName = pkgName
       }
 
-      // Default version to 1.0.0 when it contains no digits
+      // Default version to 0.0.1 when it contains no digits
       if (!resolvedVersion || !/[0-9]/.test(resolvedVersion)) {
-        resolvedVersion = "1.0.0"
+        resolvedVersion = "0.0.1"
       }
 
       const normalizedPackageNameWithVersion =

package/src/hooks/useFileManagement.ts

@@ -17,6 +17,7 @@ import { useCreatePackageReleaseMutation } from "./use-create-package-release-mu
 import { useCreatePackageMutation } from "./use-create-package-mutation"
 import { findTargetFile } from "@/lib/utils/findTargetFile"
 import { encodeFsMapToUrlHash } from "@/lib/encodeFsMapToUrlHash"
+import { isHiddenFile } from "@/components/ViewPackagePage/utils/is-hidden-file"
 
 export interface ICreateFileProps {
   newFileName: string
@@ -36,6 +37,16 @@ export interface IDeleteFileProps {
   onError: (error: Error) => void
 }
 
+export interface IRenameFileProps {
+  oldFilename: string
+  newFilename: string
+  onError: (error: Error) => void
+}
+
+export interface IRenameFileResult {
+  fileRenamed: boolean
+}
+
 export function useFileManagement({
   templateCode,
   currentPackage,
@@ -234,12 +245,69 @@ export function useFileManagement({
     }
     const updatedFiles = localFiles.filter((file) => file.path !== filename)
     setLocalFiles(updatedFiles)
-    onFileSelect(updatedFiles[0]?.path || "")
+    onFileSelect(
+      updatedFiles.filter((file) => !isHiddenFile(file.path))[0]?.path || "",
+    )
     return {
       fileDeleted: true,
     }
   }
 
+  const renameFile = ({
+    oldFilename,
+    newFilename,
+    onError,
+  }: IRenameFileProps): IRenameFileResult => {
+    newFilename = newFilename.trim()
+    if (!newFilename) {
+      onError(new Error("File name cannot be empty"))
+      return {
+        fileRenamed: false,
+      }
+    }
+
+    // Extract just the filename from the path for validation
+    const fileNameOnly = newFilename.split("/").pop() || ""
+    if (!isValidFileName(fileNameOnly)) {
+      onError(new Error("Invalid file name"))
+      return {
+        fileRenamed: false,
+      }
+    }
+
+    const oldFileExists = localFiles?.some((file) => file.path === oldFilename)
+    if (!oldFileExists) {
+      onError(new Error("File does not exist"))
+      return {
+        fileRenamed: false,
+      }
+    }
+
+    const newFileExists = localFiles?.some((file) => file.path === newFilename)
+    if (newFileExists) {
+      onError(new Error("A file with this name already exists"))
+      return {
+        fileRenamed: false,
+      }
+    }
+
+    const updatedFiles = localFiles.map((file) => {
+      if (file.path === oldFilename) {
+        return { ...file, path: newFilename }
+      }
+      return file
+    })
+
+    setLocalFiles(updatedFiles)
+    if (currentFile === oldFilename) {
+      setCurrentFile(newFilename)
+    }
+
+    return {
+      fileRenamed: true,
+    }
+  }
+
   const savePackage = async (isPrivate: boolean) => {
     if (!isLoggedIn) {
       toast({
@@ -354,6 +422,7 @@ export function useFileManagement({
     fsMap,
     createFile,
     deleteFile,
+    renameFile,
     saveFiles,
     localFiles,
     initialFiles,

package/src/lib/constants.ts

@@ -10,3 +10,14 @@
  */
 export const TSCI_PACKAGE_PATTERN =
   /@tsci\/[a-zA-Z][a-zA-Z0-9]*(?:--?[a-zA-Z0-9]+)*(?:\.[a-zA-Z][a-zA-Z0-9_]*(?:--?[a-zA-Z0-9_]+)*)*/g
+
+/**
+ * Regular expression pattern for matching local file imports
+ * Rules:
+ * - Must start with ./ or ../
+ * - Can contain letters, numbers, dots, dashes, underscores, and forward slashes
+ * - Can optionally end with file extensions like .ts, .tsx, .js, .jsx, .json
+ * - Captures the full relative path
+ */
+export const LOCAL_FILE_IMPORT_PATTERN =
+  /(?:\.\.?\/[a-zA-Z0-9._\-\/]*(?:\.(?:ts|tsx|js|jsx|json))?)/g

package/src/lib/download-fns/download-spice-file.ts

@@ -0,0 +1,13 @@
+import { AnyCircuitElement } from "circuit-json"
+import { saveAs } from "file-saver"
+import { circuitJsonToSpice } from "circuit-json-to-spice"
+
+export const downloadSpiceFile = (
+  circuitJson: AnyCircuitElement[],
+  fileName: string,
+) => {
+  const spiceNetlist = circuitJsonToSpice(circuitJson)
+  const spiceString = spiceNetlist.toSpiceString()
+  const blob = new Blob([spiceString], { type: "text/plain" })
+  saveAs(blob, fileName + ".cir")
+}

package/src/lib/utils/resolveRelativePath.ts

@@ -0,0 +1,40 @@
+/**
+ * Resolves a relative file path to an absolute path based on the current file
+ */
+export const resolveRelativePath = (
+  relativePath: string,
+  currentFilePath: string,
+): string => {
+  if (!currentFilePath) return relativePath
+
+  const currentDir = currentFilePath.includes("/")
+    ? currentFilePath.substring(0, currentFilePath.lastIndexOf("/"))
+    : ""
+
+  if (relativePath.startsWith("./")) {
+    return currentDir
+      ? `${currentDir}/${relativePath.slice(2)}`
+      : relativePath.slice(2)
+  }
+
+  if (relativePath.startsWith("../")) {
+    const parts = currentDir.split("/").filter((p) => p !== "")
+    const relativeParts = relativePath.split("/").filter((p) => p !== "")
+
+    let upCount = 0
+    for (const part of relativeParts) {
+      if (part === "..") {
+        upCount++
+      } else {
+        break
+      }
+    }
+
+    const resultParts = parts.slice(0, Math.max(0, parts.length - upCount))
+    const remainingParts = relativeParts.slice(upCount)
+
+    return [...resultParts, ...remainingParts].join("/")
+  }
+
+  return relativePath
+}

package/src/pages/dashboard.tsx

@@ -98,7 +98,7 @@ export const DashboardPage = () => {
         <title>Dashboard - tscircuit</title>
       </Helmet>
       <Header />
-      <div className="container mx-auto px-4 py-8">
+      <div className="container mx-auto px-4 py-8 min-h-[80vh]">
         <h1 className="text-3xl font-bold mb-6">Dashboard</h1>
         <div className="flex md:flex-row flex-col">
           <div className="md:w-3/4 p-0 md:pr-6">

package/src/pages/datasheet.tsx

@@ -5,6 +5,21 @@ import Header from "@/components/Header"
 import Footer from "@/components/Footer"
 import ExpandableText from "@/components/ExpandableText"
 import type { Datasheet } from "fake-snippets-api/lib/db/schema"
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Loader2, AlertCircle, FileText } from "lucide-react"
+
+const SectionCard = ({
+  title,
+  children,
+}: { title: string; children: React.ReactNode }) => (
+  <Card className="mb-6">
+    <CardHeader className="pb-2">
+      <CardTitle className="text-xl font-semibold">{title}</CardTitle>
+    </CardHeader>
+    <CardContent>{children}</CardContent>
+  </Card>
+)
 
 export const DatasheetPage = () => {
   const { chipName } = useParams<{ chipName: string }>()
@@ -19,85 +34,160 @@ export const DatasheetPage = () => {
   return (
     <div className="min-h-screen flex flex-col">
       <Header />
-      <main className="container mx-auto flex-1 px-4 py-8">
-        <h1 className="text-3xl font-bold mb-6">{chipName} Datasheet</h1>
-        <p className="mb-4">
+      <main className="flex-grow  mx-auto px-4 md:px-20 lg:px-28 py-8 w-full">
+        <div className="mb-8">
+          <h1 className="text-3xl md:text-4xl font-bold text-gray-900 mb-2 break-words">
+            {chipName} Datasheet
+          </h1>
+          <p className="text-lg text-gray-600 mb-4">
+            View and download the datasheet for{" "}
+            <span className="font-semibold text-gray-800">{chipName}</span>. If
+            the datasheet is not available, you can request its creation.
+          </p>
           <a
             href={`https://api.tscircuit.com/datasheets/get?chip_name=${encodeURIComponent(chipName)}`}
-            className="text-blue-600 underline"
+            className="inline-flex items-center gap-1 text-blue-600 hover:underline text-sm font-medium"
+            target="_blank"
+            rel="noopener noreferrer"
           >
-            Download JSON
+            <FileText className="w-4 h-4" /> Download JSON
           </a>
-        </p>
+        </div>
+
         {datasheetQuery.isLoading ? (
-          <p>Loading...</p>
+          <div className="flex flex-col items-center justify-center py-16">
+            <Loader2 className="w-10 h-10 animate-spin text-blue-500 mb-4" />
+            <h3 className="text-xl font-semibold mb-2">Loading Datasheet...</h3>
+            <p className="text-gray-500 max-w-md text-center">
+              Please wait while we fetch the datasheet information for{" "}
+              <span className="font-semibold">{chipName}</span>.
+            </p>
+          </div>
         ) : datasheetQuery.data ? (
-          <div>
-            {!datasheetQuery.data.pin_information &&
-              !datasheetQuery.data.datasheet_pdf_urls && (
-                <p>Datasheet is processing. Please check back later.</p>
-              )}
-
-            <h2 className="text-xl font-semibold mb-2">PDFs</h2>
-            {datasheetQuery.data.datasheet_pdf_urls ? (
-              <ul className="list-disc pl-5 mb-6">
-                {datasheetQuery.data.datasheet_pdf_urls.map((url) => (
-                  <li key={url}>
-                    <a href={url} className="text-blue-600 underline">
-                      {url}
-                    </a>
-                  </li>
-                ))}
-              </ul>
-            ) : (
-              <p>No datasheet PDFs available.</p>
+          <>
+            {!(
+              datasheetQuery.data.pin_information ||
+              datasheetQuery.data.datasheet_pdf_urls
+            ) && (
+              <SectionCard title="Processing">
+                <div className="flex items-center gap-3 text-yellow-700">
+                  <Loader2 className="w-5 h-5 animate-spin" />
+                  <span>Datasheet is processing. Please check back later.</span>
+                </div>
+              </SectionCard>
             )}
 
-            <h2 className="text-xl font-semibold mb-2">Pin Information</h2>
-            {datasheetQuery.data.pin_information ? (
-              <table className="table-auto border-collapse mb-6">
-                <thead>
-                  <tr>
-                    <th className="border px-2 py-1">Pin</th>
-                    <th className="border px-2 py-1">Name</th>
-                    <th className="border px-2 py-1">Description</th>
-                    <th className="border px-2 py-1">Capabilities</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {datasheetQuery.data.pin_information.map((pin) => (
-                    <tr key={pin.pin_number}>
-                      <td className="border px-2 py-1">{pin.pin_number}</td>
-                      <td className="border px-2 py-1">{pin.name}</td>
-                      <td className="border px-2 py-1">{pin.description}</td>
-                      <td className="border px-2 py-1">
-                        <ExpandableText
-                          text={pin.capabilities.join(", ")}
-                          maxChars={30}
-                        />
-                      </td>
-                    </tr>
+            <SectionCard title="Description">
+              {datasheetQuery.data.ai_description ? (
+                <div className="flex items-center gap-3 text-gray-500">
+                  <span>{datasheetQuery.data.ai_description}</span>
+                </div>
+              ) : (
+                <p className="text-gray-500">No description available.</p>
+              )}
+            </SectionCard>
+
+            <SectionCard title="PDFs">
+              {datasheetQuery.data.datasheet_pdf_urls &&
+              datasheetQuery.data.datasheet_pdf_urls.length > 0 ? (
+                <ul className="list-disc pl-5 space-y-2">
+                  {datasheetQuery.data.datasheet_pdf_urls.map((url) => (
+                    <li key={url}>
+                      <a
+                        href={url}
+                        className="text-blue-600 underline break-all"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        {url}
+                      </a>
+                    </li>
                   ))}
-                </tbody>
-              </table>
-            ) : (
-              <p>No pin information available.</p>
-            )}
-          </div>
+                </ul>
+              ) : (
+                <p className="text-gray-500">No datasheet PDFs available.</p>
+              )}
+            </SectionCard>
+
+            <SectionCard title="Pin Information">
+              {datasheetQuery.data.pin_information &&
+              datasheetQuery.data.pin_information.length > 0 ? (
+                <div className="overflow-x-auto">
+                  <table className="min-w-full border-collapse text-sm">
+                    <thead>
+                      <tr>
+                        <th className="border-b px-3 py-2 text-left font-semibold">
+                          Pin
+                        </th>
+                        <th className="border-b px-3 py-2 text-left font-semibold">
+                          Name
+                        </th>
+                        <th className="border-b px-3 py-2 text-left font-semibold">
+                          Description
+                        </th>
+                        <th className="border-b px-3 py-2 text-left font-semibold">
+                          Capabilities
+                        </th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {datasheetQuery.data.pin_information.map((pin) => (
+                        <tr key={pin.pin_number} className="hover:bg-gray-50">
+                          <td className="border-b px-3 py-2 font-mono">
+                            {pin.pin_number}
+                          </td>
+                          <td className="border-b px-3 py-2">{pin.name}</td>
+                          <td className="border-b px-3 py-2">
+                            {pin.description}
+                          </td>
+                          <td className="border-b px-3 py-2">
+                            <ExpandableText
+                              text={pin.capabilities.join(", ")}
+                              maxChars={30}
+                            />
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              ) : (
+                <p className="text-gray-500">No pin information available.</p>
+              )}
+            </SectionCard>
+          </>
         ) : datasheetQuery.error &&
           (datasheetQuery.error as any).status === 404 ? (
-          <div>
-            <p>No datasheet found.</p>
-            <button
-              className="mt-2 px-4 py-2 bg-blue-500 text-white rounded"
-              onClick={handleCreate}
-              disabled={createDatasheet.isLoading}
-            >
-              {createDatasheet.isLoading ? "Creating..." : "Create Datasheet"}
-            </button>
-          </div>
+          <SectionCard title="No Datasheet Found">
+            <div className="flex flex-col items-center gap-4">
+              <AlertCircle className="w-8 h-8 text-red-500" />
+              <p className="text-gray-700 text-center">
+                No datasheet found for{" "}
+                <span className="font-semibold">{chipName}</span>.<br />
+                You can request its creation below.
+              </p>
+              <Button
+                className="mt-2"
+                onClick={handleCreate}
+                disabled={createDatasheet.isLoading}
+                size="lg"
+              >
+                {createDatasheet.isLoading ? "Creating..." : "Create Datasheet"}
+              </Button>
+            </div>
+          </SectionCard>
         ) : (
-          <p>Error loading datasheet.</p>
+          <div className="flex flex-col items-center justify-center py-16">
+            <AlertCircle className="w-10 h-10 text-red-500 mb-4" />
+            <h3 className="text-xl font-semibold mb-2">
+              Error loading datasheet
+            </h3>
+            <p className="text-gray-500 max-w-md text-center">
+              There was an error loading the datasheet for{" "}
+              <span className="font-semibold">{chipName}</span>. Please try
+              again later.
+            </p>
+          </div>
         )}
       </main>
       <Footer />

package/src/pages/datasheets.tsx

@@ -43,7 +43,7 @@ export const DatasheetsPage: React.FC = () => {
   return (
     <div className="min-h-screen flex flex-col">
       <Header />
-      <main className="flex-grow container mx-auto px-4 py-8">
+      <main className="flex-grow container mx-auto px-4 py-8 min-h-[80vh]">
         <div className="mb-8 max-w-3xl">
           <div className="flex items-center gap-2 mb-3">
             <h1 className="text-4xl font-bold text-gray-900">Datasheets</h1>
@@ -126,7 +126,7 @@ export const DatasheetsPage: React.FC = () => {
             </p>
             {searchQuery && (
               <button
-                className="mt-2 px-4 py-2 bg-blue-500 text-white rounded"
+                className="mt-2 px-4 py-2 bg-blue-600 text-white rounded"
                 onClick={() =>
                   createDatasheet.mutate({ chip_name: searchQuery })
                 }

package/src/pages/latest.tsx

@@ -58,9 +58,9 @@ const LatestPage: React.FC = () => {
     ?.sort((a, b) => b.created_at.localeCompare(a.created_at))
 
   return (
-    <div className="min-h-screen flex flex-col bg-gray-50">
+    <div className="min-h-screen flex flex-col">
       <Header />
-      <main className="flex-grow container mx-auto px-4 py-8">
+      <main className="flex-grow container mx-auto px-4 py-8 min-h-[80vh]">
         <div className="mb-8 max-w-3xl">
           <div className="flex items-center gap-2 mb-3">
             <h1 className="text-4xl font-bold text-gray-900">

package/src/pages/search.tsx

@@ -91,7 +91,7 @@ export const SearchPage = () => {
   return (
     <div className="min-h-screen flex flex-col">
       <Header />
-      <main className="flex-grow bg-gray-50 pb-12">
+      <main className="flex-grow pb-12 min-h-[80vh]">
         <div className="container mx-auto px-4 py-8">
           <div className="max-w-8xl mx-auto">
             <div className="mb-6">