fix: update settings page for mobile viewport (#18991)

## Description

- This PR fixes
https://github.com/twentyhq/core-team-issues/issues/2313#issuecomment-4116380772
- Fixes Admin Panel Apps table, Data model table and Roles table
- made data model table scrollable for mobile viewport keeping name
column fixed.


## Visual Appearance

## Before

- Roles Table

<img width="636" height="1039" alt="Screenshot 2026-03-26 at 1 28 30 PM"
src="https://github.com/user-attachments/assets/fa7532bd-aeb0-4c8f-a40e-08cc976cd2c2"
/>



- Admin Apps table

<img width="610" height="998" alt="Screenshot 2026-03-26 at 1 28 12 PM"
src="https://github.com/user-attachments/assets/8712473c-350f-46f8-9e68-9cb0a5fa9d80"
/>





- Data Model table



https://github.com/user-attachments/assets/c48075c5-56dd-4b76-acd4-76330d6dab94






## After

- Roles Table

<img width="761" height="1045" alt="Screenshot 2026-03-26 at 1 23 19 PM"
src="https://github.com/user-attachments/assets/17099956-816a-4d41-b987-563f6931a995"
/>

- Admin Apps table

<img width="794" height="1044" alt="Screenshot 2026-03-26 at 1 23 34 PM"
src="https://github.com/user-attachments/assets/0463a087-2363-4192-9adb-7d27076f303a"
/>


- Data model Table


https://github.com/user-attachments/assets/fd44e353-cc7c-44cf-bda0-d2f3cd531f2e

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
Co-authored-by: Charles Bochet <charlesBochet@users.noreply.github.com>

packages/twenty-front/src/modules/settings/roles/components/SettingsRolesTableHeader.tsx

@@ -6,7 +6,10 @@ import { Trans } from '@lingui/react/macro';
 export const SettingsRolesTableHeader = () => {
   return (
     <Table>
-      <TableRow gridAutoColumns="332px 3fr 2fr 1fr">
+      <TableRow
+        mobileGridAutoColumns="5fr 1fr 1fr 35px"
+        gridAutoColumns="332px 3fr 2fr 1fr"
+      >
         <TableHeader>
           <Trans>Name</Trans>
         </TableHeader>
@@ -14,6 +17,7 @@ export const SettingsRolesTableHeader = () => {
           <Trans>Assigned to</Trans>
         </TableHeader>
         <TableHeader></TableHeader>
+        <TableHeader></TableHeader>
       </TableRow>
     </Table>
   );

packages/twenty-front/src/modules/settings/roles/components/SettingsRolesTableRow.tsx

@@ -83,6 +83,7 @@ export const SettingsRolesTableRow = ({ role }: SettingsRolesTableRowProps) => {
       <TableRow
         key={role.id}
         gridAutoColumns="332px 3fr 2fr 1fr"
+        mobileGridAutoColumns="5fr 1fr 1fr 35px"
         to={getSettingsPath(SettingsPath.RoleDetail, { roleId: role.id })}
       >
         <TableCell>