footer fixed and other css fixed

client/src/Pages/AdminCoursePage.jsx

@@ -168,66 +168,92 @@ export const AdminCoursePage = () => {
             </div>
 
             {showForm && (
-                <div style={formStyle}>
-                    <h3>{isEditMode ? 'Edit Course' : 'Add New Course'}</h3>
-                    <form onSubmit={handleAddOrUpdateCourse}>
-                        <input
-                            placeholder="Course ID"
-                            value={currentCourse.courseId}
-                            onChange={(e) => setCurrentCourse({ ...currentCourse, courseId: e.target.value })}
-                            style={inputStyle}
-                        />
-                        <input
-                            placeholder="Course Name"
-                            value={currentCourse.name}
-                            onChange={(e) => setCurrentCourse({ ...currentCourse, name: e.target.value })}
-                            style={inputStyle}
-                        />
-                        <input
-                            placeholder="Department"
-                            value={currentCourse.department}
-                            onChange={(e) => setCurrentCourse({ ...currentCourse, department: e.target.value })}
-                            style={inputStyle}
-                        />
-                        <input
-                            placeholder="Program"
-                            value={currentCourse.program}
-                            onChange={(e) => setCurrentCourse({ ...currentCourse, program: e.target.value })}
-                            style={inputStyle}
-                        />
-                        <input
-                            placeholder="Scheme"
-                            value={currentCourse.scheme}
-                            onChange={(e) => setCurrentCourse({ ...currentCourse, scheme: e.target.value })}
-                            style={inputStyle}
-                        />
-                        <input
-                            type="number"
-                            placeholder="Semester"
-                            value={currentCourse.semester}
-                            onChange={(e) => setCurrentCourse({ ...currentCourse, semester: e.target.value })}
-                            style={inputStyle}
-                        />
-                        <select
-                            value={currentCourse.status}
-                            onChange={(e) => setCurrentCourse({ ...currentCourse, status: e.target.value })}
-                            style={inputStyle}
-                        >
-                            <option value="submitted">Submitted</option>
-                            <option value="not submitted">Not Submitted</option>
-                        </select>
+  <div style={{
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    width: '100vw',
+    height: '100vh',
+    backgroundColor: 'rgba(0, 0, 0, 0.5)', // Semi-transparent background
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 1000, // Ensures it's above all content
+    padding: '10px', // Prevents touching screen edges
+  }}>
+    <div style={{
+      backgroundColor: '#fff',
+      borderRadius: '10px',
+      padding: '20px',
+      boxShadow: '0 5px 20px rgba(0,0,0,0.2)',
+      maxWidth: '90vw', // Adjusts width dynamically
+      maxHeight: '80vh', // Prevents excessive height
+      overflowY: 'auto', // Enables scrolling if content is too long
+      display: 'flex',
+      flexDirection: 'column',
+    }}>
+      <h3>{isEditMode ? 'Edit Course' : 'Add New Course'}</h3>
+      
+      <form onSubmit={handleAddOrUpdateCourse} style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+        <input
+          placeholder="Course ID"
+          value={currentCourse.courseId}
+          onChange={(e) => setCurrentCourse({ ...currentCourse, courseId: e.target.value })}
+          style={inputStyle}
+        />
+        <input
+          placeholder="Course Name"
+          value={currentCourse.name}
+          onChange={(e) => setCurrentCourse({ ...currentCourse, name: e.target.value })}
+          style={inputStyle}
+        />
+        <input
+          placeholder="Department"
+          value={currentCourse.department}
+          onChange={(e) => setCurrentCourse({ ...currentCourse, department: e.target.value })}
+          style={inputStyle}
+        />
+        <input
+          placeholder="Program"
+          value={currentCourse.program}
+          onChange={(e) => setCurrentCourse({ ...currentCourse, program: e.target.value })}
+          style={inputStyle}
+        />
+        <input
+          placeholder="Scheme"
+          value={currentCourse.scheme}
+          onChange={(e) => setCurrentCourse({ ...currentCourse, scheme: e.target.value })}
+          style={inputStyle}
+        />
+        <input
+          type="number"
+          placeholder="Semester"
+          value={currentCourse.semester}
+          onChange={(e) => setCurrentCourse({ ...currentCourse, semester: e.target.value })}
+          style={inputStyle}
+        />
+        <select
+          value={currentCourse.status}
+          onChange={(e) => setCurrentCourse({ ...currentCourse, status: e.target.value })}
+          style={inputStyle}
+        >
+          <option value="submitted">Submitted</option>
+          <option value="not submitted">Not Submitted</option>
+        </select>
+
+        <div style={{ display: 'flex', gap: '10px', justifyContent: 'center' }}>
+          <button type="submit" style={submitButtonStyle}>
+            {isEditMode ? 'Update Course' : 'Add Course'}
+          </button>
+          <button type="button" onClick={() => setShowForm(false)} style={cancelButtonStyle}>
+            Cancel
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+)}
 
-                        <div >
-                            <button type="submit" style={submitButtonStyle}>
-                                {isEditMode ? 'Update Course' : 'Add Course'}
-                            </button>
-                            <button type="button" onClick={() => setShowForm(false)} style={cancelButtonStyle}>
-                                Cancel
-                            </button>
-                        </div>
-                    </form>
-                </div>
-            )}
 
             {/* TABLE DATA */}
             <table style={tableStyle}>

