From 0d7efb2357c26cea4cd357f832aa8810bc038496 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Fri, 11 Sep 2020 22:13:38 -0700
Subject: [PATCH] use 3 columns for grid on wider screens

This isn't as great for modeling cards, but it's fine imo, and it's much better for item list cards (where there's practically no badges)
---
 src/app/ItemsPage.js           | 4 ++--
 src/app/components/ItemCard.js | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/app/ItemsPage.js b/src/app/ItemsPage.js
index 5f028ac..c54b840 100644
--- a/src/app/ItemsPage.js
+++ b/src/app/ItemsPage.js
@@ -100,7 +100,7 @@ function ItemsPage() {
 
   return (
     <Box>
-      <Heading1 marginBottom="8">
+      <Heading1 marginBottom="6">
         {isCurrentUser ? "Items you own" : `Items ${data.user.username} owns`}
       </Heading1>
       <ItemCardList>
@@ -118,7 +118,7 @@ function ItemsPage() {
         ))}
       </ItemCardList>
 
-      <Heading1 marginBottom="8" marginTop="8">
+      <Heading1 marginBottom="6" marginTop="8">
         {isCurrentUser ? "Items you want" : `Items ${data.user.username} wants`}
       </Heading1>
       <ItemCardList>
diff --git a/src/app/components/ItemCard.js b/src/app/components/ItemCard.js
index 0737d3f..e0c70e3 100644
--- a/src/app/components/ItemCard.js
+++ b/src/app/components/ItemCard.js
@@ -29,6 +29,7 @@ function ItemCard({ item, badges, ...props }) {
       borderColor={borderColor}
       className="item-card"
       width="100%"
+      minWidth="0"
       {...props}
     >
       <ItemCardContent
@@ -178,7 +179,7 @@ function ItemName({ children, isDisabled, focusSelector, ...props }) {
 
 export function ItemCardList({ children }) {
   return (
-    <SimpleGrid columns={{ sm: 1, lg: 2 }} spacing="6">
+    <SimpleGrid columns={{ sm: 1, md: 2, lg: 3 }} spacing="6">
       {children}
     </SimpleGrid>
   );