From f32de55ed0a9de6e8f3fb4968d2dec558e134673 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Fri, 26 Nov 2021 15:05:07 -0800
Subject: [PATCH] Handle more lists, longer list names, on item page

Give the grid a fixed size, have the list name stuff get ellipsis when it's too long, and try to show all list names (which will almost certainly too long for the space) to give a better hint of what's in there.
---
 src/app/ItemPage.js | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/app/ItemPage.js b/src/app/ItemPage.js
index aaa33f60..1b022b5e 100644
--- a/src/app/ItemPage.js
+++ b/src/app/ItemPage.js
@@ -173,10 +173,11 @@ function ItemPageOwnWantButtons({ itemId }) {
   return (
     <Grid
       templateRows="auto auto"
-      templateColumns="auto auto"
+      templateColumns="160px 160px"
       gridAutoFlow="column"
       rowGap="0.5"
       columnGap="4"
+      justifyItems="center"
     >
       <SubtleSkeleton isLoaded={!loading}>
         <ItemPageOwnButton
@@ -210,9 +211,10 @@ function ItemPageOwnWantListsButton({ closetLists, isVisible }) {
 
   let buttonText;
   if (realLists.length === 1) {
-    buttonText = `In list "${realLists[0].name}"`;
+    buttonText = `In list: "${realLists[0].name}"`;
   } else if (realLists.length > 1) {
-    buttonText = `In ${realLists.length} lists`;
+    const listNames = realLists.map((cl) => `"${cl.name}"`).join(", ");
+    buttonText = `${realLists.length} lists: ${listNames}`;
   } else {
     buttonText = "Add to list";
   }
@@ -223,6 +225,7 @@ function ItemPageOwnWantListsButton({ closetLists, isVisible }) {
       fontSize="xs"
       alignItems="center"
       borderRadius="sm"
+      width="100%"
       _hover={{ textDecoration: "underline" }}
       _focus={{
         textDecoration: "underline",
@@ -245,7 +248,9 @@ function ItemPageOwnWantListsButton({ closetLists, isVisible }) {
     >
       {/* Flex tricks to center the text, ignoring the caret */}
       <Box flex="1 0 0" />
-      <Box>{buttonText}</Box>
+      <Box textOverflow="ellipsis" overflow="hidden" whiteSpace="nowrap">
+        {buttonText}
+      </Box>
       <Flex flex="1 0 0">
         <ChevronDownIcon marginLeft="1" />
       </Flex>