fix: handle really long template names

Author: hrhv

packages/imagekit-editor-dev/src/components/header/TemplatesDropdown.tsx

@@ -36,6 +36,7 @@ import { useTemplateStorage } from "../../context/TemplateStorageContext"
 import type { TemplateRecord } from "../../storage"
 import { applyTemplateStorageAccessFailure } from "../../storage/templateAccessError"
 import { useEditorStore } from "../../store"
+import { truncateTemplateName } from "../../utils"
 
 const MAX_VISIBLE = 5
 
@@ -351,8 +352,9 @@ export function TemplatesDropdown({
                         fontWeight="medium"
                         isTruncated
                         color="blue.800"
+                        title={templateName}
                       >
-                        {templateName}
+                        {truncateTemplateName(templateName)}
                       </Text>
                       <Badge colorScheme="blue" fontSize="xs" flexShrink={0}>
                         Current
@@ -413,8 +415,9 @@ export function TemplatesDropdown({
                       fontWeight="medium"
                       isTruncated
                       color="editorBattleshipGrey.800"
+                      title={record.name}
                     >
-                      {record.name}
+                      {truncateTemplateName(record.name)}
                     </Text>
 
                     {/* Creator on hover + pin (always visible for pinned, hover for others) */}

packages/imagekit-editor-dev/src/components/templates/TemplatesLibraryView.tsx

@@ -37,6 +37,7 @@ import { useTemplateStorage } from "../../context/TemplateStorageContext"
 import { useDebounce } from "../../hooks/useDebounce"
 import type { TemplateRecord } from "../../storage"
 import { useEditorStore } from "../../store"
+import { truncateTemplateName } from "../../utils"
 import FilterChipsField from "../common/FilterChipsField"
 import MultiSelectListField from "../common/MultiSelectListField"
 import { SettingsModal } from "../header/SettingsModal"
@@ -605,8 +606,9 @@ function TemplateRow({
             fontWeight="medium"
             color={isCurrent ? "blue.800" : "editorBattleshipGrey.700"}
             isTruncated
+            title={record.name}
           >
-            {record.name}
+            {truncateTemplateName(record.name)}
           </Text>
           {isCurrent && (
             <Badge colorScheme="blue" fontSize="xs" flexShrink={0}>

packages/imagekit-editor-dev/src/utils/index.ts

@@ -1,6 +1,7 @@
 export const __DEV__ = process.env.NODE_ENV !== "production"
 
 export const SIMPLE_OVERLAY_TEXT_REGEX = /^[a-zA-Z0-9-._ ]*$/
+export const TEMPLATE_NAME_UI_MAX_LENGTH = 30
 
 export const safeBtoa = (str: string): string => {
   if (typeof window !== "undefined") {
@@ -93,3 +94,10 @@ export const extractImagePath = (imageUrl: string): string => {
     return segments[0] || ""
   }
 }
+
+export const truncateTemplateName = (name: string) => {
+  if (name.length <= TEMPLATE_NAME_UI_MAX_LENGTH) {
+    return name
+  }
+  return `${name.slice(0, TEMPLATE_NAME_UI_MAX_LENGTH)}...`
+}