diff --git a/src/app/ItemPage.js b/src/app/ItemPage.js index 3a18d54..3818cdb 100644 --- a/src/app/ItemPage.js +++ b/src/app/ItemPage.js @@ -31,7 +31,7 @@ import { NcBadge, NpBadge, } from "./components/ItemCard"; -import { Heading1, usePageTitle } from "./util"; +import { Delay, Heading1, usePageTitle } from "./util"; import OutfitPreview from "./components/OutfitPreview"; function ItemPage() { @@ -73,7 +73,11 @@ function ItemPageHeader({ itemId, isEmbedded }) { usePageTitle(data?.item?.name, { skip: isEmbedded }); - const numDescriptionLines = useBreakpointValue({ base: 2, md: 1 }); + // Show 2 lines of description text placeholder on small screens, or when + // embedded in the wardrobe page's narrow drawer. In larger contexts, show + // just 1 line. + const viewportNumDescriptionLines = useBreakpointValue({ base: 2, md: 1 }); + const numDescriptionLines = isEmbedded ? 2 : viewportNumDescriptionLines; if (error) { return {error.message}; @@ -116,7 +120,9 @@ function ItemPageHeader({ itemId, isEmbedded }) { alignItems="stretch" justifyContent="center" > - + + + )}