chore: minor improvements

nicholasgriffintn · Aug 25, 2024 · 22a4da2 · 22a4da2
1 parent b51eb0f
commit 22a4da2
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 31 deletions.
diff --git a/apps/web/app/components/homepage/form.tsx b/apps/web/app/components/homepage/form.tsx
@@ -1,4 +1,4 @@
-import { Search } from 'lucide-react';
+import { Search, X } from 'lucide-react';
 import { Form } from '@remix-run/react';
 
 import { Input } from '../ui/input';
@@ -20,13 +20,25 @@ export const SearchForm = ({
     }}
     className="flex gap-2"
   >
-    <Input
-      type="text"
-      placeholder="Search for a topic or article..."
-      value={query}
-      onChange={(e) => setQuery(e.target.value)}
-      className="flex-grow"
-    />
+    <div className="relative flex-grow">
+      <Input
+        type="text"
+        placeholder="Search for a topic or article..."
+        value={query}
+        onChange={(e) => setQuery(e.target.value)}
+        className="flex-grow pr-10"
+      />
+      {query && (
+        <button
+          type="button"
+          onClick={() => setQuery('')}
+          className="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700"
+        >
+          <X className="h-4 w-4" />
+          <span className="sr-only">Clear search query</span>
+        </button>
+      )}
+    </div>
     <Button type="submit" className="shrink-0">
       <Search className="h-4 w-4 mr-2" />
       Search

diff --git a/apps/web/app/root.tsx b/apps/web/app/root.tsx
@@ -13,7 +13,10 @@ export function Layout({ children }: { children: React.ReactNode }) {
     <html lang="en">
       <head>
         <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1.0, maximum-scale=5.0"
+        />
         <Meta />
         <Links />
       </head>

diff --git a/apps/web/app/routes/_index.tsx b/apps/web/app/routes/_index.tsx
@@ -85,40 +85,40 @@ export default function Index() {
             <ul className="list-disc ml-4">
               <li className="text-sm text-left">
                 Extend inserting to use Playwright to get more content
+                <ul className="list-disc ml-4">
+                  <li className="text-sm text-left">
+                    This will need to act differently between the sites and
+                    correctly identify article text. BBC Sounds will need to be
+                    handled differently as well.
+                  </li>
+                </ul>
               </li>
-              <ul className="list-disc ml-4">
-                <li className="text-sm text-left">
-                  This will need to act differently between the sites and
-                  correctly identify article text. BBC Sounds will need to be
-                  handled differently as well.
-                </li>
-              </ul>
               <li className="text-sm text-left">
                 Display images on the results.
               </li>
               <li className="text-sm text-left">
                 Add a summarise modal and method that uses AI to summarise the
                 article.
+                <ul className="list-disc ml-4">
+                  <li className="text-sm text-left">
+                    If Hacker News, this will need to act differently, as it
+                    will need to summarise the comments.
+                  </li>
+                  <li className="text-sm text-left">
+                    For BBC Sounds, it also audio content.
+                  </li>
+                </ul>
               </li>
-              <ul className="list-disc ml-4">
-                <li className="text-sm text-left">
-                  If Hacker News, this will need to act differently, as it will
-                  need to summarise the comments.
-                </li>
-                <li className="text-sm text-left">
-                  For BBC Sounds, it also audio content.
-                </li>
-              </ul>
               <li className="text-sm text-left">
                 Add a analyse modal and method that uses AI to analyse the
                 article.
+                <ul className="list-disc ml-4">
+                  <li className="text-sm text-left">
+                    Like summarise, this will need to act differently between
+                    the sites.
+                  </li>
+                </ul>
               </li>
-              <ul className="list-disc ml-4">
-                <li className="text-sm text-left">
-                  Like summarise, this will need to act differently between the
-                  sites.
-                </li>
-              </ul>
               <li className="text-sm text-left">
                 Add the ability for users to submit sites to be indexed.
               </li>