fix: search-card + home responsive styles

Author: sjdonado

src/views/components/search-bar.tsx

@@ -1,34 +1,32 @@
 export default function SearchBar({ source }: { source?: string }) {
   return (
-    <>
-      <form
-        id="search-form"
-        hx-post="/search"
-        hx-target="#search-results"
-        hx-swap="innerHTML"
-        hx-indicator="#loading-indicator"
-        hx-request='\"timeout\":6000'
-        class="flex w-full max-w-3xl items-center justify-center"
+    <form
+      id="search-form"
+      hx-post="/search"
+      hx-target="#search-results"
+      hx-swap="innerHTML"
+      hx-indicator="#loading-indicator"
+      hx-request='\"timeout\":6000'
+      class="flex w-full max-w-3xl items-center justify-center px-2"
+    >
+      <label for="song-link" class="sr-only">
+        Search
+      </label>
+      <input
+        type="text"
+        id="song-link"
+        name="link"
+        class="flex-1 rounded-lg border bg-white p-2.5 text-sm font-normal text-black placeholder:text-gray-400 lg:text-base"
+        placeholder="https://open.spotify.com/track/7A8MwSsu9efJXP6xvZfRN3?si=d4f1e2eb324c43df"
+        value={source}
+      />
+      <button
+        type="submit"
+        class="ml-2 rounded-lg border border-green-500 bg-green-500 p-2.5 text-sm font-medium text-white focus:outline-none focus:ring-1 focus:ring-white"
       >
-        <label for="song-link" class="sr-only">
-          Search
-        </label>
-        <input
-          type="text"
-          id="song-link"
-          name="link"
-          class="flex-1 rounded-lg border bg-white p-2.5 text-sm font-normal text-black placeholder:text-gray-400 lg:text-base"
-          placeholder="https://open.spotify.com/track/7A8MwSsu9efJXP6xvZfRN3?si=d4f1e2eb324c43df"
-          value={source}
-        />
-        <button
-          type="submit"
-          class="ml-2 rounded-lg border border-green-500 bg-green-500 p-2.5 text-sm font-medium text-white focus:outline-none focus:ring-1 focus:ring-white"
-        >
-          <i class="fas fa-search p-1 text-black" />
-          <span class="sr-only">Search</span>
-        </button>
-      </form>
-    </>
+        <i class="fas fa-search p-1 text-black" />
+        <span class="sr-only">Search</span>
+      </button>
+    </form>
   );
 }

src/views/components/search-card.tsx

@@ -9,9 +9,9 @@ export default function SearchCard(props: { searchResult: SearchResult }) {
       data-id={props.searchResult.id}
       class="m-4 flex max-w-2xl flex-wrap items-start justify-center rounded-lg border border-white md:p-4"
     >
-      <div class="w-full m-4">
+      <div class="w-full m-4 md:w-44">
         <img
-          class="mx-auto w-28 lg:w-48"
+          class="mx-auto w-28 md:w-44"
           src={props.searchResult.image}
           alt={props.searchResult.title}
         />

src/views/css/index.css

@@ -16,10 +16,6 @@ html {
   animation: loading 2s linear infinite;
 }
 
-.min-screen-4 {
-  min-height: calc(100vh - 4rem);
-}
-
 @keyframes loading {
   0% {
     left: -100%;

src/views/pages/home.tsx

@@ -10,17 +10,17 @@ export default function Home({
   children?: JSX.Element;
 }) {
   return (
-    <div class="flex flex-col">
+    <div class="flex flex-col gap-2 h-screen p-2">
       <LoadingIndicator />
-      <main class="flex flex-1 flex-col items-center justify-start p-2 min-screen-4">
-        <div class="my-7 text-center sm:my-16">
+      <main class="flex flex-1 flex-col items-center justify-start">
+        <div class="flex flex-col gap-4 my-8 text-center sm:my-12">
           <h1 class="text-4xl uppercase md:text-5xl lg:text-6xl">I don't have Spotify</h1>
-          <h2 class="mt-6 text-sm lg:text-lg">
+          <h2 class="text-sm lg:text-lg">
             Paste a Spotify link and listen on other platforms.
           </h2>
         </div>
-        <SearchBar source={source} />
-        <div class="my-4">
+        <div class="my-4 flex flex-col gap-4">
+          <SearchBar source={source} />
           <div id="search-results">{children}</div>
         </div>
       </main>