fixup! front: redesign top left of the scenario page

Author: theocrsb

front/src/applications/operationalStudies/views/Scenario.tsx

@@ -138,7 +138,7 @@ const Scenario = () => {
             >
               <div className="scenario-sidemenu">
                 {scenario && (
-                  <div className="scenario-top">
+                  <div>
                     <div className="scenario-details-name">
                       <span
                         className="flex-grow-1 scenario-name text-truncate"
@@ -160,23 +160,23 @@ const Scenario = () => {
                           <ChevronLeft />
                         </button>
                       </div>
+                      <button
+                        data-testid="editScenario"
+                        className="scenario-details-modify-button update-scenario"
+                        type="button"
+                        aria-label={t('editScenario')}
+                        onClick={() =>
+                          openModal(
+                            <AddAndEditScenarioModal editionMode scenario={scenario} />,
+                            'xl',
+                            'no-close-modal'
+                          )
+                        }
+                        title={t('editScenario')}
+                      >
+                        <Pencil />
+                      </button>
                     </div>
-                    <button
-                      data-testid="editScenario"
-                      className="scenario-details-modify-button update-scenario"
-                      type="button"
-                      aria-label={t('editScenario')}
-                      onClick={() =>
-                        openModal(
-                          <AddAndEditScenarioModal editionMode scenario={scenario} />,
-                          'xl',
-                          'no-close-modal'
-                        )
-                      }
-                      title={t('editScenario')}
-                    >
-                      <Pencil />
-                    </button>
 
                     <div className="scenario-details-electrical-profile-set">
                       {scenario.electrical_profile_set_id

front/src/styles/scss/applications/operationalStudies/_scenario.scss

@@ -2,7 +2,7 @@
   --navbar-height: 4.0625rem;
   --content-height: calc(100vh - var(--navbar-height) - 0.25rem);
   position: relative;
-  background-color: #e9e8e1;
+  background-color: var(--ambientB10);
   font-family: 'IBM Plex Sans';
   .scenario-container {
     margin: 0;
@@ -121,26 +121,6 @@
       }
     }
 
-    .update-scenario {
-      display: none;
-      position: absolute;
-      right: 2.5rem;
-      top: 5.813rem;
-      padding: 0.188rem 0.5rem;
-      transition: 0.2s;
-      height: 2rem;
-      width: 2rem;
-      border-radius: 0.25rem;
-      box-shadow: 0 0 0 0.094rem rgba(255, 255, 255, 1) inset;
-      opacity: 1;
-      background-color: var(--ambientB10);
-      color: var(--primary60);
-      &:hover {
-        background-color: var(--white);
-        color: var(--primary80);
-      }
-    }
-
     .scenario-details-name {
       display: flex;
       align-items: center;
@@ -160,25 +140,17 @@
         padding: 0.25rem 0.5rem;
         font-size: 1rem;
         border-radius: 4px;
-        .scenario-details-modify-button-text {
-          transition: opacity 0.2s;
-          opacity: 0;
-          font-size: 0.9rem;
-          margin-right: 0.5rem;
-        }
         &:hover {
           background-color: var(--secondary);
           color: var(--white);
-          .scenario-details-modify-button-text {
-            opacity: 1;
-          }
         }
       }
     }
     .scenario-description-collapsed {
       display: flex;
       justify-content: space-between;
-      button {
+      position: relative;
+      .scenario-details-modify-button {
         padding-bottom: 0.188rem;
         padding-left: 0.125rem;
         margin-top: 0.25rem;
@@ -189,6 +161,27 @@
         border-radius: 0.313rem 0px 0px 0.313rem;
         transform: translateX(1.5rem);
       }
+
+    .update-scenario {
+      display: none;
+      position: absolute;
+      right: 2.5rem;
+      bottom: -2rem;
+      padding: 0.188rem 0.5rem;
+      transition: 0.2s;
+      height: 2rem;
+      width: 2rem;
+      border-radius: 0.25rem;
+      box-shadow: 0 0 0 0.094rem rgba(255, 255, 255, 1) inset;
+      opacity: 1;
+      background-color: var(--ambientB10);
+      color: var(--primary60);
+      &:hover {
+        background-color: var(--white);
+        color: var(--primary80);
+      }
+    }
+
     }
     .scenario-details-electrical-profile-set {
       margin-top: 0.375rem;