[Bug Fix] Fix scene markers editor mobile UI (#1718)

* Fix mobile layout

ui/v2.5/src/components/Changelog/versions/v0100.md

@@ -10,3 +10,6 @@
 
 ### 🎨 Improvements
 * Added sv-SE language option. ([#1691](https://github.com/stashapp/stash/pull/1691))
+
+### 🐛 Bug fixes
+* Fix Create Marker form on small devices. ([#1718](https://github.com/stashapp/stash/pull/1718))

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

@@ -68,30 +68,26 @@ export const SceneMarkerForm: React.FC<ISceneMarkerForm> = ({
       .catch((err) => Toast.error(err));
   };
   const renderTitleField = (fieldProps: FieldProps<string>) => (
-    <div className="col-10 col-xl-12">
+    <MarkerTitleSuggest
-      <MarkerTitleSuggest
+      initialMarkerTitle={fieldProps.field.value}
-        initialMarkerTitle={fieldProps.field.value}
+      onChange={(query: string) =>
-        onChange={(query: string) =>
+        fieldProps.form.setFieldValue("title", query)
-          fieldProps.form.setFieldValue("title", query)
+      }
-        }
+    />
-      />
-    </div>
   );
 
   const renderSecondsField = (fieldProps: FieldProps<string>) => (
-    <div className="col-3 col-xl-12">
+    <DurationInput
-      <DurationInput
+      onValueChange={(s) => fieldProps.form.setFieldValue("seconds", s)}
-        onValueChange={(s) => fieldProps.form.setFieldValue("seconds", s)}
+      onReset={() =>
-        onReset={() =>
+        fieldProps.form.setFieldValue(
-          fieldProps.form.setFieldValue(
+          "seconds",
-            "seconds",
+          Math.round(JWUtils.getPlayer()?.getPosition() ?? 0)
-            Math.round(JWUtils.getPlayer()?.getPosition() ?? 0)
+        )
-          )
+      }
-        }
+      numericValue={Number.parseInt(fieldProps.field.value ?? "0", 10)}
-        numericValue={Number.parseInt(fieldProps.field.value ?? "0", 10)}
+      mandatory
-        mandatory
+    />
-      />
-    </div>
   );
 
   const renderPrimaryTagField = (fieldProps: FieldProps<string>) => (
@@ -100,7 +96,7 @@ export const SceneMarkerForm: React.FC<ISceneMarkerForm> = ({
         fieldProps.form.setFieldValue("primaryTagId", tags[0]?.id)
       }
       ids={fieldProps.field.value ? [fieldProps.field.value] : []}
-      noSelectionString="Select or create tag..."
+      noSelectionString="Select/create tag..."
     />
   );
 
@@ -114,7 +110,7 @@ export const SceneMarkerForm: React.FC<ISceneMarkerForm> = ({
         )
       }
       ids={fieldProps.field.value}
-      noSelectionString="Select or create tags..."
+      noSelectionString="Select/create tags..."
     />
   );
 
@@ -133,28 +129,48 @@ export const SceneMarkerForm: React.FC<ISceneMarkerForm> = ({
       <FormikForm>
         <div>
           <Form.Group className="row">
-            <Form.Label htmlFor="title" className="col-2 col-xl-12">
+            <Form.Label
-              Scene Marker Title
+              htmlFor="title"
+              className="col-sm-3 col-md-2 col-xl-12 col-form-label"
+            >
+              Marker Title
             </Form.Label>
-            <Field name="title">{renderTitleField}</Field>
+            <div className="col-sm-9 col-md-10 col-xl-12">
+              <Field name="title">{renderTitleField}</Field>
+            </div>
           </Form.Group>
           <Form.Group className="row">
-            <Form.Label htmlFor="primaryTagId" className="col-2 col-xl-12">
+            <Form.Label
+              htmlFor="primaryTagId"
+              className="col-sm-3 col-md-2 col-xl-12 col-form-label"
+            >
               Primary Tag
             </Form.Label>
-            <div className="col-6 col-xl-12">
+            <div className="col-sm-4 col-md-6 col-xl-12 mb-3 mb-sm-0 mb-xl-3">
               <Field name="primaryTagId">{renderPrimaryTagField}</Field>
             </div>
-            <Form.Label htmlFor="seconds" className="col-1 col-xl-12 mt-2">
+            <div className="col-sm-5 col-md-4 col-xl-12">
-              Time
+              <div className="row">
-            </Form.Label>
+                <Form.Label
-            <Field name="seconds">{renderSecondsField}</Field>
+                  htmlFor="seconds"
+                  className="col-sm-4 col-md-4 col-xl-12 col-form-label text-sm-right text-xl-left"
+                >
+                  Time
+                </Form.Label>
+                <div className="col-sm-8 col-xl-12">
+                  <Field name="seconds">{renderSecondsField}</Field>
+                </div>
+              </div>
+            </div>
           </Form.Group>
           <Form.Group className="row">
-            <Form.Label htmlFor="tagIds" className="col-2 col-xl-12">
+            <Form.Label
+              htmlFor="tagIds"
+              className="col-sm-3 col-md-2 col-xl-12 col-form-label"
+            >
               Tags
             </Form.Label>
-            <div className="col-10 col-xl-12">
+            <div className="col-sm-9 col-md-10 col-xl-12">
               <Field name="tagIds">{renderTagsField}</Field>
             </div>
           </Form.Group>

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

@@ -93,7 +93,7 @@ export const DurationInput: React.FC<IProps> = (props: IProps) => {
   }
 
   return (
-    <Form.Group className={`duration-input ${props.className}`}>
+    <div className={`duration-input ${props.className}`}>
       <InputGroup>
         <Form.Control
           className="duration-control text-input"
@@ -122,6 +122,6 @@ export const DurationInput: React.FC<IProps> = (props: IProps) => {
           {renderButtons()}
         </InputGroup.Append>
       </InputGroup>
-    </Form.Group>
+    </div>
   );
 };

ui/v2.5/src/index.scss

@@ -217,6 +217,7 @@ div.react-select__control {
   border-color: $secondary;
   color: $text-color;
   cursor: pointer;
+  white-space: nowrap;
 
   .react-select__single-value,
   .react-select__input {

ui/v2.5/src/styles/_theme.scss

@@ -78,7 +78,7 @@ hr {
 .nav-tabs {
   border: none;
   margin: auto;
-  margin-bottom: 0.5rem;
+  margin-bottom: 1.5rem;
 
   .nav-link {
     border: none;