client/src/Pages/AdminFacultyPage.jsx

@@ -207,86 +207,104 @@ export const AdminFacultyPage = () => {
       </div>
 
       {showForm && (
-        <div style={{
-          backgroundColor: '#fff',
-          borderRadius: '10px',
-          padding: '20px',
-          boxShadow: '0 5px 20px rgba(0,0,0,0.1)',
-          marginBottom: '20px',
-        }}>
-          <h3>{isEditMode ? 'Edit Faculty' : 'Add New Faculty'}</h3>
-          <form onSubmit={handleAddOrUpdateFaculty} style={formStyle}>
-            <div style={inputContainer}>
-              <input
-                placeholder="Faculty ID"
-                value={currentFaculty.facultyId}
-                onChange={(e) => setCurrentFaculty({ ...currentFaculty, facultyId: e.target.value })}
-                style={inputStyle}
-              />
-              <input
-                placeholder="Name"
-                value={currentFaculty.name}
-                onChange={(e) => setCurrentFaculty({ ...currentFaculty, name: e.target.value })}
-                style={inputStyle}
-              />
-            </div>
-
-            <div style={inputContainer}>
-              <input
-
-                placeholder="Email"
-                value={currentFaculty.email}
-                onChange={(e) => setCurrentFaculty({ ...currentFaculty, email: e.target.value })}
-                style={inputStyle}
-              />
-              <input
-                placeholder="Department"
-                value={currentFaculty.department}
-                onChange={(e) => setCurrentFaculty({ ...currentFaculty, department: e.target.value })}
-                style={inputStyle}
-              />
-            </div>
-
-            <div style={inputContainer}>
-              <input
-                placeholder="Program"
-                value={currentFaculty.program}
-                onChange={(e) => setCurrentFaculty({ ...currentFaculty, program: e.target.value })}
-                style={inputStyle}
-              />
-            </div>
-
-
-            {currentFaculty.courses.map((course, index) => (
-              <div key={index} style={courseContainerStyle}>
-
-                <select
-                  value={course}
-                  onChange={(e) => handleCourseChange(index, e.target.value)}
-                  style={{ ...inputStyle, flex: 1 }}
-                >
-                  <option value="">Select Course</option>
-                  {Object.entries(courses).map(([courseId, courseName]) => (
-                    <option key={courseId} value={courseId}>
-                      {courseName}
-                    </option>
-                  ))}
-                </select>
-
-                <button type="button" onClick={() => handleRemoveCourse(index)} style={removeButtonStyle}>❌</button>
-              </div>
-            ))}
-            <button type="button" onClick={handleAddCourse} style={addCourseButtonStyle}>+ Add Course</button>
-
-            <div style={formButtonContainer}>
-              <button type="submit" style={submitButtonStyle}>
-                {isEditMode ? 'Update Faculty' : 'Add Faculty'}
-              </button>
-              <button type="button" onClick={() => setShowForm(false)} style={cancelButtonStyle}>Cancel</button>
-            </div>
-          </form>
+  <div style={{
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    width: '100vw',
+    height: '100vh',
+    backgroundColor: 'rgba(0, 0, 0, 0.5)', // Semi-transparent background
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 1000, // Ensures it stays above other content
+    padding: '10px', // Prevents content from hitting screen edges
+  }}>
+    <div style={{
+      backgroundColor: '#fff',
+      borderRadius: '10px',
+      padding: '20px',
+      boxShadow: '0 5px 20px rgba(0,0,0,0.2)',
+      maxWidth: '90vw', // Ensures it doesn’t exceed the viewport width
+      maxHeight: '80vh', // Ensures it doesn’t exceed the viewport height
+      overflowY: 'auto', // Enables scrolling if content overflows
+      display: 'flex',
+      flexDirection: 'column', // Ensures elements stack properly
+    }}>
+      <h3>{isEditMode ? 'Edit Faculty' : 'Add New Faculty'}</h3>
+      
+      <form onSubmit={handleAddOrUpdateFaculty} style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+        <div style={inputContainer}>
+          <input
+            placeholder="Faculty ID"
+            value={currentFaculty.facultyId}
+            onChange={(e) => setCurrentFaculty({ ...currentFaculty, facultyId: e.target.value })}
+            style={inputStyle}
+          />
+          <input
+            placeholder="Name"
+            value={currentFaculty.name}
+            onChange={(e) => setCurrentFaculty({ ...currentFaculty, name: e.target.value })}
+            style={inputStyle}
+          />
         </div>
-      )}
+
+        <div style={inputContainer}>
+          <input
+            placeholder="Email"
+            value={currentFaculty.email}
+            onChange={(e) => setCurrentFaculty({ ...currentFaculty, email: e.target.value })}
+            style={inputStyle}
+          />
+          <input
+            placeholder="Department"
+            value={currentFaculty.department}
+            onChange={(e) => setCurrentFaculty({ ...currentFaculty, department: e.target.value })}
+            style={inputStyle}
+          />
+        </div>
+
+        <div style={inputContainer}>
+          <input
+            placeholder="Program"
+            value={currentFaculty.program}
+            onChange={(e) => setCurrentFaculty({ ...currentFaculty, program: e.target.value })}
+            style={inputStyle}
+          />
+        </div>
+
+        {currentFaculty.courses.map((course, index) => (
+          <div key={index} style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
+            <select
+              value={course}
+              onChange={(e) => handleCourseChange(index, e.target.value)}
+              style={{ ...inputStyle, flex: 1 }}
+            >
+              <option value="">Select Course</option>
+              {Object.entries(courses).map(([courseId, courseName]) => (
+                <option key={courseId} value={courseId}>
+                  {courseName}
+                </option>
+              ))}
+            </select>
+            <button type="button" onClick={() => handleRemoveCourse(index)} style={removeButtonStyle}>❌</button>
+          </div>
+        ))}
+
+        <button type="button" onClick={handleAddCourse} style={addCourseButtonStyle}>+ Add Course</button>
+
+        <div style={formButtonContainer}>
+          <button type="submit" style={submitButtonStyle}>
+            {isEditMode ? 'Update Faculty' : 'Add Faculty'}
+          </button>
+          <button type="button" onClick={() => setShowForm(false)} style={cancelButtonStyle}>Cancel</button>
+        </div>
+      </form>
+    </div>
+  </div>
+)}
+
+
 
       {/*  TABLE DATA */}
       <table style={tableStyle}>

