ModalTitle shrinkOnOverflow + VRT

packages/desktop-client/src/components/Modals.tsx

@@ -11,6 +11,7 @@ import * as monthUtils from 'loot-core/src/shared/months';
 import { useActions } from '../hooks/useActions';
 import { useSyncServerStatus } from '../hooks/useSyncServerStatus';
 
+import { ModalTitle } from './common/Modal';
 import { AccountAutocompleteModal } from './modals/AccountAutocompleteModal';
 import { AccountMenuModal } from './modals/AccountMenuModal';
 import { BudgetMenuModal } from './modals/BudgetMenuModal';
@@ -314,7 +315,7 @@ export function Modals() {
           return (
             <SingleInputModal
               modalProps={modalProps}
-              title="New Category"
+              title={<ModalTitle title="New Category" shrinkOnOverflow />}
               inputPlaceholder="Category name"
               buttonText="Add"
               onValidate={options.onValidate}
@@ -326,7 +327,7 @@ export function Modals() {
           return (
             <SingleInputModal
               modalProps={modalProps}
-              title="New Category Group"
+              title={<ModalTitle title="New Category Group" shrinkOnOverflow />}
               inputPlaceholder="Category group name"
               buttonText="Add"
               onValidate={options.onValidate}

packages/desktop-client/src/components/common/Modal.tsx

@@ -370,13 +370,15 @@ type ModalTitleProps = {
   getStyle?: (isEditing: boolean) => CSSProperties;
   onEdit?: (isEditing: boolean) => void;
   onTitleUpdate?: (newName: string) => void;
+  shrinkOnOverflow?: boolean;
 };
 
 export function ModalTitle({
   title,
   isEditable,
   getStyle,
   onTitleUpdate,
+  shrinkOnOverflow = false,
 }: ModalTitleProps) {
   const [isEditing, setIsEditing] = useState(false);
   const style = getStyle?.(isEditing);
@@ -405,6 +407,23 @@ export function ModalTitle({
     }
   }, [isEditing]);
 
+  // Dynamic font size to avoid ellipsis.
+  const textRef = useRef<HTMLSpanElement>();
+  const [textFontSize, setTextFontSize] = useState(25);
+  useEffect(() => {
+    if (shrinkOnOverflow) {
+      const containerWidth = textRef.current.offsetWidth;
+      const textWidth = textRef.current.scrollWidth;
+
+      if (textWidth > containerWidth) {
+        const newFontSize = Math.floor(
+          (containerWidth / textWidth) * textFontSize,
+        );
+        setTextFontSize(newFontSize);
+      }
+    }
+  }, [textFontSize, shrinkOnOverflow]);
+
   return isEditing ? (
     <Input
       inputRef={inputRef}
@@ -426,8 +445,9 @@ export function ModalTitle({
     />
   ) : (
     <Text
+      innerRef={textRef}
       style={{
-        fontSize: 25,
+        fontSize: textFontSize,
         fontWeight: 700,
         textAlign: 'center',
         whiteSpace: 'nowrap',

packages/desktop-client/src/components/modals/SingleInputModal.tsx

@@ -1,5 +1,5 @@
 // @ts-strict-ignore
-import React, { useState } from 'react';
+import React, { type ComponentProps, useState } from 'react';
 
 import { styles } from '../../style';
 import { Button } from '../common/Button';
@@ -12,7 +12,7 @@ import { type CommonModalProps } from '../Modals';
 
 type SingleInputModalProps = {
   modalProps: Partial<CommonModalProps>;
-  title: string;
+  title: ComponentProps<typeof Modal>['title'];
   buttonText: string;
   onSubmit: (value: string) => void;
   onValidate?: (value: string) => string[];