Filename Ellipses

brave · Feb 28, 2025 · 6daef00 · 6daef00
1 parent f6a23a7
commit 6daef00
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 1 deletion.
diff --git a/components/ai_chat/resources/page/components/uploaded_img_item/index.tsx b/components/ai_chat/resources/page/components/uploaded_img_item/index.tsx
@@ -43,6 +43,8 @@ export default function UploadedImgItem(props: Props) {
     return `${bytes.toFixed(2)} ${units[index]}`
   }, [props.imageData.fileSize])
 
+  const fileNameParts = props.imageData.fileName.split('.')
+
   return (
     <div className={styles.itemWrapper}>
       <div className={styles.leftSide}>
@@ -51,7 +53,12 @@ export default function UploadedImgItem(props: Props) {
           src={dataUrl}
         />
         <div className={styles.imageInfo}>
-          <span className={styles.nameText}>{props.imageData.fileName}</span>
+          <div className={styles.nameAndExtensionRow}>
+            <div className={styles.forEllipsis}>
+              <span className={styles.nameText}>{fileNameParts[0]}</span>
+            </div>
+            <span className={styles.extensionText}>.{fileNameParts[1]}</span>
+          </div>
           <span className={styles.sizeText}>{fileSize}</span>
         </div>
       </div>

diff --git a/components/ai_chat/resources/page/components/uploaded_img_item/style.module.scss b/components/ai_chat/resources/page/components/uploaded_img_item/style.module.scss
@@ -39,9 +39,28 @@
   align-items: flex-start;
 }
 
+.nameAndExtensionRow {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.forEllipsis {
+  display: grid;
+}
+
 .nameText {
   font: var(--leo-font-default-regular);
   color: var(--leo-color-text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.extensionText {
+  font: var(--leo-font-default-regular);
+  color: var(--leo-color-text-primary);
 }
 
 .sizeText {