@applica-software-guru/react-admin 1.5.353 → 1.5.354

package/package.json

@@ -108,5 +108,5 @@
   "type": "module",
   "types": "dist/index.d.ts",
   "typings": "dist/index.d.ts",
-  "version": "1.5.353"
+  "version": "1.5.354"
 }

package/src/components/ra-lists/ListTabsToolbar.tsx

@@ -1,4 +1,5 @@
-import { Tab, Tabs } from '@mui/material';
+import { Box, Tab, Tabs } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
 import { useListContext, useResourceContext } from 'react-admin';
 import { ReactElement, useCallback, useEffect, useMemo, useRef } from 'react';
 import { useListViewContext } from './ListViewProvider';
@@ -23,6 +24,7 @@ function ListTabsToolbar(props: ListTabsToolbarProps) {
   const defaultTabIndex = useMemo(() => tabs.findIndex((tab) => tab.default) ?? 0, [tabs]);
   const { setCurrentTabKey } = useListViewContext();
   const resource = useResourceContext();
+  const theme = useTheme();
 
   const [searchParams, setSearchParams] = useSearchParams();
 
@@ -89,13 +91,43 @@ function ListTabsToolbar(props: ListTabsToolbarProps) {
     [buildFilters, setCurrentTab]
   );
 
-  return tabs.length > 0 ? (
-    <Tabs value={Number(currentTab)} onChange={handleChange}>
-      {tabs.map((tab) => (
-        <Tab icon={tab.icon} key={tab.key} label={tab.label} />
-      ))}
-    </Tabs>
-  ) : null;
+  return (
+    <Box sx={{ width: '100%' }}>
+      {tabs.length > 0 ? (
+        <Tabs
+          value={Number(currentTab)}
+          onChange={handleChange}
+          allowScrollButtonsMobile
+          variant="scrollable"
+          scrollButtons="auto"
+          sx={{
+            width: '100%',
+            '.MuiTabs-scrollButtons.Mui-disabled': {
+              opacity: 0.2
+            }
+          }}
+        >
+          {tabs.map((tab) => (
+            <Tab
+              icon={tab.icon}
+              key={tab.key}
+              label={tab.label}
+              sx={{
+                flex: '0 0 auto',
+                lineHeight: 1,
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                '& .MuiTab-iconWrapper': {
+                  marginRight: theme.spacing(0.5)
+                }
+              }}
+            />
+          ))}
+        </Tabs>
+      ) : null}
+    </Box>
+  );
 }
 
 export { type ListTabToolbarConfig, ListTabsToolbar };

package/src/components/ra-lists/ListToolbar.tsx

@@ -1,3 +1,4 @@
+// ListToolbar.tsx
 import React, { ReactElement, memo } from 'react';
 import { styled, useTheme } from '@mui/material/styles';
 import PropTypes from 'prop-types';
@@ -27,17 +28,19 @@ function ListToolbarComp(props: ListToolbarPropsExtended): ReactElement | null {
     <FilterSidebarContext.Provider value={{ hasFilterSidebar }}>
       <FilterContext.Provider value={filters}>
         <Root className={className}>
-          <Box sx={{ display: 'flex', flex: 1, flexDirection: 'column', gap: 2 }}>
+          <Box sx={{ display: 'flex', flex: 1, flexDirection: 'column', gap: 2, width: '100%' }}>
             {tabs ? <ListTabsToolbar tabs={tabs} /> : null}
             <Box
               sx={{
                 display: 'flex',
                 flexDirection: 'row',
                 alignItems: 'center',
+                justifyContent: 'flex-end',
                 gap: 2,
                 p: hasTabs ? 0 : theme.spacing(2.5),
                 px: theme.spacing(2.5),
-                pb: theme.spacing(2.5)
+                pb: theme.spacing(2.5),
+                width: '100%'
               }}
             >
               {isMobile && hasFilterSidebar ? (
@@ -70,17 +73,19 @@ function ListToolbarComp(props: ListToolbarPropsExtended): ReactElement | null {
     </FilterSidebarContext.Provider>
   ) : (
     <Root className={className}>
-      <Box sx={{ display: 'flex', flex: 1, flexDirection: 'column', gap: 2 }}>
+      <Box sx={{ display: 'flex', flex: 1, flexDirection: 'column', gap: 2, width: '100%' }}>
         {tabs ? <ListTabsToolbar tabs={tabs} /> : null}
         <Box
           sx={{
             display: 'flex',
             flexDirection: 'row',
             alignItems: 'center',
+            justifyContent: 'flex-end',
             gap: 2,
             p: hasTabs ? 0 : theme.spacing(2.5),
             px: theme.spacing(2.5),
-            pb: theme.spacing(2.5)
+            pb: theme.spacing(2.5),
+            width: '100%'
           }}
         >
           {filters