Conditionally show lens make text

src/components/primitives/ResponsiveText.tsx

@@ -1,5 +1,11 @@
 import clsx from 'clsx/lite';
-import { ReactNode } from 'react';
+import { ReactNode, useMemo } from 'react';
+
+// Show long text at 'lg' breakpoint when 32 characters
+const CHARACTER_CUTOFF_LG = 32;
+// Show long text at 'md' breakpoint when 24 characters
+const CHARACTER_CUTOFF_MD = 24;
+// Otherwise show long text at 'sm' breakpoint
 
 export default function ResponsiveText({
   shortText,
@@ -10,17 +16,29 @@ export default function ResponsiveText({
   className?: string
   children: ReactNode
 }) {
+  const cutoffClasses = useMemo(() => {
+    const textLength = typeof children === 'string'
+      ? children.length
+      : 0;
+    console.log(textLength);
+    return textLength >= CHARACTER_CUTOFF_LG
+      ? { short: 'lg:hidden', long: 'max-lg:hidden' }
+      : textLength >= CHARACTER_CUTOFF_MD
+        ? { short: 'md:hidden', long: 'max-md:hidden' }
+        : { short: 'sm:hidden', long: 'max-sm:hidden' };
+  }, [children]);
+
   return (
     <>
       {/* Short text */}
       <span
-        className={clsx('inline sm:hidden', className)}
+        className={clsx(cutoffClasses.short, className)}
         aria-hidden
       >
         {shortText ?? children}
       </span>
       {/* Full text */}
-      <span className={clsx('hidden sm:inline', className)}>
+      <span className={clsx(cutoffClasses.long, className)}>
         {children}
       </span>
     </>

src/lens/LensHeader.tsx

@@ -31,6 +31,7 @@ export default async function LensHeader({
         {...{ lens }}
         contrast="high"
         showHover={false}
+        longText
       />}
       entityDescription={
         descriptionForLensPhotos(

src/lens/PhotoLens.tsx

@@ -9,16 +9,17 @@ import IconLens from '@/components/icons/IconLens';
 
 export default function PhotoLens({
   lens,
-  shortText,
+  longText,
   ...props
 }: {
   lens: Lens
-  shortText?: boolean
+  longText?: boolean
 } & EntityLinkExternalProps) {
   return (
     <EntityLink
       {...props}
-      label={formatLensText(lens, shortText ? 'short' : 'medium')}
+      label={formatLensText(lens, longText ? 'long' : 'short')}
+      labelSmall={formatLensText(lens, 'short')}
       path={pathForLens(lens)}
       hoverPhotoQueryOptions={{ lens }}
       icon={<IconLens

src/lens/index.ts

@@ -114,7 +114,7 @@ export const formatLensText = (
 
   switch (length) {
   case 'long':
-    return make ? `${make} ${modelRaw}` : modelRaw;
+    return make ? `${make} ${model}` : modelRaw;
   case 'medium':
   case 'short':
     return model;

src/photo/PhotoLarge.tsx

@@ -341,7 +341,6 @@ export default function PhotoLarge({
                               lens={lens}
                               contrast="medium"
                               prefetch={prefetchRelatedLinks}
-                              shortText
                               countOnHover={lensCount}
                             />}
                         </div>}