Make scene larger on larger screens

Author: Pierre-Gilles

front/src/routes/scene/edit-scene/EditScenePage.jsx

@@ -14,7 +14,7 @@ const EditScenePage = ({ children, ...props }) => (
     <div class="page-main">
       <div class="my-3 my-md-5">
         <AutoScrollMobile position="top" box_type={props.actionsGroupTypes} />
-        <div class="container mb-8">
+        <div class={cx(style.sceneContainer, 'mb-8')}>
           <div class="mb-4">
             <div class="row justify-content-between">
               <div class="col-8">

front/src/routes/scene/edit-scene/style.css

@@ -1,3 +1,29 @@
+.sceneContainer {
+  width: 100%;
+  padding-right: 0.75rem;
+  padding-left: 0.75rem;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+@media (min-width: 576px) {
+  .sceneContainer {
+    max-width: 540px;
+  }
+}
+
+@media (min-width: 768px) {
+  .sceneContainer {
+    max-width: 720px;
+  }
+}
+
+@media (min-width: 992px) {
+  .sceneContainer {
+    max-width: 90%;
+  }
+}
+
 .arrowDown {
   font-size: 35px;
 }
@@ -32,13 +58,12 @@
   }
 }
 
-
 .settings {
   opacity: 0;
   max-height: 0;
   visibility: hidden;
   transition: opacity 0.3s ease, max-height 0.3s ease;
-  padding: 0rem
+  padding: 0rem;
 }
 
 .settingsOpen {