From 2fdc90fb9a8e3670bceeee2cdc05f331ae36c0aa Mon Sep 17 00:00:00 2001
From: Alice Khoudli <alice.khoudli@polytechnique.org>
Date: Mon, 25 Nov 2024 16:26:12 +0100
Subject: [PATCH] front: reduce font size of min/100km in timesstops output
 table

Signed-off-by: Alice Khoudli <alice.khoudli@polytechnique.org>
---
 .../timesStops/hooks/useTimeStopsColumns.tsx  | 25 +++++++++++++++++--
 .../styles/_timesStopsDatasheet.scss          | 16 ++++++++++--
 2 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/front/src/modules/timesStops/hooks/useTimeStopsColumns.tsx b/front/src/modules/timesStops/hooks/useTimeStopsColumns.tsx
index f1ae29cb5f1..1cc645d1b7d 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,26 @@ export const useTimeStopsColumns = <T extends TimeStopsRow>(
             alignRight: true,
           })
         ),
+        ...(isOutputTable && {
+          component: ({ rowData }) => {
+            const [digits, unit] = rowData.theoreticalMargin?.split(NO_BREAK_SPACE) ?? [];
+            return (
+              <span className="dsg-input dsg-input-align-right self-center text-nowrap">
+                {digits}
+                {NO_BREAK_SPACE}
+                {unit === 'min/100km' ? (
+                  <span className="small-unit-container">
+                    <span>min/</span>
+                    <br />
+                    <span>100km</span>
+                  </span>
+                ) : (
+                  unit
+                )}
+              </span>
+            );
+          },
+        }),
         cellClassName: ({ rowData }) =>
           cx({
             invalidCell: !isOutputTable && !rowData.isMarginValid,
@@ -174,8 +196,7 @@ export const useTimeStopsColumns = <T extends TimeStopsRow>(
           }),
         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..473d67053bf 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: 0.5rem;
+    text-align: left;
+    vertical-align: -10%;
   }
 
   .repeatedValue {