Remove unnecessary code and try event handling instead

Add JavaScript Key Event Handling: Capture the Enter key press within the title input field to insert a newline character.

ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx

@@ -50,7 +50,6 @@ import { useRatingKeybinds } from "src/hooks/keybinds";
 import { lazyComponent } from "src/utils/lazyComponent";
 import cx from "classnames";
 import { TruncatedText } from "src/components/Shared/TruncatedText";
-import { TitleDisplay } from "src/components/Shared/TitleDisplay";
 
 const SubmitStashBoxDraft = lazyComponent(
   () => import("src/components/Dialogs/SubmitDraft")
@@ -585,15 +584,7 @@ const ScenePage: React.FC<IProps> = ({
               </h1>
             )}
             <h3 className={cx("scene-header", { "no-studio": !scene.studio })}>
-              <TruncatedText
-                lineCount={2}
-                text={
-                  <TitleDisplay
-                    text={String(title)}
-                    className="title-display"
-                  />
-                }
-              />
+              <TruncatedText lineCount={2} text={title} />
             </h3>
           </div>
 

ui/v2.5/src/components/Scenes/styles.scss

@@ -23,6 +23,12 @@
   padding: 0.5rem 1rem 0 1rem;
 }
 
+input[type="text"] {
+  white-space: pre-wrap;
+  height: auto;
+  overflow-y: hidden;
+}
+
 .performer-tag-container,
 .group-tag-container {
   display: inline-block;
@@ -899,13 +905,3 @@ input[type="range"].blue-slider {
     word-break: break-all;
   }
 }
-
-.title-display {
-  width: 100%;
-
-  br {
-    content: "";
-    display: block;
-    margin: 2px 0;
-  }
-}

ui/v2.5/src/components/Shared/GridCard/GridCard.tsx

@@ -13,7 +13,6 @@ import useResizeObserver from "@react-hook/resize-observer";
 import { Icon } from "../Icon";
 import { faGripLines } from "@fortawesome/free-solid-svg-icons";
 import { DragSide, useDragMoveSelect } from "./dragMoveSelect";
-import { TitleDisplay } from "src/components/Shared/TitleDisplay";
 
 interface ICardProps {
   className?: string;
@@ -229,16 +228,7 @@ export const GridCard: React.FC<ICardProps> = (props: ICardProps) => {
         <Link to={props.url} onClick={handleImageClick}>
           <h5 className="card-section-title flex-aligned">
             {props.pretitleIcon}
-            <TruncatedText
-              text={
-                typeof props.title === "string" ? (
-                  <TitleDisplay text={props.title} className="title-display" />
-                ) : (
-                  props.title
-                )
-              }
-              lineCount={2}
-            />
+            <TruncatedText text={props.title} lineCount={2} />
           </h5>
         </Link>
         {props.details}

ui/v2.5/src/components/Shared/GridCard/styles.scss

@@ -82,13 +82,3 @@
 .card-drag-handle {
   filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.7));
 }
-
-.title-display {
-  width: 100%;
-
-  br {
-    content: "";
-    display: block;
-    margin: 2px 0;
-  }
-}

ui/v2.5/src/components/Shared/TitleDisplay.tsx

@@ -1,24 +0,0 @@
-import React from "react";
-
-interface ITitleDisplayProps {
-  text: string;
-  className?: string;
-}
-
-export const TitleDisplay: React.FC<ITitleDisplayProps> = ({
-  text,
-  className,
-}) => {
-  if (!text) return null;
-
-  return (
-    <div className={className}>
-      {text.split("\n").map((line, i) => (
-        <React.Fragment key={i}>
-          {line}
-          {i < text.split("\n").length - 1 && <br />}
-        </React.Fragment>
-      ))}
-    </div>
-  );
-};

ui/v2.5/src/utils/form.tsx

@@ -189,11 +189,7 @@ export function formikUtils<V extends FormikValues>(
     props?: IProps
   ) {
     const title = intl.formatMessage({ id: messageID });
-    const control = renderFormControl(
-      field,
-      field === "title" ? "textarea" : type,
-      title
-    );
+    const control = renderFormControl(field, type, title);
 
     return renderField(field, title, control, props);
   }