Fix bottom marge in search results

BishopFox · Dec 16, 2023 · 5d8d3a5 · 5d8d3a5
1 parent a0a59ee
commit 5d8d3a5
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 14 deletions.
diff --git a/docs/sliver-docs/components/navbar.tsx b/docs/sliver-docs/components/navbar.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { SliversIcon } from "@/components/icons/slivers";
 import { useSearchContext } from "@/util/search-context";
 import { Themes } from "@/util/themes";
@@ -17,6 +19,7 @@ import {
   NavbarBrand,
   NavbarContent,
   NavbarItem,
+  Tooltip,
 } from "@nextui-org/react";
 import { useTheme } from "next-themes";
 import { useRouter } from "next/router";
@@ -99,20 +102,22 @@ export default function TopNavbar(props: TopNavbarProps) {
       </NavbarContent>
 
       <NavbarContent as="div" justify="end">
-        <Input
-          size="sm"
-          placeholder="Search..."
-          value={query}
-          onChange={(e) => setQuery(e.target.value)}
-          onClear={() => setQuery("")}
-          startContent={<FontAwesomeIcon icon={faSearch} />}
-          onKeyDown={(e) => {
-            if (e.key === "Enter") {
-              router.push(`/search/`, { query: { search: query } });
-              setQuery("");
-            }
-          }}
-        />
+        <Tooltip content="Press enter to search" isOpen={query.length > 0}>
+          <Input
+            size="sm"
+            placeholder="Search..."
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            onClear={() => setQuery("")}
+            startContent={<FontAwesomeIcon icon={faSearch} />}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                router.push(`/search/`, { query: { search: query } });
+                setQuery("");
+              }
+            }}
+          />
+        </Tooltip>
 
         <Button
           variant="ghost"

diff --git a/docs/sliver-docs/pages/search/index.tsx b/docs/sliver-docs/pages/search/index.tsx
@@ -62,6 +62,8 @@ const SearchPage: NextPage = (props: SearchPageProps) => {
         ))}
       </div>
       <div className="col-span-1"></div>
+
+      <div className="col-span-12 mb-8"></div>
     </div>
   );
 };