From c3b5666f79f0e6ba195bc07d3e6209b37d643aff Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 1 Mar 2023 10:03:23 +0800
Subject: [PATCH] Use 4 columns on larger screens, increase menu width

---
 .../components/patterns/LibraryCards/LibraryGridCard.tsx | 4 +++-
 .../components/patterns/LibraryCards/LinkedItemCard.tsx  | 3 ++-
 .../components/templates/homeFeed/HomeFeedContainer.tsx  | 4 ++++
 .../components/templates/homeFeed/LibraryFilterMenu.tsx  | 9 +++++----
 4 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
index 29795503c..a59b9aea6 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
@@ -112,6 +112,8 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
     props.item.siteName ||
     siteName(props.item.originalArticleUrl, props.item.url)
 
+  console.log('word count:', props.item.wordsCount)
+
   return (
     <VStack
       css={{
@@ -164,7 +166,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
             {props.item.wordsCount ?? 0 > 0
               ? `${Math.max(
                   1,
-                  Math.round(props.item.wordsCount ?? 0 / 235)
+                  Math.round((props.item.wordsCount ?? 0) / 235)
                 )} min read`
               : null}
           </Box>
diff --git a/packages/web/components/patterns/LibraryCards/LinkedItemCard.tsx b/packages/web/components/patterns/LibraryCards/LinkedItemCard.tsx
index eb22f82a8..b8efa4488 100644
--- a/packages/web/components/patterns/LibraryCards/LinkedItemCard.tsx
+++ b/packages/web/components/patterns/LibraryCards/LinkedItemCard.tsx
@@ -42,6 +42,7 @@ export function LinkedItemCard(props: LinkedItemCardProps): JSX.Element {
   if (props.layout == 'LIST_LAYOUT') {
     return <ListLinkedItemCard {...props} originText={originText} />
   } else {
-    return <GridLinkedItemCard {...props} originText={originText} />
+    return <LibraryGridCard {...props} originText={originText} />
+    //    return <GridLinkedItemCard {...props} originText={originText} />
   }
 }
diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
index da18f6f0c..1c541b41c 100644
--- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
+++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
@@ -903,6 +903,10 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
                         gridTemplateColumns:
                           layout == 'LIST_LAYOUT' ? 'none' : 'repeat(3, 1fr)',
                       },
+                      '@xl': {
+                        gridTemplateColumns:
+                          layout == 'LIST_LAYOUT' ? 'none' : 'repeat(4, 1fr)',
+                      },
                     }}
                   >
                     {props.items.map((linkedItem) => (
diff --git a/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx b/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
index ae6be87c4..2c3a31f7b 100644
--- a/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
+++ b/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
@@ -8,6 +8,8 @@ import { useGetSubscriptionsQuery } from '../../../lib/networking/queries/useGet
 import { useGetLabelsQuery } from '../../../lib/networking/queries/useGetLabelsQuery'
 import { Label } from '../../../lib/networking/fragments/labelFragment'
 
+const MENU_WIDTH = '300px'
+
 type LibraryFilterMenuProps = {
   setShowAddLinkModal: (show: boolean) => void
 
@@ -24,8 +26,8 @@ export function LibraryFilterMenu(props: LibraryFilterMenuProps): JSX.Element {
           top: '105px',
           position: 'fixed',
           bg: 'white',
-          width: '233px',
           height: '100%',
+          width: MENU_WIDTH,
           borderRight: '1px solid #E1E1E1',
           pr: '15px',
           overflow: 'auto',
@@ -43,8 +45,7 @@ export function LibraryFilterMenu(props: LibraryFilterMenuProps): JSX.Element {
       the fixed left side menu. */}
       <Box
         css={{
-          width: '233px',
-          minWidth: '233px',
+          minWidth: MENU_WIDTH,
           height: '100%',
           bg: '$grayBase',
         }}
@@ -310,7 +311,7 @@ function AddLinkButton(props: AddLinkButtonProps): JSX.Element {
       <VStack
         css={{
           marginTop: 'auto',
-          width: '233px',
+          width: MENU_WIDTH,
           height: '80px',
           pl: '25px',
         }}