student and teacher dashboard responsive

src/Components/DashboardPage/Student/StudentDashboard.tsx

@@ -1,7 +1,6 @@
+
 import styles from "../../../styles";
 import { Button } from "@mui/material";
-import AddBoxIcon from "@mui/icons-material/AddBox";
-import { colors } from "../../../styles";
 import { useNavigate } from "react-router-dom";
 export default function StudentDashboard() {
   const navigate = useNavigate();
@@ -17,7 +16,7 @@ export default function StudentDashboard() {
             justifyContent: "center",
             flexWrap: "wrap",
             marginTop: "40px",
-           
+            width: "100%"         
           
            
           },
@@ -28,11 +27,10 @@ export default function StudentDashboard() {
             ...styles.flex_column,
             ...{
               alignSelf: "center",
-              justifyContent: "center",
-              flexWrap: "wrap",
               backgroundColor: "#CCDDFF",    
-              paddingInline: "90px", 
-              borderRadius: "20px"      
+              borderRadius: "20px",   
+              paddingInline: "100px", 
+              width: "100%",
             },
           }}
           onClick={() => {
@@ -43,9 +41,8 @@ export default function StudentDashboard() {
           <p
             style={{
               ...styles.text_dark_blue,
-
-              ...styles.text_M,
-              fontSize: "15px"
+              fontSize: "15px",
+              
             }}
           >
            CLICK TO REQUEST BORROW ITEMS

src/Components/DashboardPage/Student/StudentTransactionListView.tsx

@@ -39,10 +39,11 @@ export default function StudentTransactionListView() {
     );
   }
   return (
-    <div >
+    <div style={{ width: "100%" }}>
       <div style={{
-       marginTop: "60px",  
-
+        marginTop: "60px",
+        width: "85%",
+        marginInline: "6.5%"
        }}>
         <TransactionFilterMenu filter={filter} setFilter={setFilter} />
         <div style={{ marginTop: "16px" }} />

src/Components/DashboardPage/Teacher/TeacherTransactionListView.tsx

@@ -48,7 +48,7 @@ export default function TeacherTransactionListView() {
         <div
           style={{
             ...styles.flex_column,
-            ...{ height: "50vh", overflowY: "scroll" },
+            ...{ height: "50vh", overflowY: "scroll", width: "85%", marginInline: "6.5%" },
           }}
         >
           {transactions.data ? (

src/Components/TransactionEntry/TransactionEntry.tsx

@@ -18,11 +18,11 @@ export default function TransactionEntry(props: props) {
       style={{
         alignSelf: "center",
         justifySelf: "center",
-        width: "584px",
         backgroundColor: colors.header_color,
         borderRadius: 16,
-        margin: "10px",
+        marginTop: "10px",
         paddingTop: "15px",
+        width: "100%"
        
       }}
       onClick={props.onClick}

src/Components/TransactionFilterMenu/TransactionFilterMenu.tsx

@@ -41,10 +41,11 @@ export default function TransactionFilterMenu(props: props) {
             alignSelf: "center",
             justifyContent: "center",
             flexWrap: "wrap",
+            width: "100%"
           },
         }}
       >
-        <FormControl sx={{ width: "384px" }}>
+        <FormControl sx={{ width: "550px", marginInline: "30px" }}>
           <InputLabel style={{ backgroundColor: "white", padding: 0 }}>
             Filter Transactions
           </InputLabel>

src/Pages/DashboardPage/DashboardPage.tsx

@@ -21,10 +21,10 @@ export default function Dashboard() {
           style={{
             ...styles.flex_column,
             ...{
-              flexWrap: "wrap",
               justifyContent: "center",
-              marginLeft: "16px",
-              marginRight: "16px",
+              alignItems: "center",
+              marginInline: "10px"
+
             },
           }}
         >