From 0415a89edc8ed5f178cd3f931a4ece856c11073a Mon Sep 17 00:00:00 2001
From: amalv <1252707+amalv@users.noreply.github.com>
Date: Thu, 21 Dec 2023 13:47:18 +0100
Subject: [PATCH] feat: update grid item sizes in BookList and BookCard
 components in order to improve responsive view

---
 src/components/BookList/BookList.tsx                            | 2 +-
 .../BookList/components/Books/components/BookCard/BookCard.tsx  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/BookList/BookList.tsx b/src/components/BookList/BookList.tsx
index 3f5ad68..3dfed24 100644
--- a/src/components/BookList/BookList.tsx
+++ b/src/components/BookList/BookList.tsx
@@ -30,7 +30,7 @@ const SearchInput = ({ search, setSearch }: SearchInputProps) => {
       }}
     >
       <Grid container justifyContent="center">
-        <Grid item xs={8}>
+        <Grid item xs={10} md={8}>
           <StyledTextField
             label="Search by title"
             variant="outlined"
diff --git a/src/components/BookList/components/Books/components/BookCard/BookCard.tsx b/src/components/BookList/components/Books/components/BookCard/BookCard.tsx
index f4054d5..53d3a72 100644
--- a/src/components/BookList/components/Books/components/BookCard/BookCard.tsx
+++ b/src/components/BookList/components/Books/components/BookCard/BookCard.tsx
@@ -20,7 +20,7 @@ interface BookCardProps {
 }
 
 export const BookCard: React.FC<BookCardProps> = ({ book }) => (
-  <Grid item xs={12} sm={6} md={2} key={book.title}>
+  <Grid item xs={6} sm={4} md={4} lg={4} xl={2} key={book.title}>
     <CardWrapper>
       <CardActionAreaWrapper>
         <Cover