fix: search page logic

app/search/page.tsx

@@ -2,7 +2,6 @@
 
 import { Suspense } from "react"
 import { useSearchParams } from "next/navigation"
-import { motion } from "motion/react"
 import { Gamepad2Icon } from "lucide-react"
 
 function SearchContent() {
@@ -11,9 +10,9 @@ function SearchContent() {
 
     return (
         <section className="w-full min-h-[calc(100vh-3.6rem)] flex flex-col items-center p-4 md:px-[10svw]">
-            <div className="w-full max-w-4xl mt-8">
+            <div className="w-full max-w-7xl">
-                <h1 className="text-2xl font-bold mb-2">
+                <h1 className="text-2xl font-light mb-2">
-                    {query ? `Search results for "${query}"` : "Search"}
+                    {query ? `results for "${query}"` : "search using game name or appid"}
                 </h1>
                 <p className="text-text/60 text-sm mb-8">
                     {query

components/navbar.tsx

@@ -134,7 +134,21 @@ export default function Navbar() {
                             />
                             <motion.button>
                                 <CircleXIcon
-                                    onClick={() => setSearchQuery("")}
+                                    onClick={() => {
+                                        setSearchQuery("")
+                                        if (!isLanding) {
+                                            const params = new URLSearchParams(
+                                                searchParams.toString(),
+                                            )
+                                            params.delete("q")
+                                            router.replace(
+                                                `/search?${params.toString()}`,
+                                                {
+                                                    scroll: false,
+                                                },
+                                            )
+                                        }
+                                    }}
                                     className={`h-3 w-3 transition-color cursor-default hover:stroke-accent transition-all ${
                                         isFocused || forceFocusStyles
                                             ? "opacity-100"