[2350] Reduce default tab width to fit page label length

Bug: #2350
Signed-off-by: Florian ROUËNÉ <florian.rouene@obeosoft.com>

CHANGELOG.adoc

@@ -92,6 +92,7 @@ This will be fixed in the next version.
 - https://github.com/eclipse-sirius/sirius-web/issues/2329[#2329] [form] Change the default representation in the details view for non containment reference from a select widget to a reference widget.
 - https://github.com/eclipse-sirius/sirius-web/issues/2314[#2314] [diagram] Add feedback on edge selection on react-flow diagrams
 - https://github.com/eclipse-sirius/sirius-web/issues/2313[#2313] [diagram] Support edge palette on react-flow diagrams
+- https://github.com/eclipse-sirius/sirius-web/issues/2350[#2350] [form] Change the default tab width in form to fit the page label length.
 
 == v2023.8.0
 

packages/forms/frontend/sirius-components-forms/src/form/Form.tsx

@@ -119,14 +119,16 @@ export const Form = ({ editingContextId, form, widgetSubscriptions, setSelection
       />
     );
   }
+  const maxWidth: number = state.pages.length > 1 ? 100 : 390; // 390 is the maxWidth to fit to the default Details view
+  const variant: 'scrollable' | 'standard' = state.pages.length > 1 ? 'scrollable' : 'standard';
   return (
     <div data-testid="form" className={classes.form}>
       <div className={classes.pagesListAndToolbar}>
         <Tabs
           classes={{ root: classes.tabsRoot }}
           value={state.selectedPage.id}
           onChange={onChangeTab}
-          variant="scrollable"
+          variant={variant}
           scrollButtons="on"
           textColor="primary"
           indicatorColor="primary">
@@ -135,7 +137,9 @@ export const Form = ({ editingContextId, form, widgetSubscriptions, setSelection
               <Tab
                 {...a11yProps(page.id)}
                 classes={{ root: classes.tabRoot }}
+                style={{ minWidth: 1, maxWidth: maxWidth }} // Set minWidth to one to force tab width to fit the page label length
                 value={page.id}
+                title={page.label}
                 label={
                   <div className={classes.tabLabel}>
                     <div className={classes.tabLabelText}>{page.label}</div>