From cab8a8882519fc4f3bff365010cd45036df7c5ee Mon Sep 17 00:00:00 2001
From: B SOURABHGAGAN RAO <116933899+SamaSir2003@users.noreply.github.com>
Date: Thu, 9 Nov 2023 16:40:12 +0530
Subject: [PATCH] Fix search and bid input (#13)

---
 frontend/src/routes/home/+page.svelte         | 36 ++++++++++++-------
 .../src/routes/home/[id=int]/+page.svelte     |  6 +++-
 2 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/frontend/src/routes/home/+page.svelte b/frontend/src/routes/home/+page.svelte
index f74db23..4a091d7 100644
--- a/frontend/src/routes/home/+page.svelte
+++ b/frontend/src/routes/home/+page.svelte
@@ -50,11 +50,13 @@
 	<div class="container">
 		{#each products as product}
 			<button on:click={async () => await navigate(product)} class="product">
-				<img src={product.image.url} alt={product.image.alt} />
-				<div class="description">
-					<span class="category">Clothes</span>
-					<h5 class="title">{product.name}</h5>
-					<h4 class="price">${product.bidPrice}</h4>
+				<div class="con">
+					<img src={product.image.url} alt={product.image.alt} />
+					<div class="description">
+						<span class="category">Clothes</span>
+						<h5 class="title">{product.name}</h5>
+						<h4 class="price">${product.bidPrice}</h4>
+					</div>
 				</div>
 			</button>
 		{/each}
@@ -115,14 +117,18 @@ section
     .container
         display: grid
         gap: 1rem
-        grid-template-columns: repeat(3, 1fr)
+        grid-template-columns: repeat(4, 1fr)
+        
 
+         
+                   
         .product
-            width: 23%
-            min-width: 20rem
+            
+            height: 27rem
+            width: 20rem
             padding: 10px 12px
             border-radius: 25px
-            place-self: center
+            
             cursor: pointer
             transition: 0.2s
             border: none
@@ -130,10 +136,13 @@ section
 
             &:hover
                 box-shadow: 2px 2px 10px vars.$accent
-
+            
             img
-                width: 100%
+                width: 18.5rem
+                height:auto
                 border-radius: 20px
+                
+
 
             .description
                 text-align: start
@@ -142,11 +151,12 @@ section
                 .category
                     color: vars.$text
                     font-size: 12px
-
+                    
                 .title
-                    padding-top: 7px
+                
                     color: vars.$inverted
                     font-size: 14px
+                
 
                 .price
                     padding-top: 7px
diff --git a/frontend/src/routes/home/[id=int]/+page.svelte b/frontend/src/routes/home/[id=int]/+page.svelte
index 94810e7..911ffb8 100644
--- a/frontend/src/routes/home/[id=int]/+page.svelte
+++ b/frontend/src/routes/home/[id=int]/+page.svelte
@@ -77,7 +77,7 @@
 
 <section>
 	<h1>{product.name}</h1>
-	<img src={product.image.url} id="img" alt={product.image.alt} />
+	<img src={product.image.url} id="img" alt={product.image.alt} class="image" />
 	<div class="details">
 		<h2 class="price">${product.bidPrice}</h2>
 		{#if product.available}
@@ -137,6 +137,10 @@ section
         font-size: 2rem
         color: vars.$text
 
+    img
+        width:auto
+        height: 25rem		
+
     .details
         .price
             color: vars.$accent