Fixed all the layouts and cleaned up CSS for grid

packages/web/components/elements/ProgressBarVertical.tsx

@@ -17,6 +17,7 @@ export function ProgressBarVertical(props: ProgressBarVProps): JSX.Element {
         borderRadius: '$1',
         overflow: 'hidden',
         backgroundColor: props.backgroundColor,
+        mr: '12px',
       }}
     >
       <Box

packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx

@@ -15,24 +15,13 @@ const ellipsisText = {
   display: '-webkit-box',
   WebkitLineClamp: 1,
   WebkitBoxOrient: 'vertical',
-  pl: '10px',
   margin: 'auto 0',
+  pr:'10px',
 }
 
-const cardTitleGridStyle = {
-  mt: '0',
-  mb: '0',
-  fontSize: '18px',
-  textAlign: 'left',
-  lineHeight: '1.25',
-  // whiteSpace: 'nowrap',
-  // textOverflow: 'ellipsis',
-  width: '100%',
-  // overflow: 'hidden',
-}
-
-const cardTitleListStyle = {
+const cardTitleStyle = {
   ...ellipsisText,
+  width:'100%',
   fontSize: '14px',
   fontWeight: '600',
   textAlign: 'left',
@@ -46,18 +35,9 @@ type CardTitleProps = {
 // Functions
 function CardTitle(
   props: CardTitleProps,
-  cardProps: LinkedItemCardProps
 ): JSX.Element {
   return (
-    <StyledText
-      style="listTitle"
-      data-testid="listTitle"
-      css={
-        cardProps.layout === 'GRID_LAYOUT'
-          ? cardTitleGridStyle
-          : cardTitleListStyle
-      }
-    >
+    <StyledText style="listTitle" data-testid="listTitle" css={cardTitleStyle}>
       {props.title}
     </StyledText>
   )
@@ -72,14 +52,10 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
           css={{
             p: '12px',
             height: '100%',
-            // width: '100%',
-            // maxWidth: '100%',
             borderRadius: '8px',
             cursor: 'pointer',
-            // wordBreak: 'break-word',
-            // overflow: 'clip',
             border: '1px solid $libraryActiveMenuItem',
-            // position: 'relative',
+            mb: '15px',
           }}
           alignment="start"
           distribution="start"
@@ -87,43 +63,26 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
             props.handleAction('showDetail')
           }}
         >
-          {/* {props.item.image && props.layout !== 'LIST_LAYOUT' && (
-          <CoverImage
-            src={props.item.image}
-            alt="Link Preview Image"
-            width="100%"
-            height={160}
-            css={{ borderRadius: '8px' }}
-            onError={(e) => {
-              ;(e.target as HTMLElement).style.display = 'none'
-            }}
-          />
-        )} */}
           <VStack
             distribution="start"
             alignment="start"
             css={{
-              px: '0px',
-              width: '100%',
-              pl: '$1',
+              width: '100%'
             }}
           >
             <HStack
               alignment="start"
               distribution="between"
               css={{
-                width: '100%',
-                //p: '0px',
-                //mr: '-12px',
-                mt: '15px',
                 display: 'grid',
                 gridTemplateColumns: '1fr 24px',
                 gridTemplateRows: '1fr',
+                width:'100%',
               }}
             >
               <CardTitle title={props.item.title} />
               <Box
-                css={{ alignSelf: 'end', alignItems: 'start', height: '100%' }}
+                css={{ alignSelf: 'end', alignItems: 'end', height: '100%' }}
                 onClick={(e) => {
                   // This is here to prevent menu click events from bubbling
                   // up and causing us to "click" on the link item.
@@ -147,7 +106,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
             <HStack alignment="start" distribution="between">
               <StyledText
                 style="caption"
-                css={{ fontWeight: '600', margin: '5px 8px 5px 0' }}
+                css={{ fontWeight: '600'}}
               >
                 {props.item.author && (
                   <SpanBox>{removeHTMLTags(props.item.author)}</SpanBox>
@@ -176,28 +135,15 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
             distribution="between"
             css={{
               width: '100%',
-              pt: '$2',
-              px: '$1',
-              pr: '12px',
-              mt: '7px',
-              flexGrow: '1',
+               pr: '12px',
+               flexGrow: '1',
             }}
           >
             <StyledText
               css={{
-                // m: 0,
-                // py: '0px',
-                // mr: '$2',
                 fontStyle: 'normal',
                 fontWeight: '400',
                 fontSize: '14px',
-                // lineHeight: '125%',
-                // color: '$grayTextContrast',
-                // flexGrow: '4',
-                // overflow: 'hidden',
-                // display: '-webkit-box',
-                // WebkitLineClamp: 5,
-                // WebkitBoxOrient: 'vertical',
               }}
               data-testid="listDesc"
             >
@@ -220,7 +166,9 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
             }
           />
         </VStack>
+
       ) : (
+        //  ELSE display List Layout
         <VStack
           distribution="start"
           alignment="start"