From b3bcb42974462217bac32c1259a739cd06cda8a5 Mon Sep 17 00:00:00 2001
From: Keith Solomon <keith@vincentdesign.ca>
Date: Sun, 27 Jul 2025 11:38:49 -0500
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8feature:=20Make=20pages=20responsive?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FilteredPromptList.astro | 5 +++--
 src/components/SearchBar.astro          | 8 ++++----
 src/components/SidebarAdd.astro         | 4 ++--
 src/components/SidebarEdit.astro        | 2 +-
 src/pages/add.astro                     | 4 ++--
 src/pages/edit.astro                    | 4 ++--
 src/pages/index.astro                   | 8 ++++----
 7 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/src/components/FilteredPromptList.astro b/src/components/FilteredPromptList.astro
index 7ba2b6f..3b607c9 100644
--- a/src/components/FilteredPromptList.astro
+++ b/src/components/FilteredPromptList.astro
@@ -15,11 +15,12 @@ type Prompt = {
 };
 ---
 
-<div class="border-b mb-4">
+<div class="border-b mb-4 flex justify-between items-center">
   <h2 id="prompt-count" class="text-xl font-semibold text-gray-300 mb-2"></h2>
+  <a href="#filters" class="block lg:hidden bg-blue-600 text-white px-2 py-0 pb-1 mb-2 rounded cursor-pointer hover:bg-blue-700 transition-colors duration-300">Filters &downarrow;</a>
 </div>
 
