diff --git a/components/cart/modal.tsx b/components/cart/modal.tsx
index 0c20ede64..547621975 100644
--- a/components/cart/modal.tsx
+++ b/components/cart/modal.tsx
@@ -127,7 +127,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
{item.merchandise.product.title}
{item.merchandise.title !== DEFAULT_OPTION ? (
-
+
{item.merchandise.title}
) : null}
@@ -135,7 +135,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
diff --git a/components/label.tsx b/components/label.tsx
index 471fe7a25..e49efce40 100644
--- a/components/label.tsx
+++ b/components/label.tsx
@@ -24,6 +24,7 @@ const Label = ({
className="flex-none rounded-full bg-blue-600 p-2 text-white"
amount={amount}
currencyCode={currencyCode}
+ currencyCodeClassName="hidden @[275px]/label:inline"
/>
diff --git a/components/price.tsx b/components/price.tsx
index 1ec29fe93..e7090148d 100644
--- a/components/price.tsx
+++ b/components/price.tsx
@@ -1,18 +1,23 @@
+import clsx from 'clsx';
+
const Price = ({
amount,
+ className,
currencyCode = 'USD',
- ...props
+ currencyCodeClassName
}: {
amount: string;
+ className?: string;
currencyCode: string;
+ currencyCodeClassName?: string;
} & React.ComponentProps<'p'>) => (
-
+
{`${new Intl.NumberFormat(undefined, {
style: 'currency',
currency: currencyCode,
currencyDisplay: 'narrowSymbol'
}).format(parseFloat(amount))}`}
- {` ${currencyCode}`}
+ {`${currencyCode}`}
);