Borders on list view

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

@@ -57,29 +57,18 @@ export function LibraryListCard(props: LinkedItemCardProps): JSX.Element {
     <VStack
       css={{
         p: '20px',
-        // padding: '15px',
         width: '100%',
         height: '100%',
-        // minHeight: '270px',
-        // background: 'white',
-        // borderWidth: '1px',
-        // borderStyle: 'solid',
-        // borderColor: '#E1E1E1',
         cursor: 'pointer',
         gap: '10px',
-
-        // p: '20px',
-        // height: '100%',
-        // width: '100%',
-        // maxWidth: '100%',
-        // borderRadius: 0,
-        // wordBreak: 'break-word',
         border: '1px solid $grayBorder',
         borderBottom: 'none',
-        // alignItems: 'center',
-        // display: 'grid',
-        // gridTemplateColumns: '1fr 24px',
-        // gridTemplateRows: '1fr',
+
+        '@xlgDown': {
+          borderRadius: 'unset',
+          borderLeft: 'unset',
+          borderRight: 'unset',
+        },
       }}
       alignment="start"
       distribution="start"

packages/web/components/templates/homeFeed/HomeFeedContainer.tsx

@@ -865,6 +865,10 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
                       paddingTop: layout == 'LIST_LAYOUT' ? '0' : '21px',
                       paddingBottom: layout == 'LIST_LAYOUT' ? '0px' : '21px',
                       overflow: 'hidden',
+                      '@xlgDown': {
+                        border: 'unset',
+                        borderRadius: layout == 'LIST_LAYOUT' ? 0 : undefined,
+                      },
                       '@smDown': {
                         border: 'unset',
                         width: layout == 'LIST_LAYOUT' ? '100vw' : undefined,

packages/web/components/tokens/stitches.config.ts

@@ -195,6 +195,7 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
       smDown: '(max-width: 575px)',
       mdDown: '(max-width: 768px)',
       lgDown: '(max-width: 992px)',
+      xlgDown: '(max-width: 1200px)',
       sm: '(min-width: 576px)',
       md: '(min-width: 768px)',
       lg: '(min-width: 992px)',