From 85a192bc5803612d2e4c99e45da4000749443f94 Mon Sep 17 00:00:00 2001
From: Satindar Dhillon <satindar@gmail.com>
Date: Wed, 30 Mar 2022 22:40:59 -0700
Subject: [PATCH] use grid for displaying narrow cards

---
 .../patterns/LibraryCards/ListLinkedItemCard.tsx          | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/web/components/patterns/LibraryCards/ListLinkedItemCard.tsx b/packages/web/components/patterns/LibraryCards/ListLinkedItemCard.tsx
index 3a8af1b1c..98a4af2f8 100644
--- a/packages/web/components/patterns/LibraryCards/ListLinkedItemCard.tsx
+++ b/packages/web/components/patterns/LibraryCards/ListLinkedItemCard.tsx
@@ -25,7 +25,7 @@ export function ListLinkedItemCardNarrow(
   props: LinkedItemCardProps
 ): JSX.Element {
   return (
-    <HStack
+    <Box
       css={{
         p: '$3',
         height: '100%',
@@ -37,6 +37,9 @@ export function ListLinkedItemCardNarrow(
         border: '1px solid $grayBorder',
         borderBottom: 'none',
         alignItems: 'center',
+        display: 'grid',
+        gridTemplateColumns: '1fr 24px',
+        gridTemplateRows: '1fr',
       }}
       onClick={() => {
         props.handleAction('showDetail')
@@ -47,7 +50,6 @@ export function ListLinkedItemCardNarrow(
         alignment="end"
         css={{
           px: '$2',
-          flexGrow: 1,
           pl: '0px',
         }}
       >
@@ -108,7 +110,7 @@ export function ListLinkedItemCardNarrow(
           actionHandler={props.handleAction}
         />
       </Box>
-    </HStack>
+    </Box>
   )
 }