fix: use mui select for sizing

cypress/e2e/item/settings/itemSettings.cy.ts

@@ -398,11 +398,14 @@ describe('Item Settings', () => {
         cy.visit(buildItemSettingsPath(itemId));
 
         // default value
-        cy.get(`#${FILE_SETTING_MAX_WIDTH_ID}`).should('have.value', 'default');
+        cy.get(`#${FILE_SETTING_MAX_WIDTH_ID} + input`).should(
+          'have.value',
+          'default',
+        );
 
         const newMaxWidth = MaxWidth.Small;
-        cy.get(`#${FILE_SETTING_MAX_WIDTH_ID}`).select(newMaxWidth);
-        // cy.get(`[role="option"][data-value="${newMaxWidth}"]`).click();
+        cy.get(`#${FILE_SETTING_MAX_WIDTH_ID}`).click();
+        cy.get(`[role="option"][data-value="${newMaxWidth}"]`).click();
 
         cy.wait('@editItem').then(
           ({
@@ -437,7 +440,7 @@ describe('Item Settings', () => {
 
         cy.visit(buildItemSettingsPath(itemId));
 
-        cy.get(`#${FILE_SETTING_MAX_WIDTH_ID}`).should(
+        cy.get(`#${FILE_SETTING_MAX_WIDTH_ID} + input`).should(
           'have.value',
           FILE.settings.maxWidth,
         );

src/components/item/settings/file/FileMaxWidthSetting.tsx

@@ -1,8 +1,7 @@
-import { ChangeEvent } from 'react';
-
-import { styled } from '@mui/material';
+import { SelectChangeEvent } from '@mui/material';
 
 import { LocalFileItemType, MaxWidth, S3FileItemType } from '@graasp/sdk';
+import { Select } from '@graasp/ui';
 
 import { ExpandIcon } from 'lucide-react';
 
@@ -14,25 +13,7 @@ import { BUILDER } from '@/langs/constants';
 import ItemSettingProperty from '../ItemSettingProperty';
 import { SettingVariant, SettingVariantType } from '../settingTypes';
 
-const StyledSelect = styled('select')(({ theme }) => ({
-  // A reset of styles, including removing the default dropdown arrow
-  // appearance: 'none',
-  // Additional resets for further consistency
-  backgroundColor: 'white',
-  margin: 0,
-  fontFamily: 'inherit',
-  fontSize: 'inherit',
-  lineHeight: 'inherit',
-
-  // width: '100%',
-  minWidth: '15ch',
-  maxWidth: 'min-content',
-  height: theme.spacing(6),
-  cursor: 'pointer',
-  borderRadius: theme.spacing(0.5),
-  border: `1px solid ${theme.palette.divider}`,
-  padding: theme.spacing(0.5, 1),
-}));
+const maxWidthDefault = 'default';
 
 export const FileMaxWidthSetting = ({
   variant = SettingVariant.List,
@@ -46,29 +27,37 @@ export const FileMaxWidthSetting = ({
 
   const { mutate: editItem } = mutations.useEditItem();
 
-  const { maxWidth } = item.settings;
+  const { maxWidth = maxWidthDefault } = item.settings;
 
-  const onChangeMaxWidth = (e: ChangeEvent<HTMLSelectElement>) => {
+  const onChangeMaxWidth = (e: SelectChangeEvent<string>) => {
     editItem({
       id: item.id,
       settings: { maxWidth: e.target.value as MaxWidth },
     });
   };
 
   const control = (
-    <StyledSelect
+    <Select
       id={FILE_SETTING_MAX_WIDTH_ID}
       onChange={onChangeMaxWidth}
-      value={maxWidth}
-    >
-      {/* option used when the maxWidth is not set */}
-      <option value={undefined} hidden>
-        {translateEnum('default')}
-      </option>
-      {Object.values(MaxWidth).map((s) => (
-        <option value={s}>{translateEnum(s)}</option>
-      ))}
-    </StyledSelect>
+      value={maxWidth as string}
+      values={[
+        {
+          value: maxWidthDefault,
+          text: translateEnum(maxWidthDefault),
+          disabled: true,
+        },
+        ...Object.values(MaxWidth).map((s) => ({
+          value: s,
+          text: translateEnum(s),
+        })),
+      ]}
+      size="small"
+      sx={{
+        // this ensure the select stretches to be the same height as the buttons
+        height: '100%',
+      }}
+    />
   );
 
   switch (variant) {