client/src/Pages/ConsolidatedTable.jsx

@@ -81,6 +81,7 @@ const styles = {
   },
   main: {
     width: "100%",
+    flexGrow: 1
   },
 };
 
@@ -216,7 +217,11 @@ const ConsolidatedTable = () => {
   };
 
   return (
-    <>
+    <div style={{
+      display:"flex",
+      flexDirection:"column",
+      minHeight: "100vh"
+    }}>
       <Navbar />
       <ToastContainer />
       <div style={styles.main}>
@@ -399,7 +404,7 @@ const ConsolidatedTable = () => {
         </div>
       </div>
       <Footer/>
-    </>
+    </div>
   );
 };
 

client/src/Pages/CourseForm.jsx

@@ -159,7 +159,7 @@ const CourseForm = () => {
   return (
     <>
       <Navbar />
-      <div className="container">
+      <div>
         <div className="courseFormContainer">
           <div className="courseFormFormContainer">
             <h2 className="courseFormHeader">Course Info</h2>

client/src/Pages/CourseTable.jsx

@@ -50,36 +50,42 @@ const CourseTable = () => {
   };
 
   return (
-    <>
+    <div style={{
+      display:"flex",
+      flexDirection:"column",
+      minHeight: "100vh"
+    }}>
      
       {/* Pass setCourses to FilterPage so it can update the course list */}
-      <FilterPage setCourses={setCourses} />
-      <table className="course-table">
-        <thead>
-          <tr>
-            <th>CourseID</th>
-            <th>Course Name</th>
-            <th>Status</th>
-          </tr>
-        </thead>
-        <tbody>
-          {courses.length > 0 ? (
-            courses.map((course) => (
-              <tr key={course.courseId} onClick={() => handleRowClick(course)}>
-                <td>{course.courseId}</td>
-                <td>{course.name}</td>
-                <td>{getStatus(course.courseId)}</td>
+        <div style={{flexGrow:1}}>
+          <FilterPage setCourses={setCourses} />
+          <table className="course-table">
+            <thead>
+              <tr>
+                <th>CourseID</th>
+                <th>Course Name</th>
+                <th>Status</th>
               </tr>
-            ))
-          ) : (
-            <tr>
-              <td colSpan="3">No courses available</td>
-            </tr>
-          )}
-        </tbody>
-      </table>
+            </thead>
+            <tbody>
+              {courses.length > 0 ? (
+                courses.map((course) => (
+                  <tr key={course.courseId} onClick={() => handleRowClick(course)}>
+                    <td>{course.courseId}</td>
+                    <td>{course.name}</td>
+                    <td>{getStatus(course.courseId)}</td>
+                  </tr>
+                ))
+              ) : (
+                <tr>
+                  <td colSpan="3">No courses available</td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
       <Footer/>
-    </>
+    </div>
   );
 };
 

client/src/Pages/DepartmentConsolidated.jsx

@@ -3,6 +3,7 @@ import axios from "axios";
 import Navbar from "./Navbar";
 import Footer from "./Footer";
 
+
 const DepartmentConsolidated = () => {
   const [searchQuery, setSearchQuery] = useState("");
   const [data, setData] = useState([]);
@@ -55,9 +56,15 @@ const DepartmentConsolidated = () => {
   };
 
   return (
-    <>
+    <div style={{
+      display:"flex",
+      flexDirection:"column",
+      minHeight: "100vh"
+    }}>
       <Navbar />
-      <div>
+      <div style={{
+        flexGrow: 1
+      }}>
         <h1
           style={{
             textAlign: "center",
@@ -282,7 +289,7 @@ const DepartmentConsolidated = () => {
         </div>
       </div>
       <Footer/>
-    </>
+    </div>
   );
 };
 

client/src/Pages/Footer.jsx

@@ -4,7 +4,7 @@ const contributors = [
     { name: "Harshitha Shetty", github: "https://github.com/HarshithaShetty27" },
     { name: "Harikrishnan Gopal", github: "https://github.com/hk151109" },
     { name: "Suhrud Korgaokar", github: "https://github.com/amNobodyyy" },
-    { name: "Hasya Aburi", github: "https://github.com/ayoitshasya" }
+    { name: "Hasya Abburi", github: "https://github.com/ayoitshasya" }
 ];
 
 const footerStyle = {
@@ -13,9 +13,10 @@ const footerStyle = {
     textAlign: "center",
     padding: "16px",
     width: "100%",
-    position: "relative",
+    position: "relative",  // Change from "fixed" to "relative"
     bottom: "0",
-    boxShadow: "0px -2px 10px rgba(0, 0, 0, 0.2)"
+    boxShadow: "0px -2px 10px rgba(0, 0, 0, 0.2)",
+    marginTop: "30px"
 };
 
 const linkStyle = {

client/src/Pages/PanelConsolidated.jsx

@@ -57,9 +57,13 @@ const PanelConsolidated = () => {
     };
 
     return (
-        <>
+        <div style={{
+            display:"flex",
+            flexDirection:"column",
+            minHeight: "100vh"
+          }}>
             <Navbar />
-            <div style={{ padding: "24px", backgroundColor: "#f7f7f7", minHeight: "100vh" }}>
+            <div style={{ padding: "24px", backgroundColor: "#f7f7f7", minHeight: "100vh", flexGrow:1 }}>
                 <h2 style={{ fontSize: "24px", fontWeight: "bold", marginBottom: "16px" }}>Faculty Expertise</h2>
 
                 <input
@@ -124,7 +128,7 @@ const PanelConsolidated = () => {
                 </div>
             </div>
             <Footer/>
-        </>
+        </div>
     );
 };
 

client/src/Pages/courseConsolidated.jsx

@@ -451,10 +451,14 @@ const CourseConsolidated = () => {
   
 
   return (
-    <>
+    <div style={{
+      display:"flex",
+      flexDirection:"column",
+      minHeight: "100vh"
+    }}>
       <Navbar />
       <ToastContainer />
-      <div>
+      <div style={{flexGrow:1}}>
         <h1
           style={{
             textAlign: "center",
@@ -695,7 +699,7 @@ const CourseConsolidated = () => {
         </div>
       </div>
       <Footer/>
-    </>
+    </div>
   );
 };