diff --git a/front/src/modules/timesStops/hooks/useTimeStopsColumns.tsx b/front/src/modules/timesStops/hooks/useTimeStopsColumns.tsx index f1ae29cb5f1..a1f5d407a81 100644 --- a/front/src/modules/timesStops/hooks/useTimeStopsColumns.tsx +++ b/front/src/modules/timesStops/hooks/useTimeStopsColumns.tsx @@ -5,6 +5,8 @@ import { keyColumn, type Column, checkboxColumn, createTextColumn } from 'react- import type { CellComponent } from 'react-datasheet-grid/dist/types'; import { useTranslation } from 'react-i18next'; +import { NO_BREAK_SPACE } from 'utils/strings'; + import { marginRegExValidation } from '../consts'; import { disabledTextColumn } from '../helpers/utils'; import ReadOnlyTime from '../ReadOnlyTime'; @@ -167,6 +169,27 @@ export const useTimeStopsColumns = ( alignRight: true, }) ), + ...(isOutputTable && { + component: ({ rowData }) => { + if (!rowData.theoreticalMargin) return null; + const [digits, unit] = rowData.theoreticalMargin.split(NO_BREAK_SPACE); + return ( + + {digits} + {NO_BREAK_SPACE} + {unit === 'min/100km' ? ( + + min/ +
+ 100km +
+ ) : ( + unit + )} +
+ ); + }, + }), cellClassName: ({ rowData }) => cx({ invalidCell: !isOutputTable && !rowData.isMarginValid, @@ -174,8 +197,7 @@ export const useTimeStopsColumns = ( }), title: t('theoreticalMargin'), headerClassName: 'padded-header', - minWidth: 100, - maxWidth: 130, + ...fixedWidth(isOutputTable ? 75 : 110), disabled: ({ rowIndex }) => isOutputTable || rowIndex === allWaypoints.length - 1, }, ...extraOutputColumns, diff --git a/front/src/modules/timesStops/styles/_timesStopsDatasheet.scss b/front/src/modules/timesStops/styles/_timesStopsDatasheet.scss index ebfd9318686..9273c5be513 100644 --- a/front/src/modules/timesStops/styles/_timesStopsDatasheet.scss +++ b/front/src/modules/timesStops/styles/_timesStopsDatasheet.scss @@ -11,6 +11,10 @@ --dsg-header-text-color: var(--grey50); --dsg-header-active-text-color: var(--black100); + .invalidCell { + color: red !important; + } + .padded-header > * { padding-inline: 8px 16px; } @@ -19,8 +23,16 @@ color: var(--grey50); } - .invalidCell { - color: red !important; + .self-center { + align-self: center; + } + + .small-unit-container { + display: inline-block; + font-size: 0.5rem; + line-height: 8px; + text-align: left; + vertical-align: -10%; } .repeatedValue {