diff --git a/front/src/modules/timesStops/hooks/useTimeStopsColumns.tsx b/front/src/modules/timesStops/hooks/useTimeStopsColumns.tsx index f1ae29cb5f1..59e2e1d0cbb 100644 --- a/front/src/modules/timesStops/hooks/useTimeStopsColumns.tsx +++ b/front/src/modules/timesStops/hooks/useTimeStopsColumns.tsx @@ -10,6 +10,7 @@ import { disabledTextColumn } from '../helpers/utils'; import ReadOnlyTime from '../ReadOnlyTime'; import TimeInput from '../TimeInput'; import { TableType, type TimeExtraDays, type TimeStopsRow } from '../types'; +import { NO_BREAK_SPACE } from 'utils/strings'; const timeColumn = (isOutputTable: boolean) => ({ @@ -167,6 +168,18 @@ export const useTimeStopsColumns = ( alignRight: true, }) ), + ...(isOutputTable && { + component: ({ rowData }) => { + const [digits, unit] = rowData.theoreticalMargin?.split(NO_BREAK_SPACE) ?? []; + return ( + + {digits} + {NO_BREAK_SPACE} + {unit} + + ); + }, + }), cellClassName: ({ rowData }) => cx({ invalidCell: !isOutputTable && !rowData.isMarginValid, diff --git a/front/src/modules/timesStops/styles/_timesStopsDatasheet.scss b/front/src/modules/timesStops/styles/_timesStopsDatasheet.scss index e6def4ba976..961ad6c9616 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,8 @@ color: var(--grey50); } - .invalidCell { - color: red !important; + .smallUnit { + font-size: 0.65rem; } .repeatedValue {