use the same ItemCardList in items + modeling

and make the grid items take the full two-column width

src/app/ItemsPage.js

@@ -8,6 +8,7 @@ import HangerSpinner from "./components/HangerSpinner";
 import { Heading1 } from "./util";
 import ItemCard, {
   ItemBadgeList,
+  ItemCardList,
   NcBadge,
   NpBadge,
   YouOwnThisBadge,
@@ -78,7 +79,7 @@ function ItemsPage() {
       <Heading1 marginBottom="8">
         {isCurrentUser ? "Items you own" : `Items ${data.user.username} owns`}
       </Heading1>
-      <Wrap justify="center">
+      <ItemCardList>
         {data.user.itemsTheyOwn.map((item) => (
           <ItemCard
             key={item.id}
@@ -96,12 +97,12 @@ function ItemsPage() {
             }
           />
         ))}
-      </Wrap>
+      </ItemCardList>
 
       <Heading1 marginBottom="8" marginTop="8">
         {isCurrentUser ? "Items you want" : `Items ${data.user.username} wants`}
       </Heading1>
-      <Wrap justify="center">
+      <ItemCardList>
         {data.user.itemsTheyWant.map((item) => (
           <ItemCard
             key={item.id}
@@ -119,7 +120,7 @@ function ItemsPage() {
             }
           />
         ))}
-      </Wrap>
+      </ItemCardList>
     </Box>
   );
 }

src/app/ModelingPage.js

@@ -8,6 +8,7 @@ import HangerSpinner from "./components/HangerSpinner";
 import { Heading1, Heading2 } from "./util";
 import ItemCard, {
   ItemBadgeList,
+  ItemCardList,
   YouOwnThisBadge,
 } from "./components/ItemCard";
 
@@ -72,7 +73,7 @@ function ItemModelsList() {
   );
 
   return (
-    <SimpleGrid columns={{ sm: 1, lg: 2 }} spacing="6">
+    <ItemCardList>
       {items.map((item) => (
         <ItemModelCard
           key={item.id}
@@ -80,7 +81,7 @@ function ItemModelsList() {
           currentUserOwnsItem={ownedItemIds.has(item.id)}
         />
       ))}
-    </SimpleGrid>
+    </ItemCardList>
   );
 }
 
@@ -89,7 +90,7 @@ function ItemModelCard({ item, currentUserOwnsItem, ...props }) {
     <ItemModelBadges item={item} currentUserOwnsItem={currentUserOwnsItem} />
   );
 
-  return <ItemCard item={item} badges={badges} />;
+  return <ItemCard item={item} badges={badges} {...props} />;
 }
 
 function ItemModelBadges({ item, currentUserOwnsItem }) {

src/app/components/ItemCard.js

@@ -4,6 +4,7 @@ import {
   Badge,
   Box,
   Image,
+  SimpleGrid,
   Tooltip,
   Wrap,
   useColorModeValue,
@@ -27,6 +28,7 @@ function ItemCard({ item, badges, ...props }) {
       border="1px"
       borderColor={borderColor}
       className="item-card"
+      width="100%"
       {...props}
     >
       <ItemCardContent
@@ -174,6 +176,14 @@ function ItemName({ children, isDisabled, focusSelector, ...props }) {
   );
 }
 
+export function ItemCardList({ children }) {
+  return (
+    <SimpleGrid columns={{ sm: 1, lg: 2 }} spacing="6">
+      {children}
+    </SimpleGrid>
+  );
+}
+
 export function ItemBadgeList({ children }) {
   return (
     <Wrap spacing="2" marginTop="1" opacity="0.7">