front: wrap output table

Signed-off-by: nncluzu <[email protected]>

Author: kmer2016

front/src/applications/operationalStudies/components/Scenario/ScenarioContent.tsx

@@ -235,6 +235,7 @@ const ScenarioContent = ({
                 projectionData={projectionData}
                 conflicts={conflicts}
                 timetableItemsWithDetails={timetableItemsWithDetails}
+                activeBoards={activeBoards}
                 updateTrainDepartureTime={updateTrainDepartureTime}
                 isMapDisplayed={activeBoards.has('map')}
               />

front/src/applications/operationalStudies/views/SimulationResults.tsx

@@ -37,6 +37,7 @@ import {
 import BoardWrapper from '../components/Scenario/BoardWrapper';
 import { useScenarioContext } from '../hooks/useScenarioContext';
 import useSimulationResults from '../hooks/useSimulationResults';
+import type { Board } from '../types';
 
 const SPEED_SPACE_CHART_HEIGHT = 521.5;
 const HANDLE_TAB_RESIZE_HEIGHT = 20;
@@ -47,6 +48,7 @@ type SimulationResultsProps = {
   projectionData?: ProjectionData;
   timetableItemsWithDetails: TimetableItemWithDetails[];
   conflicts?: Conflict[];
+  activeBoards: Set<Board>;
   updateTrainDepartureTime: (trainId: TimetableItemId, newDepartureTime: Date) => Promise<void>;
   isMapDisplayed?: boolean;
 };
@@ -56,6 +58,7 @@ const SimulationResults = ({
   projectionData,
   timetableItemsWithDetails,
   conflicts = [],
+  activeBoards,
   updateTrainDepartureTime,
   isMapDisplayed,
 }: SimulationResultsProps) => {
@@ -289,30 +292,31 @@ const SimulationResults = ({
             </div>
           </BoardWrapper>
 
-          {/* TIME STOPS TABLE */}
-          <div className="time-stop-outputs">
-            <p className="mt-2 mb-3 ml-3 font-weight-bold">
-              {t('simulationResults.timetableOutput')}
-            </p>
-            <TimesStopsOutput
-              simulatedTimetableItem={simulationResults.simulation}
-              simulationSummary={simulationSummary}
-              operationalPoints={simulationResults.pathProperties.operationalPoints}
-              selectedTrain={simulationResults.train}
-              path={simulationResults.path}
-            />
-          </div>
-
-          {/* SIMULATION EXPORT BUTTONS */}
-          <SimulationResultExport
-            path={simulationResults.path}
-            scenarioData={scenarioData}
-            train={simulationResults.train}
-            simulation={simulationResults.simulation}
-            pathProperties={simulationResults.pathProperties}
-            rollingStock={simulationResults.rollingStock}
-            mapCanvas={mapCanvas}
-          />
+          <BoardWrapper
+            hidden={!activeBoards.has('tables')}
+            name={t('simulationResults.timetableOutput')}
+          >
+            <div className="time-stop-outputs">
+              {/* TIME STOPS TABLE */}
+              <TimesStopsOutput
+                simulatedTimetableItem={simulationResults.simulation}
+                simulationSummary={simulationSummary}
+                operationalPoints={simulationResults.pathProperties.operationalPoints}
+                selectedTrain={simulationResults.train}
+                path={simulationResults.path}
+              />
+              {/* SIMULATION EXPORT BUTTONS */}
+              <SimulationResultExport
+                path={simulationResults.path}
+                scenarioData={scenarioData}
+                train={simulationResults.train}
+                simulation={simulationResults.simulation}
+                pathProperties={simulationResults.pathProperties}
+                rollingStock={simulationResults.rollingStock}
+                mapCanvas={mapCanvas}
+              />
+            </div>
+          </BoardWrapper>
         </>
       )}
     </div>

front/src/modules/timesStops/styles/_timesStopsDatasheet.scss

@@ -1,10 +1,4 @@
 .time-stops-datasheet {
-  padding-bottom: 16px;
-  border-radius: 10px;
-  box-shadow:
-    0px 1px 0px rgba(255, 255, 255, 1) inset,
-    0px 4px 7px -3px rgba(255, 171, 88, 0.17),
-    0px 2px 4px rgba(0, 0, 0, 0.22);
   background-color: var(--ambientB15);
   --dsg-cell-background-color: var(--white100);
   --dsg-cell-disabled-background-color: var(--white100);
@@ -55,6 +49,8 @@
 
   .dsg-cell.dsg-cell-header {
     font-size: 0.75rem;
+    box-shadow: 0 1px 0 0 inset var(--white100);
+    background-color: var(--ambientB15);
   }
 
   .dsg-cell-gutter {

front/src/styles/scss/applications/operationalStudies/_scenario.scss

@@ -686,5 +686,8 @@
     position: relative;
     width: 100%;
     height: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
   }
 }

front/src/styles/scss/applications/operationalStudies/_simulationresults.scss

@@ -4,6 +4,10 @@
   flex-direction: column;
   gap: 16px;
 
+  > :last-child {
+    margin-bottom: 16px;
+  }
+
   .osrd-simulation-container {
     position: relative;
     border-radius: 4px;
@@ -20,10 +24,6 @@
       0 2px 4px rgba(0, 0, 0, 0.22);
   }
 
-  .time-stop-outputs {
-    margin: 0 30px 28px 38px;
-  }
-
   .driver-train-schedule {
     background-color: white;
     padding: 16px;
@@ -34,7 +34,12 @@
   .simulation-sheet-container {
     display: flex;
     justify-content: space-between;
-    padding: 0 33.5px 75px 42.5px;
+    padding: 16px;
+    width: 100%;
+    box-shadow: 0 1px 0 0 inset var(--black10);
+    border-radius: 0 0 8px 8px;
+    background-color: var(--ambiantB15);
+
     button {
       background-color: var(--black5);
       font-weight: 500;