From d50babaf3626a005cae4387cf0c2b46e56312282 Mon Sep 17 00:00:00 2001
From: Tyler <26290074+thegitduck@users.noreply.github.com>
Date: Tue, 11 Mar 2025 22:03:53 -0700
Subject: [PATCH] layout

---
 src/components/search.tsx | 13 ++++++-------
 src/pages/_layout.tsx     |  4 ++--
 src/pages/index.tsx       |  4 ++--
 3 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/components/search.tsx b/src/components/search.tsx
index a138822..cddb36e 100644
--- a/src/components/search.tsx
+++ b/src/components/search.tsx
@@ -30,6 +30,7 @@ export const Searcher = () => {
     query: string;
   }>({ results: [], query: "" });
   const searchInputRef = useRef<HTMLInputElement>(null);
+  const listboxRef = useRef<HTMLDivElement>(null);
 
   const {
     data: search,
@@ -61,9 +62,7 @@ export const Searcher = () => {
       }
       if (
         document.activeElement !== searchInputRef.current &&
-        ((e.metaKey && e.key === "k") || !e.metaKey) &&
-        !e.ctrlKey &&
-        !e.altKey
+        ((e.metaKey && e.key === "k") || e.key === "/")
       ) {
         e.preventDefault();
         searchInputRef.current?.focus();
@@ -91,7 +90,7 @@ export const Searcher = () => {
   return (
     <>
       {/* Logo, title and search section */}
-      <div className="flex items-start mb-6">
+      <div className="flex items-start mb-6 mt-1">
         <img
           src="/images/koala.png"
           alt="RSS Quest Koala"
@@ -123,7 +122,7 @@ export const Searcher = () => {
       </div>
 
       {/* Search results */}
-      <div className="w-full">
+      <div className="w-full overflow-y-auto max-h-full px-1">
         {isLoading ? (
           <div className="text-center py-4 text-gray-500">
             Loading search index...
@@ -134,11 +133,11 @@ export const Searcher = () => {
           </div>
         ) : results.results.length > 0 ? (
           <ListBox
-            className="space-y-4"
+            className="space-y-4 focus-visible:outline-none"
+            ref={listboxRef}
             selectionMode="single"
             aria-label="Search results"
             selectedKeys={["Enter"]}
-            onAction={(key) => console.log(key)}
           >
             {results.results.map((result) => (
               <ListBoxItem
diff --git a/src/pages/_layout.tsx b/src/pages/_layout.tsx
index 8e4eca9..6ce2923 100644
--- a/src/pages/_layout.tsx
+++ b/src/pages/_layout.tsx
@@ -11,8 +11,8 @@ export default async function RootLayout({ children }: RootLayoutProps) {
   return (
     <>
       <Meta />
-      <body>
-        <main>{children}</main>
+      <body className="h-screen relative flex flex-col">
+        <main className="flex-1 min-h-0">{children}</main>
         <Footer />
       </body>
     </>
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 08c3db2..28bfee1 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -6,8 +6,8 @@ export const client = new QueryClient();
 
 export default function Home() {
   return (
-    <div className="min-h-screen flex flex-col items-center p-4 pt-8">
-      <div className="w-full max-w-4xl">
+    <div className="flex-1 h-full min-h-0 overflow-hidden flex flex-col items-center p-4 pt-8">
+      <div className="w-full max-w-4xl overflow-y-hidden">
         <Providers>
           <Searcher />
         </Providers>
-- 
2.51.2