add scroll for tab table

src/pages/PublicNotice/ListPanel/index.js

@@ -136,7 +136,7 @@ const PublicNotice = () => {
                         <Grid item xs={12} sm={12} md={12} lg={12} sx={{ height:'100%', maxWidth: '100%',width: "-webkit-fill-available", backgroundColor: "#fff", mt: 3, mr:{xs:1,md:3}, ml:{xs:1,md:3}, mb: 3, ..._sx }}>
                             <TabContext value={selectedTab}>
                                 <Box sx={{ borderBottom: 1, borderColor: 'divider', overflowX: 'auto', overflowY:'auto' }}>
-                                    <TabList onChange={handleChange} aria-label="lab API tabs example" sx={{ display: 'flex', flexDirection: 'row' }}>
+                                    <TabList variant="scrollable" onChange={handleChange} aria-label="lab API tabs example" sx={{ display: 'flex', flexDirection: 'row' }}>
                                         <Tab aria-label={intl.formatMessage({id: 'processing'})} label={intl.formatMessage({id: 'processing'}) + " (" + submittedList?.length + ")"} value="1" />
                                         <Tab aria-label={intl.formatMessage({id: 'pendingPublish'})} label={intl.formatMessage({id: 'pendingPublish'}) + " (" + pendingPublishList?.length + ")"} value="3" />
                                         <Tab aria-label={intl.formatMessage({id: 'pendingPayment'})} label={intl.formatMessage({id: 'pendingPayment'}) + " (" + pendingPaymentList?.length + ")"} value="4" />
@@ -173,7 +173,7 @@ const PublicNotice = () => {
                         <Grid item xs={12} sx={{ minHeight: '80vh',height:"100%", maxHeight:'300vh', maxWidth: '95%', width: "-webkit-fill-available", backgroundColor: "#fff", mt: 3, mr:{xs:1,md:3}, ml:{xs:1,md:3}, mb: 3, ..._sx }}>
                             <TabContext value={selectedTab}>
                                 <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
-                                    <TabList onChange={handleChange} aria-label="lab API tabs example">
+                                    <TabList variant="scrollable" onChange={handleChange} aria-label="lab API tabs example">
                                         <Tab aria-label={intl.formatMessage({id: 'processing'})} label={intl.formatMessage({id: 'processing'}) + " (" + submittedList.length + ")"} value="1" />
                                         <Tab aria-label={intl.formatMessage({id: 'pendingPayment'})} label={intl.formatMessage({id: 'pendingPayment'}) + " (" + pendingPaymentList.length + ")"} value="3" />
                                         <Tab aria-label={intl.formatMessage({id: 'pendingPublish'})} label={intl.formatMessage({id: 'pendingPublish'}) + " (" + pendingPublishList.length + ")"} value="4" />