Fix scene edit panel layout

stashapp · Sep 17, 2021 · 851fdc5 · 851fdc5
1 parent 501ed7c
commit 851fdc5
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 5 deletions.
diff --git a/ui/v2.5/src/components/Changelog/versions/v0100.md b/ui/v2.5/src/components/Changelog/versions/v0100.md
@@ -14,4 +14,5 @@
 
 ### 🐛 Bug fixes
 * Disabled float-on-scroll player on mobile devices. ([#1721](https://github.com/stashapp/stash/pull/1721))
-* Fix Create Marker form on small devices. ([#1718](https://github.com/stashapp/stash/pull/1718))
+* Fix Create Marker form on small devices. ([#1718](https://github.com/stashapp/stash/pull/1718))
+* Fix Scene Edit Panel form layout for mobile and desktop. ([#1737](https://github.com/stashapp/stash/pull/1737))
diff --git a/ui/v2.5/src/components/Scenes/SceneDetails/SceneEditPanel.tsx b/ui/v2.5/src/components/Scenes/SceneDetails/SceneEditPanel.tsx
@@ -644,7 +644,7 @@ export const SceneEditPanel: React.FC<IProps> = ({
           </div>
         </div>
         <div className="form-container row px-3">
-          <div className="col-12 col-lg-6 col-xl-12">
+          <div className="col-12 col-lg-7 col-xl-12">
             {renderTextField("title", intl.formatMessage({ id: "title" }))}
             <Form.Group controlId="url" as={Row}>
               <Col xs={3} className="pr-0 url-label">
@@ -685,8 +685,12 @@ export const SceneEditPanel: React.FC<IProps> = ({
             <Form.Group controlId="galleries" as={Row}>
               {FormUtils.renderLabel({
                 title: intl.formatMessage({ id: "galleries" }),
+                labelProps: {
+                  column: true,
+                  sm: 3,
+                },
               })}
-              <Col xs={9}>
+              <Col sm={9}>
                 <GallerySelect
                   galleries={galleries}
                   onSelect={(items) => onSetGalleries(items)}
@@ -697,8 +701,12 @@ export const SceneEditPanel: React.FC<IProps> = ({
             <Form.Group controlId="studio" as={Row}>
               {FormUtils.renderLabel({
                 title: intl.formatMessage({ id: "studios" }),
+                labelProps: {
+                  column: true,
+                  sm: 3,
+                },
               })}
-              <Col xs={9}>
+              <Col sm={9}>
                 <StudioSelect
                   onSelect={(items) =>
                     formik.setFieldValue(
@@ -815,7 +823,7 @@ export const SceneEditPanel: React.FC<IProps> = ({
               </ul>
             </Form.Group>
           </div>
-          <div className="col-12 col-lg-6 col-xl-12">
+          <div className="col-12 col-lg-5 col-xl-12">
             <Form.Group controlId="details">
               <Form.Label>
                 <FormattedMessage id="details" />