-<div id="prompt-grid" class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+<div id="prompt-grid" class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
   {prompts.map((p: Prompt) => (
     <div class="prompt-card" data-type={p.type} data-tags={(p.tags ?? []).join(',')}>
       <PromptCard {...p} />
diff --git a/src/components/SearchBar.astro b/src/components/SearchBar.astro
index 7e861d8..2be7d1e 100644
--- a/src/components/SearchBar.astro
+++ b/src/components/SearchBar.astro
@@ -4,7 +4,7 @@
 // TODO: Add options for AND/OR switching and sort by options
 ---
 
-<div class="w-64 h-full p-4 text-gray-100">
+<aside id="filters" class="w-full lg:w-64 h-full p-4 text-gray-100 order-1 lg:order-none">
   <a href="/add" id="add-prompt" class="block w-fit bg-green-600 text-white px-4 py-2 mb-4 rounded hover:bg-green-700 transition-colors duration-300">
     Add Prompt
   </a>
@@ -34,7 +34,7 @@
       <div>
         <fieldset class="flex flex-col">
           <legend class="block text-lg font-semibold mb-1">Tags</legend>
-          <div class="flex flex-wrap gap-2 max-w-[30rem]">
+          <div class="flex flex-wrap gap-2 lg:max-w-[30rem]">
             {Astro.props.allTags.map((tag: string) => (
               <label class="relative inline-flex items-center cursor-pointer">
                 <input
@@ -53,8 +53,8 @@
       </div>
     </div>
 
-    <button id="clear-filters"type="button" class="bg-blue-600 text-white px-4 py-2 rounded cursor-pointer hover:bg-blue-700 transition-colors duration-300">
+    <button id="clear-filters" type="button" class="bg-blue-600 text-white px-4 py-2 rounded cursor-pointer hover:bg-blue-700 transition-colors duration-300">
       Reset Filters
     </button>
   </form>
-</div>
+</aside>
diff --git a/src/components/SidebarAdd.astro b/src/components/SidebarAdd.astro
index 84e582a..2b378ab 100644
--- a/src/components/SidebarAdd.astro
+++ b/src/components/SidebarAdd.astro
@@ -15,7 +15,7 @@ const code = `[
 `;
 ---
 
-<aside class="w-64 h-full p-4 text-gray-100">
+<aside class="w-full lg:w-64 h-full p-4 text-gray-100 order-1 lg:order-none">
   <h2 class="text-lg font-semibold mb-4">Add a prompt</h2>
 
   <p class="text-sm">Use the form to add a new AI prompt to the catalog.</p>
@@ -30,7 +30,7 @@ const code = `[
 
   <h2 class="text-lg font-semibold mt-6 mb-4">Export</h2>
 
-  <p class="text-sm">To export prompts to a JSON file, select the prompts using the checkboxes, and click the button below.</p>
+  <p class="text-sm">To export prompts to a JSON file, select the prompts using the checkboxes, and click the button below the checkboxes.</p>
 
   <p class="text-sm mt-2">To export all prompts, leave all checkboxes unchecked.</p>
 
diff --git a/src/components/SidebarEdit.astro b/src/components/SidebarEdit.astro
index 9de0f1a..a1a5c96 100644
--- a/src/components/SidebarEdit.astro
+++ b/src/components/SidebarEdit.astro
@@ -2,7 +2,7 @@
 // Sidebar.astro
 ---
 
-<aside class="w-64 h-full p-4 text-gray-100">
+<aside class="w-full lg:w-64 h-full p-4 text-gray-100 order-1 lg:order-none">
   <h2 class="text-lg font-semibold mb-4">Edit a prompt</h2>
 
   <p class="text-sm">Use the form to edit an AI prompt in the catalog.</p>
diff --git a/src/pages/add.astro b/src/pages/add.astro
index 85919a9..9edebd2 100644
--- a/src/pages/add.astro
+++ b/src/pages/add.astro
@@ -19,10 +19,10 @@ const supabaseKey = import.meta.env.PUBLIC_SUPABASE_ANON_KEY;
     <p class="text-sm mt-1">Add or import new AI prompts to the catalog</p>
   </header>
 
-  <main class="flex">
+  <main class="flex flex-col lg:flex-row">
     <Sidebar />
 
-    <div class="border-l flex-1 flex flex-col overflow-hidden">
+    <div class="border-b lg:border-l flex-1 flex flex-col overflow-hidden">
       <div class="flex-1 overflow-y-auto p-4">
         <div id="success" class="bg-green-100 text-green-700 p-4 rounded mb-4 hidden">
           Prompt added successfully!
diff --git a/src/pages/edit.astro b/src/pages/edit.astro
index af23999..2c45d48 100644
--- a/src/pages/edit.astro
+++ b/src/pages/edit.astro
@@ -19,10 +19,10 @@ const supabaseKey = import.meta.env.PUBLIC_SUPABASE_ANON_KEY;
     <p class="text-sm mt-1">Edit an existing AI prompt in the catalog</p>
   </header>
 
-  <main class="flex">
+  <main class="flex flex-col lg:flex-row">
     <Sidebar />
 
-    <div class="border-l flex-1 flex flex-col overflow-hidden">
+    <div class="border-b lg:border-l flex-1 flex flex-col overflow-hidden">
       <main class="flex-1 overflow-y-auto p-4">
         <div id="edit-root">Loading...</div>
       </main>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 4f7813c..a5604eb 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -13,7 +13,7 @@ const allTags = Array.from(
   new Set(
     prompts?.flatMap((p) => p.tags ?? [])
   )
-).sort();
+).sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
 ---
 
 <MainLayout page="Home">
@@ -22,11 +22,11 @@ const allTags = Array.from(
     <p class="text-sm mt-1">Save and explore AI prompts</p>
   </header>
 
-  <main class="flex">
+  <main class="flex flex-col lg:flex-row">
     <SearchBar allTags={allTags} />
 
-    <div class="border-l flex-1 flex flex-col overflow-hidden">
-      <div class="flex-1 overflow-y-auto px-6 pt-2 pb-4">
+    <div class="border-b lg:border-l flex-1 flex flex-col overflow-hidden">
+      <div class="flex-1 overflow-y-auto px-4 lg:px-6 pt-2 pb-4">
         {error
         ? <p class="text-red-500">Supabase error: {error.message}</p>
         : <FilteredPromptList prompts={prompts} />}