front: center text on stdcm error

fix #10135 Signed-off-by: Benoit Simard <[email protected]>
OpenRailAssociation · Jan 7, 2025 · 6a4faa2 · 6a4faa2
1 parent a4190de
commit 6a4faa2
Showing 1 changed file with 25 additions and 9 deletions.
diff --git a/front/src/styles/scss/applications/stdcm/_home.scss b/front/src/styles/scss/applications/stdcm/_home.scss
@@ -23,8 +23,10 @@
 
     .stdcm-scenario-explorer {
       width: 322px;
+
       .scenario-explorator-card {
         padding: 8px 51px 8px 0;
+
         .scenario-explorator-card,
         .scenario-explorator-card-noscenario {
           font-size: 1.25rem;
@@ -37,7 +39,9 @@
       align-items: center;
       min-width: 450px;
       width: 450px;
+
       .osrd-config-item-container {
+
         .col-3,
         .col-6 {
           padding: 0 5px !important;
@@ -70,6 +74,7 @@
         .stdcm-consist-img {
           overflow: hidden;
           padding-bottom: 12px;
+
           img {
             object-fit: cover;
             object-position: left;
@@ -87,6 +92,7 @@
         height: 280px;
         margin: 12px 0;
       }
+
       .stdcm-simulation-itinerary {
         display: flex;
         flex-direction: column;
@@ -95,12 +101,12 @@
         position: relative;
         align-items: center;
 
-        > div:not(.stdcm-loader) {
+        >div:not(.stdcm-loader) {
           width: 100%;
         }
 
         .stdcm-vias-list,
-        * > .stdcm-vias-bundle {
+        *>.stdcm-vias-bundle {
           display: flex;
           flex-direction: column;
           gap: 16px;
@@ -122,6 +128,7 @@
             transform: translateY(-45px);
             margin-bottom: -30px; // To make the button clicked bounce top
           }
+
           100% {
             opacity: 1;
             height: 296px; // height of add OP button + intermedita OP card
@@ -162,18 +169,17 @@
             display: flex;
             justify-content: space-between;
             padding-top: 18px;
+
             button {
               border-radius: 5px;
               border: 0.5px solid rgba(121, 118, 113, 1);
               box-shadow:
                 0 1px 1px rgba(255, 255, 255, 0.46) inset,
                 0 -1px 1px rgba(148, 145, 142, 1) inset,
                 0 1px 2px rgba(0, 0, 0, 0.25);
-              background-image: linear-gradient(
-                180deg,
-                rgba(226, 226, 222, 1) 0%,
-                rgba(211, 209, 207, 1) 100%
-              );
+              background-image: linear-gradient(180deg,
+                  rgba(226, 226, 222, 1) 0%,
+                  rgba(211, 209, 207, 1) 100%);
               color: #494641;
               padding: 4px 12px 8px 12px;
               max-width: fit-content;
@@ -211,27 +217,35 @@
           0% {
             transform: rotate(0deg);
           }
+
           12% {
             transform: rotate(1deg);
           }
+
           24% {
             transform: rotate(0eg);
           }
+
           36% {
             transform: rotate(-1deg);
           }
+
           47% {
             transform: rotate(0deg);
           }
+
           59% {
             transform: rotate(1deg);
           }
+
           70% {
             transform: rotate(0eg);
           }
+
           85% {
             transform: rotate(-1deg);
           }
+
           100% {
             transform: rotate(0deg);
           }
@@ -258,6 +272,7 @@
     .banner-content {
       padding: 0 0 16px 378px;
       background: linear-gradient(180deg, rgba(239, 243, 245) 40px, rgba(233, 239, 242) 40px);
+
       .status {
         width: 466px;
         display: flex;
@@ -288,10 +303,11 @@
       }
 
       .error-message {
-        padding-top: 22px;
-        max-width: 546px;
+        padding: 22px 8px 0 8px;
+        width: 466px;
         color: rgba(49, 46, 43, 1);
         line-height: 24px;
+        text-align: center;
       }
     }
   }