front: fix filter panel style

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

Author: SharglutDev

front/src/modules/trainschedule/components/Timetable/FilterPanel.tsx

@@ -82,6 +82,8 @@ const FilterPanel = ({ toggleFilterPanel, timetableFilters }: FilterPanelProps)
             id="timetable-label-filter"
             name="timetable-label-filter"
             label={t('timetable.filterLabel')}
+            narrow
+            small
             value={nameLabelFilter}
             onChange={(e) => setNameLabelFilter(e.target.value)}
             placeholder={t('filterPlaceholder')}
@@ -94,6 +96,8 @@ const FilterPanel = ({ toggleFilterPanel, timetableFilters }: FilterPanelProps)
             getOptionValue={(option) => option.value}
             id="train-validity"
             label={t('timetable.validityFilter')}
+            narrow
+            small
             onChange={(selectedOption) => {
               if (selectedOption) {
                 setValidityFilter(selectedOption.value);
@@ -110,6 +114,8 @@ const FilterPanel = ({ toggleFilterPanel, timetableFilters }: FilterPanelProps)
             getOptionValue={(option) => option.value}
             id="train-type"
             label={t('timetable.trainType')}
+            narrow
+            small
             onChange={(selectedOption) => {
               if (selectedOption) {
                 setTrainTypeFilter(selectedOption.value);
@@ -128,6 +134,8 @@ const FilterPanel = ({ toggleFilterPanel, timetableFilters }: FilterPanelProps)
             id="timetable-rollingstock-filter"
             name="timetable-rollingstock-filter"
             label={t('timetable.advancedFilterLabel')}
+            narrow
+            small
             value={rollingStockFilter}
             onChange={(e) => setRollingStockFilter(e.target.value)}
             placeholder={t('timetable.rollingStockFilterPlaceholder')}
@@ -140,6 +148,8 @@ const FilterPanel = ({ toggleFilterPanel, timetableFilters }: FilterPanelProps)
             getOptionValue={(option) => option.value}
             id="train-keep-timetable"
             label={t('timetable.punctuality')}
+            narrow
+            small
             onChange={(selectedOption) => {
               if (selectedOption) {
                 setScheduledPointsHonoredFilter(selectedOption.value);

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

@@ -710,7 +710,7 @@
         }
 
         .filter-panel {
-          padding: 7px 20px 23px 7px;
+          padding: 17px 39px 23px 24px;
           background-color: var(--ambiantB5);
           border-top: solid 1px var(--white100);
           border-bottom: solid 1px rgba(0, 0, 0, 0.25);
@@ -723,18 +723,31 @@
             margin-bottom: 0;
           }
 
+          // TODO : remove this when height for small element is fixed in osrd-ui
+          .input-field-wrapper.small {
+            height: auto !important;
+          }
+
           .grid-template {
             display: grid;
             grid-template-columns: 1fr 1fr;
+            gap: 63px;
           }
 
           .close-filter {
             position: absolute;
             right: 12px;
-            top: 8px;
+            top: 6px;
             z-index: 1;
           }
 
+          #train-validity-and-label,
+          #schedule-point-honored-and-rollingstock {
+            display: flex;
+            flex-direction: column;
+            gap: 17px;
+          }
+
           .validity-filter {
             display: flex;
             margin-bottom: 16px;
@@ -746,15 +759,13 @@
           }
 
           .compositions-code {
-            align-self: start;
-            padding: 10px 0 0px 16px;
+            padding-top: 13px;
+
             label {
-              height: 24px;
-              line-height: 24px;
-              letter-spacing: 0;
-              text-align: left;
-              vertical-align: top;
+              font-size: 0.875rem;
+              height: 20px;
               font-weight: 600;
+              margin-bottom: 4px;
             }
             .composition-tag-filter {
               display: flex;
@@ -763,19 +774,18 @@
 
               button {
                 border-radius: 4px;
-                border: 1px solid rgba(182, 178, 175, 1);
-                background-color: rgba(250, 249, 245, 1);
+                border: 1px solid var(--grey30);
+                background-color: var(--ambiantB5);
+                color: var(--grey80);
                 font-size: 0.875rem;
                 font-weight: 400;
-                text-align: left;
-                line-height: 20px;
                 padding: 2px 8px;
               }
 
               button:hover {
                 background-color: var(--white100);
                 color: var(--black100);
-                border: 1px solid var(--black100);
+                border: 1px solid var(--grey90);
               }
 
               .selectedTag {