Line break titles

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useMemo } from "react";
+import React, { useEffect, useState, useMemo, useRef } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import { Button, Form, Col, Row, ButtonGroup } from "react-bootstrap";
 import Mousetrap from "mousetrap";
@@ -64,6 +64,7 @@ export const SceneEditPanel: React.FC<IProps> = ({
 }) => {
   const intl = useIntl();
   const Toast = useToast();
+  const titleInputRef = useRef<HTMLInputElement>(null);
 
   const [galleries, setGalleries] = useState<Gallery[]>([]);
   const [performers, setPerformers] = useState<Performer[]>([]);
@@ -674,6 +675,42 @@ export const SceneEditPanel: React.FC<IProps> = ({
     return renderInputField("details", "textarea", "details", props);
   }
 
+  function renderTitleField() {
+    const displayValue = formik.values.title.replace(/\n/g, " ");
+
+    return (
+      <Form.Control
+        ref={titleInputRef}
+        className="text-input"
+        type="text"
+        value={displayValue}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+          formik.setFieldValue("title", e.target.value);
+        }}
+        onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {
+          if (event.key === "Enter") {
+            event.preventDefault();
+            const cursorPosition = event.currentTarget.selectionStart ?? 0;
+            const newTitle =
+              formik.values.title.substring(0, cursorPosition) +
+              "\n" +
+              formik.values.title.substring(cursorPosition);
+            formik.setFieldValue("title", newTitle);
+
+            setTimeout(() => {
+              if (titleInputRef.current) {
+                titleInputRef.current.setSelectionRange(
+                  cursorPosition + 1,
+                  cursorPosition + 1
+                );
+              }
+            }, 0);
+          }
+        }}
+      />
+    );
+  }
+
   return (
     <div id="scene-edit-details">
       <Prompt
@@ -730,7 +767,11 @@ export const SceneEditPanel: React.FC<IProps> = ({
         </Row>
         <Row className="form-container px-3">
           <Col lg={7} xl={12}>
-            {renderInputField("title")}
+            {renderField(
+              "title",
+              intl.formatMessage({ id: "title" }),
+              renderTitleField()
+            )}
             {renderInputField("code", "text", "scene_code")}
 
             {renderURLListField("urls", onScrapeSceneURL, urlScrapable)}

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

@@ -23,6 +23,12 @@
   padding: 0.5rem 1rem 0 1rem;
 }
 
+.text-input {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: normal;
+}
+
 .performer-tag-container,
 .group-tag-container {
   display: inline-block;