front: fix stdcm rolling stock image display

Signed-off-by: Theo Macron <[email protected]>

Author: Akctarus

front/src/applications/stdcm/components/StdcmForm/StdcmCard.tsx

@@ -27,7 +27,7 @@ const StdcmCard = ({
           'align-items-center'
         )}
       >
-        <span>{name}</span>
+        <span className="stdcm-consist-title">{name}</span>
         {title}
       </div>
     )}

front/src/applications/stdcm/components/StdcmForm/StdcmConsist.tsx

@@ -27,7 +27,7 @@ const ConsistCardTitle = ({
   if (!rollingStock) return null;
 
   return (
-    <div className="stdcm-consist-img w-75 d-flex justify-content-end align-self-end">
+    <div className="stdcm-consist-img">
       <RollingStock2Img rollingStock={rollingStock} />
     </div>
   );

front/src/styles/scss/applications/stdcm/_home.scss

@@ -51,9 +51,27 @@
       .stdcm-consist-container {
         width: 322px;
 
+        .stdcm-consist-title {
+          padding-right: 12px;
+          position: relative;
+        }
+
+        .stdcm-consist-title::after {
+          content: '';
+          background: linear-gradient(270deg, transparent 0px, rgba(235, 235, 234) 40px);
+          position: absolute;
+          left: 100%;
+          width: 40px;
+          height: 22px;
+          z-index: 1;
+        }
+
         .stdcm-consist-img {
           overflow: hidden;
+          padding-bottom: 12px;
           img {
+            object-fit: cover;
+            object-position: left;
             transform: scaleX(-1);
             max-width: 100%;
             height: 20px;