diff --git a/front/src/applications/operationalStudies/views/ManageTrainSchedule.tsx b/front/src/applications/operationalStudies/views/ManageTrainSchedule.tsx
index afd00347d3f..c63571eab13 100644
--- a/front/src/applications/operationalStudies/views/ManageTrainSchedule.tsx
+++ b/front/src/applications/operationalStudies/views/ManageTrainSchedule.tsx
@@ -94,15 +94,15 @@ const ManageTrainSchedule = () => {
id: 'rollingstock',
title: rollingStock ? (
-
+
- {rollingStock.name}
+ {rollingStock.name}
) : (

-
{t('tabs.rollingStock')}
+
{t('tabs.rollingStock')}
),
withWarning: rollingStockId === undefined,
diff --git a/front/src/modules/rollingStock/styles/_rollingStockCard.scss b/front/src/modules/rollingStock/styles/_rollingStockCard.scss
index 22dbda792fe..817f3532867 100644
--- a/front/src/modules/rollingStock/styles/_rollingStockCard.scss
+++ b/front/src/modules/rollingStock/styles/_rollingStockCard.scss
@@ -120,6 +120,7 @@
font-weight: bold;
overflow: hidden;
text-overflow: ellipsis;
+ white-space: nowrap;
}
.rollingstock-info-unit {
&.UM2 {
@@ -138,6 +139,7 @@
font-size: 0.7rem;
overflow: hidden;
text-overflow: ellipsis;
+ white-space: nowrap;
}
}
.rollingstock-info-middle {
@@ -157,6 +159,7 @@
font-size: 0.8rem;
overflow: hidden;
text-overflow: ellipsis;
+ white-space: nowrap;
}
}
}
diff --git a/front/src/modules/rollingStock/styles/_rollingStockSelector.scss b/front/src/modules/rollingStock/styles/_rollingStockSelector.scss
index b26e01021fb..2113965f6d9 100644
--- a/front/src/modules/rollingStock/styles/_rollingStockSelector.scss
+++ b/front/src/modules/rollingStock/styles/_rollingStockSelector.scss
@@ -15,6 +15,9 @@
.rollingstock-info-series {
position: relative;
font-weight: bold;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
.rollingstock-info-unit {
position: relative;
@@ -34,6 +37,9 @@
text-transform: uppercase;
vertical-align: text-bottom;
font-size: 0.7rem;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
}
}
@@ -82,6 +88,9 @@
border-radius: 4px;
padding: 0 8px;
font-size: 0.8rem;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
}
}
diff --git a/front/src/styles/scss/applications/operationalStudies/_managetrainschedule.scss b/front/src/styles/scss/applications/operationalStudies/_managetrainschedule.scss
index 29999c12a9c..71508880ea3 100644
--- a/front/src/styles/scss/applications/operationalStudies/_managetrainschedule.scss
+++ b/front/src/styles/scss/applications/operationalStudies/_managetrainschedule.scss
@@ -3,19 +3,29 @@
display: flex;
align-items: center;
width: 100%;
- .rolling-stock {
+
+ .rolling-stock-img {
width: 48px;
- overflow: hidden;
padding-bottom: 4px;
+ overflow: hidden;
+ mask-image: linear-gradient(90deg, black 90%, rgba(0, 0, 0, 0));
+ -webkit-mask-image: linear-gradient(90deg, black 90%, rgba(0, 0, 0, 0));
+
img {
height: 16px;
object-fit: cover;
object-position: left;
- transform: scaleX(-1);
- mask-image: linear-gradient(90deg, black 80%, rgba(0, 0, 0, 0));
- -webkit-mask-image: linear-gradient(90deg, black 80%, rgba(0, 0, 0, 0));
}
}
+
+ .rolling-stock-name {
+ margin-left: 8px;
+ width: calc(100% - 48px - 8px); // 48px for the rs image width, 8px for the left margin
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
img {
height: 24px;
}
diff --git a/front/src/styles/scss/common/components/_tabs.scss b/front/src/styles/scss/common/components/_tabs.scss
index 81cd38cc04c..aeab210da70 100644
--- a/front/src/styles/scss/common/components/_tabs.scss
+++ b/front/src/styles/scss/common/components/_tabs.scss
@@ -7,12 +7,14 @@
width: 100%;
.tabs.pills {
- overflow: auto;
justify-content: space-between;
min-height: 37.6px;
.tab {
flex-grow: 1;
+ // 4 pills to display in ManageTrainSchedule, with 3 gaps of 16px
+ width: calc((100% - 3 * 16px) / 4);
+ text-overflow: ellipsis;
}
}
}