From 0af66bd43193b92e39bfa61c9d022362eb0823ed Mon Sep 17 00:00:00 2001
From: franco sanchez <franco_genta@hotmail.com>
Date: Tue, 13 Aug 2024 10:40:03 -0300
Subject: [PATCH] style: changes in skeletons and other details

---
 src/components/MostViewed.tsx               |  9 +++++++++
 src/components/MySliderCategories.tsx       |  2 +-
 src/components/cards/Card.tsx               | 11 ++++++++++-
 src/components/skeletons/SkeletonABooks.tsx |  2 +-
 src/components/skeletons/SkeletonTags.tsx   |  8 +++++++-
 5 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/components/MostViewed.tsx b/src/components/MostViewed.tsx
index 31cc989..945797a 100644
--- a/src/components/MostViewed.tsx
+++ b/src/components/MostViewed.tsx
@@ -27,6 +27,15 @@ export function MostViewed() {
                 my='1'
                 fontSize='sm'
                 _hover={{ color: 'green.500', outline: 'none' }}
+                sx={{
+                  display: '-webkit-box',
+                  '-webkit-box-orient': 'vertical',
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  '-webkit-line-clamp': '2',
+                  lineHeight: 1.5,
+                  maxHeight: 'calc(1.5em * 2)',
+                }}
               >
                 {title}
               </Link>
diff --git a/src/components/MySliderCategories.tsx b/src/components/MySliderCategories.tsx
index 66b7dbd..01a187b 100644
--- a/src/components/MySliderCategories.tsx
+++ b/src/components/MySliderCategories.tsx
@@ -71,7 +71,7 @@ export function MySliderCategories() {
         <Box
           id='slider'
           display='flex'
-          w='5xl'
+          w={{ base: '68rem', '2xl': '84rem' }}
           overflowX={{ base: 'auto', md: 'hidden' }}
           scrollBehavior='smooth'
           flexDirection='row'
diff --git a/src/components/cards/Card.tsx b/src/components/cards/Card.tsx
index e1c5018..2329b37 100644
--- a/src/components/cards/Card.tsx
+++ b/src/components/cards/Card.tsx
@@ -112,12 +112,21 @@ export function Card({
             >
               <Box
                 w='full'
-                maxW='240px'
+                maxW={{ base: '130px', lg: '210px' }}
                 fontSize={{ base: 'xs', sm: 'md' }}
                 fontWeight='400'
                 mx='1'
                 mb='2'
                 textTransform='uppercase'
+                sx={{
+                  display: '-webkit-box',
+                  '-webkit-box-orient': 'vertical',
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  '-webkit-line-clamp': '2',
+                  lineHeight: 1.5,
+                  maxHeight: 'calc(1.5em * 2)',
+                }}
               >
                 {title}
               </Box>
diff --git a/src/components/skeletons/SkeletonABooks.tsx b/src/components/skeletons/SkeletonABooks.tsx
index 6df209d..bb4019a 100644
--- a/src/components/skeletons/SkeletonABooks.tsx
+++ b/src/components/skeletons/SkeletonABooks.tsx
@@ -31,7 +31,7 @@ export function SkeletonAllBooks({ showTags = true }: SkeletonType) {
       )}
       <Flex
         direction={{ base: 'column', md: 'row' }}
-        maxW='1800px'
+        maxW={{ base: '1260px', '2xl': '1560px' }}
         m='0 auto'
         px={{ base: 5, md: 10, '2xl': 16 }}
       >
diff --git a/src/components/skeletons/SkeletonTags.tsx b/src/components/skeletons/SkeletonTags.tsx
index f8baf0e..acdcc29 100644
--- a/src/components/skeletons/SkeletonTags.tsx
+++ b/src/components/skeletons/SkeletonTags.tsx
@@ -9,7 +9,13 @@ export function SkeletonTags() {
   return (
     <>
       <Flex justify='center' overflow='hidden'>
-        <HStack w='5xl' spacing='4' mt='5' mb='5' mx='10'>
+        <HStack
+          w={{ base: '68rem', '2xl': '84rem' }}
+          spacing='4'
+          mt='5'
+          mb='5'
+          mx='10'
+        >
           {TagCategories}
         </HStack>
       </Flex>