feat: update grid item sizes in BookList and BookCard components in o…

…rder to improve responsive view
amalv · Dec 21, 2023 · 0415a89 · 0415a89
1 parent 98949ba
commit 0415a89
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 2 deletions.
diff --git 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
@@ -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