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}
) : (
rolling stock - {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; } } }