Update mobile UI

WiseBlend · Jan 29, 2024 · f7eb9d2 · f7eb9d2
1 parent cfb7c21
commit f7eb9d2
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 6 deletions.
diff --git a/src/app/components/search/form.tsx b/src/app/components/search/form.tsx
@@ -57,7 +57,6 @@ export default function SearchForm() {
         required
         className="grow px-4 rounded-l-2xl"
         placeholder="Enter product URL"
-        defaultValue="http://a.b.c"
       />
       <button type="submit" className="rounded-r-2xl"></button>
     </form>

diff --git a/src/app/components/search/results.tsx b/src/app/components/search/results.tsx
@@ -13,13 +13,13 @@ export default function SearchResults() {
   const [product, setProduct] = useState<Product>(products[0]);
 
   return (
-    <div className="products mt-12">
-      <div className="flex gap-x-8">
+    <div className="products mt-6 lg:mt-12 px-4 lg:px-0">
+      <div className="flex flex-col lg:flex-row lg:gap-x-8">
         <div
-          className="bg-white border border-gray-300 rounded-lg bg-contain bg-no-repeat bg-center grow basis-full"
+          className="min-h-64 bg-white border border-gray-300 rounded-lg bg-contain bg-no-repeat bg-center grow basis-full"
           style={{ backgroundImage: `url(${product.image})` }}
         ></div>
-        <div className="grow basis-full">
+        <div className="grow basis-full mt-4 lg:mt-0">
           <h2 className={`text-6xl font-semibold ${heading.className}`}>
             {product.brand}
           </h2>
@@ -71,7 +71,7 @@ const SocialMedia = ({ product }: { product: Product }) => {
           return (
             <iframe
               key={videoId}
-              className="m-6 w-3/5 min-h-96 rounded-xl"
+              className="m-6 w-full lg:w-3/5 min-h-96 rounded-xl"
               allowFullScreen
               src={src}
             ></iframe>