From ea41ef42a49e420f930bf1aab1040a4ef333b515 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Tue, 4 Feb 2025 18:11:38 -0600
Subject: [PATCH] Truncate long photo set text

---
 src/components/primitives/EntityLink.tsx | 10 ++++++++--
 src/photo/PhotoHeader.tsx                |  2 +-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/primitives/EntityLink.tsx b/src/components/primitives/EntityLink.tsx
index 434987b2..231ed4ec 100644
--- a/src/components/primitives/EntityLink.tsx
+++ b/src/components/primitives/EntityLink.tsx
@@ -22,6 +22,7 @@ export default function EntityLink({
   prefetch,
   title,
   hoverEntity,
+  truncate = true,
   className,
   debug,
 }: {
@@ -33,8 +34,9 @@ export default function EntityLink({
   prefetch?: boolean
   title?: string
   hoverEntity?: ReactNode
-  debug?: boolean
+  truncate?: boolean
   className?: string
+  debug?: boolean
 } & EntityLinkExternalProps) {
   const classForContrast = () => {
     switch (contrast) {
@@ -84,7 +86,11 @@ export default function EntityLink({
           >
             {renderLabel()}
           </Badge>
-          : renderLabel()}
+          : <span className={clsx(
+            truncate && 'inline-flex max-w-full [&>*]:truncate',
+          )}>
+            {renderLabel()}
+          </span>}
       </LabeledIcon>
       {hoverEntity !== undefined &&
         <span className="hidden group-hover:inline">
diff --git a/src/photo/PhotoHeader.tsx b/src/photo/PhotoHeader.tsx
index 74d1e66e..ae236ae1 100644
--- a/src/photo/PhotoHeader.tsx
+++ b/src/photo/PhotoHeader.tsx
@@ -120,7 +120,7 @@ export default function PhotoHeader({
             // Necessary for title truncation
             : <h1 className={clsx(
               'w-full truncate',
-              headerType !== 'photo-detail' && 'sm:pr-2',
+              headerType !== 'photo-detail' && 'pr-1 sm:pr-2',
             )}>
               {renderContentA()}
             </h1>}