Update grid item breakpoints for responsive layout in TitleBar and AllEmailList components

Author: hppanpaliya

react/src/components/common/TitleBar.js

@@ -43,7 +43,7 @@ const TitleBar = () => {
         TrashMail
       </p>
 
-      <Grid item xs={12} sm={2}>
+      <Grid item xs={12} md={2}>
         <Box
           sx={{
             display: "flex",

react/src/components/pages/AllEmailList/index.js

@@ -96,8 +96,8 @@ const AllEmailList = () => {
     <>
       <Grid container spacing={2} sx={{ height: "100%" }}>
         <ButtonSection />
-        <Grid item xs={12} sm={1} sx={{ marginTop: isMobile ? "0vh" : "6vh" }}></Grid>
-        <Grid item xs={12} sm={8} sx={{ marginTop: isMobile ? "0vh" : "6vh" }}>
+        <Grid item xs={12} md={1} sx={{ marginTop: isMobile ? "0vh" : "6vh" }}></Grid>
+        <Grid item xs={12} md={8} sx={{ marginTop: isMobile ? "0vh" : "6vh" }}>
           <Typography
             variant="h5"
             gutterBottom