Fix scene markers (#769)

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

@@ -56,7 +56,7 @@ export const PrimaryTags: React.FC<IPrimaryTags> = ({
     });
 
     return (
-      <Card className="primary-card col-12 col-sm-3 col-xl-6" key={id}>
+      <Card className="primary-card col-12 col-sm-6 col-xl-6" key={id}>
         <h3>{primaries[id].name}</h3>
         <Card.Body className="primary-card-body">{markers}</Card.Body>
       </Card>

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

@@ -54,7 +54,7 @@ export const SceneMarkersPanel: React.FC<ISceneMarkersPanelProps> = (
     );
 
   return (
-    <>
+    <div className="scene-markers-panel">
       <Button onClick={() => onOpenEditor()}>Create Marker</Button>
       <div className="container">
         <PrimaryTags
@@ -63,15 +63,13 @@ export const SceneMarkersPanel: React.FC<ISceneMarkersPanelProps> = (
           onEdit={onOpenEditor}
         />
       </div>
-      <div className="row">
-        <WallPanel
-          sceneMarkers={props.scene.scene_markers}
-          clickHandler={(marker) => {
-            window.scrollTo(0, 0);
-            onClickMarker(marker as GQL.SceneMarkerDataFragment);
-          }}
-        />
-      </div>
-    </>
+      <WallPanel
+        sceneMarkers={props.scene.scene_markers}
+        clickHandler={(marker) => {
+          window.scrollTo(0, 0);
+          onClickMarker(marker as GQL.SceneMarkerDataFragment);
+        }}
+      />
+    </div>
   );
 };

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

@@ -58,15 +58,6 @@
   }
 }
 
-.marker-container {
-  display: "flex";
-  flex-wrap: "nowrap";
-  margin-bottom: "20px";
-  overflow-x: "scroll";
-  overflow-y: "hidden";
-  white-space: "nowrap";
-}
-
 .studio-logo {
   margin-top: 1rem;
   max-height: 8rem;
@@ -304,3 +295,25 @@ textarea.scene-description {
     margin-right: 0;
   }
 }
+
+.scene-markers-panel {
+  .wall-item {
+    height: inherit;
+    min-height: 14rem;
+    width: calc(100% - 2rem);
+
+    &-missing {
+      font-size: 1.5rem;
+    }
+
+    &::before {
+      display: none;
+    }
+
+    &:hover {
+      .wall-item-container {
+        transform: scale(1);
+      }
+    }
+  }
+}