use a vstack for library list card on narrow widths

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

@@ -1,4 +1,9 @@
-import { Box, HStack } from '../../elements/LayoutPrimitives'
+import {
+  Box,
+  HStack,
+  VStack,
+  MediumBreakpointBox,
+} from '../../elements/LayoutPrimitives'
 import { StyledText } from '../../elements/StyledText'
 import { authoredByText } from '../ArticleSubtitle'
 import { MoreOptionsIcon } from '../../elements/images/MoreOptionsIcon'
@@ -8,6 +13,108 @@ import type { LinkedItemCardProps } from './CardTypes'
 import { ProgressBar } from '../../elements/ProgressBar'
 
 export function ListLinkedItemCard(props: LinkedItemCardProps): JSX.Element {
+  return (
+    <MediumBreakpointBox
+      smallerLayoutNode={<ListLinkedItemCardNarrow {...props} />}
+      largerLayoutNode={<ListLinkedItemCardWide {...props} />}
+    />
+  )
+}
+
+export function ListLinkedItemCardNarrow(
+  props: LinkedItemCardProps
+): JSX.Element {
+  return (
+    <HStack
+      css={{
+        p: '$3',
+        height: '100%',
+        width: '100%',
+        maxWidth: '100%',
+        borderRadius: 0,
+        cursor: 'pointer',
+        wordBreak: 'break-word',
+        border: '1px solid $grayBorder',
+        borderBottom: 'none',
+        alignItems: 'center',
+      }}
+      onClick={() => {
+        props.handleAction('showDetail')
+      }}
+    >
+      <HStack
+        distribution="start"
+        alignment="end"
+        css={{
+          px: '$2',
+          flexGrow: 1,
+          pl: '0px',
+        }}
+      >
+        <VStack>
+          <StyledText
+            style="listTitle"
+            css={{
+              mt: '0px',
+              mb: '$1',
+              textAlign: 'left',
+              lineHeight: 'normal',
+            }}
+          >
+            {props.item.title}
+          </StyledText>
+          <HStack>
+            {props.item.author && (
+              <StyledText style="caption" css={{ my: '$1' }}>
+                {authoredByText(props.item.author)}
+              </StyledText>
+            )}
+            <StyledText
+              style="caption"
+              css={{
+                my: '$1',
+                ml: props.item.author ? '8px' : 0,
+                textDecorationLine: 'underline',
+              }}
+            >
+              {props.originText}
+            </StyledText>
+          </HStack>
+        </VStack>
+      </HStack>
+      <Box
+        css={{
+          alignSelf: 'end',
+          alignItems: 'center',
+          display: 'grid',
+          placeItems: 'center',
+        }}
+        onClick={(e) => {
+          // This is here to prevent menu click events from bubbling
+          // up and causing us to "click" on the link item.
+          e.stopPropagation()
+        }}
+      >
+        <CardMenu
+          item={props.item}
+          viewer={props.viewer}
+          triggerElement={
+            <MoreOptionsIcon
+              size={24}
+              strokeColor={theme.colors.grayTextContrast.toString()}
+              orientation="horizontal"
+            />
+          }
+          actionHandler={props.handleAction}
+        />
+      </Box>
+    </HStack>
+  )
+}
+
+export function ListLinkedItemCardWide(
+  props: LinkedItemCardProps
+): JSX.Element {
   return (
     <HStack
       css={{