CLASSROOMIO-T-146:Made the course page responsive

CLASSROOMIO-T-146:Made updates to the code following the reviews CLASSROOMIO-T-146:Made updates to the Z-Index Merge branch 'main' into CLASSROOMIO-T-146 Merge branch 'main' into CLASSROOMIO-T-146 CLASSROOMIO-T-146:Made the course page responsive CLASSROOMIO-T-146:working on the course page responsiveness Merge branch 'main' into CLASSROOMIO-T-145 CLASSROOMIO-T-146:Making the course page responsive CLASSROOMIO-T-145: All done and ready CLASSROOMIO-T-145: All done and ready CLASSROOMIO-T-145: Fixed the Z-index issue Merge branch 'main' into CLASSROOMIO-T-145 CLASSROOMIO-T-145: Finished implementing the responsive design for the Main dashboard and LMS dashboard Merge branch 'main' into CLASSROOMIO-T-145 CLASSROOMIO-T-144:Updating the dashboard responsiveness ooth for LMS and the Main dashboard CLASSROOMIO-T-144:Updated the dashboard responsiveness ooth for LMS and the Main dashboard Merge branch 'main' into CLASSROOMIO-T-145 CLASSROOMIO-T-145:Made the LMS dashboard responsive Co-authored-by: Ifeanyi Nwosu <ifeanyi@digdippa.com> Merge-request: CLASSROOMIO-MR-73 Merged-by: Best Admin <best@digdippa.com>
2023-09-14 20:59:51 +00:00
parent be619ae6bd
commit f3f8a00809
24 changed files with 520 additions and 520 deletions
@@ -138,77 +138,80 @@

 <CourseContainer bind:isStudent>
  <PageNav title="Attendance" />
-
-  <section class="mx-9 my-5">
-    <div class="flex flex-row items-center justify-between">
-      <div class="flex">
-        <p class="flex items-center mr-5">
-          <Checkbox checked disabled /> Present
-        </p>
-        <p class="flex items-center">
-          <Checkbox disabled /> Absent
-        </p>
+  <PageBody width="w-full max-w-6xl md:w-11/12">
+    <section class="flex items-center mx-2 lg:mx-9 my-5">
+      <div
+        class="flex flex-col lg:flex-row items-start gap-2 lg:items-center justify-between w-full"
+      >
+        <div class="flex">
+          <p class="flex items-center mr-5">
+            <Checkbox checked disabled /> Present
+          </p>
+          <p class="flex items-center">
+            <Checkbox disabled /> Absent
+          </p>
+        </div>
+        <div>
+          <Search
+            class="dark:text-slate-950"
+            placeholder="Search students"
+            bind:value={searchValue}
+          />
+        </div>
      </div>
-      <div>
-        <Search
-          class="dark:text-slate-950"
-          placeholder="Search students"
-          bind:value={searchValue}
-        />
-      </div>
-    </div>
-  </section>
+    </section>

-  <section class="my-5 mx-9">
-    <StructuredList class="m-0">
-      <!-- Moved the lesson headers outside the students loop -->
-      <StructuredListHead class="bg-primary-100">
-        <StructuredListRow head class="mx-7">
-          <StructuredListCell head class="text-primary-600 py-3">Student</StructuredListCell>
-          {#each $lessons as lesson, index}
-            <StructuredListCell head class="text-primary-600 py-3"
-              >Lesson 0{getLectureNo(index + 1)}</StructuredListCell
-            >
-          {/each}
-        </StructuredListRow>
-      </StructuredListHead>
-
-      {#each searchStudents(searchValue) as student}
-        <StructuredListBody>
-          <StructuredListRow>
-            <StructuredListCell>
-              <div class="w-1/4 flex items-center">
-                <p class="dark:text-white font-semibold">
-                  {student.profile.fullname}
-                </p>
-              </div>
-            </StructuredListCell>
-            {#each $lessons as lesson}
-              <StructuredListCell class="">
-                <Checkbox
-                  class={isStudent && 'cursor-not-allowed'}
-                  disabled={isStudent}
-                  checked={$attendance[student.id]
-                    ? $attendance[student.id][lesson.id]
-                      ? $attendance[student.id][lesson.id].is_present
-                      : false
-                    : false}
-                  on:change={(e) => handleAttendanceChange(e, student, lesson)}
-                />
-              </StructuredListCell>
+    <section class="my-5 mx-2 lg:mx-9">
+      <StructuredList class="m-0 relative">
+        <!-- Moved the lesson headers outside the students loop -->
+        <StructuredListHead class="bg-primary-100">
+          <StructuredListRow head class="mx-7">
+            <StructuredListCell head class="text-primary-600 py-3">Student</StructuredListCell>
+            {#each $lessons as lesson, index}
+              <StructuredListCell head class="text-primary-600 py-3"
+                >Lesson 0{getLectureNo(index + 1)}</StructuredListCell
+              >
            {/each}
          </StructuredListRow>
-        </StructuredListBody>
-      {/each}
-    </StructuredList>
-    {#if students.length === 0}
-      <div>
-        <Box>
+        </StructuredListHead>
+
+        {#each searchStudents(searchValue) as student}
+          <StructuredListBody>
+            <StructuredListRow>
+              <StructuredListCell>
+                <div class="w-1/4 flex items-center">
+                  <p class="dark:text-white font-semibold">
+                    {student.profile.fullname}
+                  </p>
+                </div>
+              </StructuredListCell>
+              {#each $lessons as lesson}
+                <StructuredListCell class="">
+                  <Checkbox
+                    class={isStudent && 'cursor-not-allowed'}
+                    disabled={isStudent}
+                    checked={$attendance[student.id]
+                      ? $attendance[student.id][lesson.id]
+                        ? $attendance[student.id][lesson.id].is_present
+                        : false
+                      : false}
+                    on:change={(e) => handleAttendanceChange(e, student, lesson)}
+                  />
+                </StructuredListCell>
+              {/each}
+            </StructuredListRow>
+          </StructuredListBody>
+        {/each}
+      </StructuredList>
+      {#if students.length === 0}
+        <Box className="h-[300px] w-full">
          <AudioConsoleIcon size={32} class="carbon-icon w-80" />
-          <h3 class="text-3xl text-gray-500 dark:text-white">No Student Added</h3>
+          <h3 class="text-3xl text-gray-500 dark:text-white text-center">No Student Added</h3>
        </Box>
-      </div>
-    {/if}
-    <Pagination totalItems={10} pageSizes={[10, 15, 20]} />
-  </section>
+      {/if}
+      {#if students.length !== 0}
+        <Pagination totalItems={10} pageSizes={[10, 15, 20]} />
+      {/if}
+    </section>
+  </PageBody>
 </CourseContainer>
@@ -30,12 +30,12 @@
 </script>

 <div
-  class="root absolute inset-0 flex justify-center items-center z-50 bg-white"
+  class="absolute inset-0 z-50 bg-white"
  in:fly={{ y: 500, duration: 500 }}
  out:fly={{ y: 500, duration: 500 }}
 >
  <Editor {courseId} bind:course={courseData} />
-  <div class="rightBar" class:isMobile={$isMobile}>
+  <div class="rightBar">
    <CourseLandingPage bind:courseData />
  </div>
 </div>
@@ -43,13 +43,8 @@
 <style>
  .rightBar {
    flex-grow: 1;
-    width: calc(100% - 360px);
-    overflow: auto;
+    width: 100%;
    height: 100%;
-    overflow: auto;
-  }
-
-  .rightBar.isMobile {
-    margin-left: 10px;
+    overflow-y: auto;
  }
 </style>
@@ -321,12 +321,12 @@
        </div>
      {:else}
        <Box>
-          <div class="flex justify-between flex-col items-center w-96">
+          <div class="flex justify-between flex-col items-center w-[90%] md:w-96">
            <img src="/images/empty-lesson-icon.svg" alt="Lesson" class="my-2.5 mx-auto" />
            <h2 class="text-xl my-1.5 font-normal">No lessons yet</h2>
            <p class="text-sm text-center text-slate-500">
              Share your knowledge with the world by creating engaging lessons. Start by clicking on
-              the New Lesson button.
+              the Add button.
            </p>
          </div>
        </Box>
@@ -4,17 +4,19 @@
  import { fetchCourse, fetchLesson } from '$lib/utils/services/courses';
  import CheckmarkOutlineIcon from 'carbon-icons-svelte/lib/CheckmarkOutline.svelte';
  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
-  import { VARIANTS } from '$lib/components/PrimaryButton/constants.js';
+  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
  import { Loading } from 'carbon-components-svelte';
  import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
  import PageNav from '$lib/components/PageNav/index.svelte';
  import PageBody from '$lib/components/PageBody/index.svelte';
  import Materials from '$lib/components/Course/components/Lesson/Materials/index.svelte';
  import Exercises from '$lib/components/Course/components/Lesson/Exercises/index.svelte';
-  import MODES from '$lib/utils/constants/mode.js';
+  import MODES from '$lib/utils/constants/mode';
  import { setCourse, course } from '$lib/components/Course/store';
  import Download from 'carbon-icons-svelte/lib/Download.svelte';
-
+  import OverflowMenuVertical from 'carbon-icons-svelte/lib/OverflowMenuVertical.svelte';
+  import { apps } from '$lib/components/Apps/store';
+  import IconButton from '$lib/components/IconButton/index.svelte';
  import {
    lesson,
    lessons,
@@ -144,6 +146,10 @@
    }));
  }

+  const toggleApps = () => {
+    $apps.open = !$apps.open;
+  };
+
  function toggleMode() {
    prevMode = mode;
    mode = mode === MODES.edit ? MODES.view : MODES.edit;
@@ -176,9 +182,20 @@
    <svelte:fragment slot="widget">
      <RoleBasedSecurity allowedRoles={[1, 2]}>
        {#if data.isMaterialsTabActive}
-          <div class="flex items-center">
+          <div class="lg:hidden">
+            <IconButton onClick={toggleApps} buttonClassName="">
+              <OverflowMenuVertical size={24} />
+            </IconButton>
+          </div>
+          <div
+            class={`flex-row ${
+              $apps.dropdown && $apps.open
+                ? 'absolute lg:relative top-[85px] lg:top-0 right-14 lg:right-0 z-40 dark:bg-gray-800 p-3 lg:p-0'
+                : 'hidden'
+            } lg:flex items-center`}
+          >
            <PrimaryButton
-              className="mr-2"
+              className="mb-2 lg:mb-0 mr-2"
              variant={VARIANTS.OUTLINED}
              onClick={downloadLesson}
              {isLoading}
@@ -207,7 +224,7 @@
    <PageBody>
      <Materials lessonId={data.lessonId} {mode} {prevMode} {toggleMode} bind:isSaving />

-      <div class="w-full flex flex-row-reverse">
+      <div class="w-full flex flex-row-reverse mt-10">
        <PrimaryButton
          onClick={markLessonComplete}
          isLoading={isMarkingComplete}
@@ -8,10 +8,7 @@
  import { ROLE } from '$lib/utils/constants/roles';
  import { setCourse, course, group } from '$lib/components/Course/store';
  import { lessons } from '$lib/components/Course/components/Lesson/store/lessons';
-  import {
-    fetchCourse,
-    fetchExercisesByMarks,
-  } from '$lib/utils/services/courses';
+  import { fetchCourse, fetchExercisesByMarks } from '$lib/utils/services/courses';
  import { getLectureNo } from '$lib/components/Course/function';
  import { fetchMarks } from '$lib/utils/services/marks';
  import { profile } from '$lib/utils/store/user';
@@ -19,10 +16,8 @@
  export let data;
  const { courseId } = data;

-  let borderBottomGrey =
-    'border-r-0 border-t-0 border-b border-l-0 border-gray-300';
-  let borderleftGrey =
-    'border-r-0 border-t-0 border-b-0 border-l border-gray-300';
+  let borderBottomGrey = 'border-r-0 border-t-0 border-b border-l-0 border-gray-300';
+  let borderleftGrey = 'border-r-0 border-t-0 border-b-0 border-l border-gray-300';
  let students = [];
  let isStudent = false;

@@ -52,11 +47,11 @@
      if (studentMarksByExerciseId[groupmember_id]) {
        studentMarksByExerciseId[groupmember_id] = {
          ...studentMarksByExerciseId[groupmember_id],
-          [exercise_id]: total_points_gotten,
+          [exercise_id]: total_points_gotten
        };
      } else {
        studentMarksByExerciseId[groupmember_id] = {
-          [exercise_id]: total_points_gotten,
+          [exercise_id]: total_points_gotten
        };
      }
    });
@@ -70,11 +65,11 @@
      if (lessonMapping[lesson_id]) {
        lessonMapping[lesson_id] = {
          ...lessonMapping[lesson_id],
-          [exercise_id]: { title: exercise_title, points },
+          [exercise_id]: { title: exercise_title, points }
        };
      } else {
        lessonMapping[lesson_id] = {
-          [exercise_id]: { title: exercise_title, points },
+          [exercise_id]: { title: exercise_title, points }
        };
      }
    });
@@ -82,20 +77,16 @@

  $: {
    students = isStudent
-      ? $group.people.filter(
-          (person) => !!person.profile && person.profile.id === $profile.id
-        )
-      : $group.people.filter(
-          (person) => !!person.profile && person.role_id === ROLE.STUDENT
-        );
+      ? $group.people.filter((person) => !!person.profile && person.profile.id === $profile.id)
+      : $group.people.filter((person) => !!person.profile && person.role_id === ROLE.STUDENT);
  }
 </script>

 <CourseContainer bind:isStudent>
  <PageNav title="Marks" />

-  <PageBody width="w-11/12">
-    <div class="table rounded-md border border-gray-300 w-auto">
+  <PageBody width="w-full max-w-6xl md:w-11/12">
+    <div class="table rounded-md border border-gray-300 w-full">
      <div class="flex items-center {borderBottomGrey}">
        <div class="box flex items-center p-3">
          <p class="dark:text-white w-40">Student</p>
@@ -111,8 +102,7 @@
              >
                {#each Object.keys(lessonMapping[lesson.id]) as exerciseId, index}
                  <p
-                    class="col text-sm dark:text-white {index &&
-                      borderleftGrey}"
+                    class="col text-sm dark:text-white {index && borderleftGrey}"
                    title={lessonMapping[lesson.id][exerciseId].title}
                  >
                    {lessonMapping[lesson.id][exerciseId].title}
@@ -129,9 +119,7 @@
      </div>

      {#each students as student}
-        <div
-          class="flex relative items-center p-3 cursor-pointer {borderBottomGrey}"
-        >
+        <div class="flex relative items-center p-3 cursor-pointer {borderBottomGrey}">
          <div class="w-40 flex items-center">
            <img
              alt="Student avatar"
@@ -143,11 +131,7 @@
                {student.profile.fullname}
              </p>
              <p class="dark:text-white">
-                {`${
-                  student.assigned_student_id
-                    ? '#' + student.assigned_student_id
-                    : '-'
-                }`}
+                {`${student.assigned_student_id ? '#' + student.assigned_student_id : '-'}`}
              </p>
            </div>
          </div>
@@ -176,9 +160,7 @@
      {:else}
        <Box>
          <AudioConsoleIcon size={32} class="carbon-icon w-80" />
-          <h3 class="text-3xl text-gray-500 dark:text-white">
-            No Student Added
-          </h3>
+          <h3 class="text-3xl text-gray-500 dark:text-white">No Student Added</h3>
        </Box>
      {/each}
    </div>
@@ -1,6 +1,7 @@
 <script lang="ts">
  import TextChip from '$lib/components/Chip/Text.svelte';
  import ComingSoon from '$lib/components/ComingSoon/index.svelte';
+  import Filter from 'carbon-icons-svelte/lib/Filter.svelte';
  import { onMount } from 'svelte';
  import copy from 'copy-to-clipboard';
  import {
@@ -17,6 +18,7 @@
  import { fetchCourse, deleteGroupMember, updatedGroupMember } from '$lib/utils/services/courses';
  import TrashCanIcon from 'carbon-icons-svelte/lib/TrashCan.svelte';
  import PageNav from '$lib/components/PageNav/index.svelte';
+  import PageBody from '$lib/components/PageBody/index.svelte';
  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
  import Select from '$lib/components/Form/Select.svelte';
  import IconButton from '$lib/components/IconButton/index.svelte';
@@ -135,138 +137,148 @@
      </RoleBasedSecurity>
    </slot:fragment>
  </PageNav>
-  <section class="my-5 mx-9">
-    <div class="flex flex-row flex-end justify-end items-center mb-7">
-      <div class="mr-5 w-80">
-        <Search
-          class="dark:text-slate-950 border-0 bg-zinc-100 w-full"
-          placeholder="Search people"
-          bind:value={searchValue}
-        />
-      </div>
-      <div class="mb-3">
-        <Select bind:value={filterBy} options={ROLES} className="dark:text-black mt-3 w-20" />
-        <!-- <select bind:value={filterBy} class="mt-3">
-          {#each ROLES as option}
-            <option value={option.value}>{option.label}</option>
-          {/each}
-        </select> -->
-      </div>
-      <RoleBasedSecurity allowedRoles={[1, 2]}>
-        <p class="dark:text-white hidden lg:block text-lg w-20" />
-      </RoleBasedSecurity>
-    </div>
-
-    <StructuredList class="m-0">
-      <StructuredListHead
-        class="bg-slate-100 dark:bg-neutral-800 dark:border-2 dark:border-neutral-800"
+  <PageBody width="w-full max-w-6xl md:w-11/12">
+    <section class="my-5 mx-2 md:mx-9">
+      <div
+        class="flex flex-col md:flex-row flex-end gap-2 justify-end items-start md:items-center mb-7"
      >
-        <StructuredListRow head class="mx-7">
-          <StructuredListCell head class="text-primary-700 py-3 dark:text-white"
-            >Name</StructuredListCell
-          >
-          <StructuredListCell head class="text-primary-700 py-3 dark:text-white"
-            >Role</StructuredListCell
-          >
-          <StructuredListCell head class="text-primary-700 py-3 dark:text-white"
-            >Action</StructuredListCell
-          >
-          <RoleBasedSecurity allowedRoles={[1, 2]}>
-            <p class="dark:text-white hidden lg:block text-lg w-20" />
-          </RoleBasedSecurity>
-        </StructuredListRow>
-      </StructuredListHead>
+        <div class="max-w-[320px]">
+          <Search
+            class="dark:text-slate-950 border-0 bg-zinc-100 w-full"
+            placeholder="Search people"
+            bind:value={searchValue}
+          />
+        </div>
+        <div class="mb-3">
+          <Select
+            bind:value={filterBy}
+            options={ROLES}
+            className="dark:text-black mt-3 max-w-[80px]"
+          />
+          <!-- <select bind:value={filterBy} class="mt-3">
+            {#each ROLES as option}
+              <option value={option.value}>{option.label}</option>
+            {/each}
+          </select> -->
+        </div>
+        <RoleBasedSecurity allowedRoles={[1, 2]}>
+          <p class="dark:text-white hidden lg:block text-lg w-20" />
+        </RoleBasedSecurity>
+      </div>

-      {#each filterPeople(searchValue, people) as person}
-        <StructuredListBody>
-          <StructuredListRow class="relative">
-            <!-- first column -->
-            <StructuredListCell class="w-3/6">
-              {#if person.profile}
-                <div class="flex items-center absolute bottom-3">
-                  <Avatar
-                    src={person.profile.avatar_url}
-                    name={person.profile.fullname}
-                    width="w-8"
-                    height="h-8"
-                    className="mr-3"
-                  />
-                  <div class="flex items-center">
-                    <div class="mr-2">
-                      <p class="dark:text-white text-base font-normal">
-                        {person.profile.fullname}
-                      </p>
-                      <p class="text-xs text-primary-600">
-                        {getEmail(person)}
-                      </p>
-                    </div>
-                    <RoleBasedSecurity allowedRoles={[1, 2]}>
-                      <div class="hidden lg:flex lg:justify-between lg:items-center mr-2">
-                        <CopyButton text={getEmail(person)} feedback="Copied Email to clipboard" />
+      <StructuredList class="m-0">
+        <StructuredListHead
+          class="bg-slate-100 dark:bg-neutral-800 dark:border-2 dark:border-neutral-800"
+        >
+          <StructuredListRow head class="mx-7">
+            <StructuredListCell head class="text-primary-700 py-3 dark:text-white"
+              >Name</StructuredListCell
+            >
+            <StructuredListCell head class="text-primary-700 py-3 dark:text-white"
+              >Role</StructuredListCell
+            >
+            <StructuredListCell head class="text-primary-700 py-3 dark:text-white"
+              >Action</StructuredListCell
+            >
+            <RoleBasedSecurity allowedRoles={[1, 2]}>
+              <p class="dark:text-white hidden lg:block text-lg w-20" />
+            </RoleBasedSecurity>
+          </StructuredListRow>
+        </StructuredListHead>
+
+        {#each filterPeople(searchValue, people) as person}
+          <StructuredListBody>
+            <StructuredListRow class="relative">
+              <!-- first column -->
+              <StructuredListCell class="w-4/6 md:w-3/6">
+                {#if person.profile}
+                  <div class="flex items-start lg:items-center">
+                    <Avatar
+                      src={person.profile.avatar_url}
+                      name={person.profile.fullname}
+                      width="w-8"
+                      height="h-8"
+                      className="mr-3"
+                    />
+                    <div class="flex flex-col lg:flex-row items-start lg:items-center">
+                      <div class="mr-2">
+                        <p class="dark:text-white text-base font-normal">
+                          {person.profile.fullname}
+                        </p>
+                        <p class="text-xs text-primary-600 line-clamp-1">
+                          {getEmail(person)}
+                        </p>
                      </div>
-                    </RoleBasedSecurity>
-                    {#if person.profile_id == $profile.id}
-                      <ComingSoon label="You" />
+                      <div class="flex items-center">
+                        <RoleBasedSecurity allowedRoles={[1, 2]}>
+                          <CopyButton
+                            text={getEmail(person)}
+                            feedback="Copied Email to clipboard"
+                          />
+                        </RoleBasedSecurity>
+                        {#if person.profile_id == $profile.id}
+                          <ComingSoon label="You" />
+                        {/if}
+                      </div>
+                    </div>
+                  </div>
+                {:else}
+                  <div class="flex items-start lg:items-center w-2/4">
+                    <TextChip
+                      value={person.email.substring(0, 2).toUpperCase()}
+                      className="bg-primary-200 text-black font-semibold text-xs mr-3"
+                      shape="rounded-full"
+                    />
+                    <a
+                      href="mailto:{person.email}"
+                      class="text-md text-primary-600 mr-2 dark:text-white"
+                    >
+                      {person.email}
+                    </a>
+                    <div class="flex items-center justify-between">
+                      <RoleBasedSecurity allowedRoles={[1, 2]}>
+                        <CopyButton text={getEmail(person)} feedback="Copied Email to clipboard" />
+                      </RoleBasedSecurity>
+
+                      <TextChip
+                        value="Pending"
+                        className="text-xs bg-yellow-200 text-yellow-700 h-fit"
+                        size="sm"
+                      />
+                    </div>
+                  </div>
+                {/if}
+              </StructuredListCell>
+
+              <!-- second column -->
+              <StructuredListCell class="w-1/4 px-3">
+                <p class=" dark:text-white font-normal text-center text-base w-1/4">
+                  {ROLE_LABEL[person.role_id]}
+                </p>
+              </StructuredListCell>
+
+              <!-- third column -->
+              <StructuredListCell class="p-0 w-1/4">
+                <RoleBasedSecurity allowedRoles={[1, 2]}>
+                  <div class="hidden lg:flex lg:justify-between lg:items-center w-20">
+                    {#if person.profile_id !== $profile.id}
+                      <IconButton
+                        onClick={() => {
+                          member = person;
+                          $deleteMemberModal.open = true;
+                        }}
+                      >
+                        <TrashCanIcon size={16} class="carbon-icon dark:text-white" />
+                      </IconButton>
                    {/if}
                  </div>
-                </div>
-              {:else}
-                <div class="flex items-center w-2/4 absolute bottom-3">
-                  <TextChip
-                    value={person.email.substring(0, 2).toUpperCase()}
-                    className="bg-primary-200 text-black font-semibold text-xs mr-3"
-                    shape="rounded-full"
-                  />
-                  <a
-                    href="mailto:{person.email}"
-                    class="text-md text-primary-600 mr-2 dark:text-white"
-                  >
-                    {person.email}
-                  </a>
-
-                  <RoleBasedSecurity allowedRoles={[1, 2]}>
-                    <div class="hidden lg:flex lg:justify-between lg:items-center w-20">
-                      <CopyButton text={getEmail(person)} feedback="Copied Email to clipboard" />
-                    </div>
-                  </RoleBasedSecurity>
-
-                  <TextChip
-                    value="Pending"
-                    className="text-xs bg-yellow-200 text-yellow-700 h-fit"
-                    size="sm"
-                  />
-                </div>
-              {/if}
-            </StructuredListCell>
-
-            <!-- second column -->
-            <StructuredListCell class="w-1/4 py-4 px-3">
-              <p class="dark:text-white font-normal text-base w-1/4 my-auto">
-                {ROLE_LABEL[person.role_id]}
-              </p>
-            </StructuredListCell>
-
-            <!-- third column -->
-            <StructuredListCell class="p-0 w-1/4">
-              <RoleBasedSecurity allowedRoles={[1, 2]}>
-                <div class="hidden lg:flex lg:justify-between lg:items-center w-20">
-                  {#if person.profile_id !== $profile.id}
-                    <IconButton
-                      onClick={() => {
-                        member = person;
-                        $deleteMemberModal.open = true;
-                      }}
-                    >
-                      <TrashCanIcon size={16} class="carbon-icon dark:text-white" />
-                    </IconButton>
-                  {/if}
-                </div>
-              </RoleBasedSecurity>
-            </StructuredListCell>
-          </StructuredListRow>
-        </StructuredListBody>
-      {/each}
-    </StructuredList>
-    <Pagination totalItems={10} pageSizes={[10, 15, 20]} />
-  </section>
+                </RoleBasedSecurity>
+              </StructuredListCell>
+            </StructuredListRow>
+          </StructuredListBody>
+        {/each}
+      </StructuredList>
+      <!-- <Pagination totalItems={10} pageSizes={[10, 15, 20]} /> -->
+    </section>
+  </PageBody>
 </CourseContainer>
@@ -244,8 +244,8 @@
  <CourseContainer>
    <PageNav title="Submitted Exercises" />

-    <PageBody width="w-11/12 overflow-x-auto overflow-y-hidden">
-      <div class="flex items-center w-full">
+    <PageBody width="w-full max-w-6xl md:w-11/12 overflow-x-auto">
+      <div class="flex items-center w-full overflow-x-scroll">
        {#each sections as { id, title, items }, idx (id)}
          <div
            class="section rounded-md bg-gray-100 dark:bg-gray-800 border border-gray-50 p-3 h-80 mr-3 overflow-hidden"
@@ -301,7 +301,7 @@
                      {`${item.tutor ? 'created by' + item.tutor.name : ''}`}
                    </p>
                  </a>
-                  <p class="dark:text-white text-gray-500 dark:text-white text-xs">
+                  <p class="dark:text-white text-gray-500 text-xs">
                    {item.submittedAt}
                  </p>
                  <!-- <div class="badge rounded-md px-2 bg-green-500 text-white">
@@ -324,10 +324,15 @@
  .section {
    max-width: 355px;
    min-width: 355px;
-    height: 80vh;
+    height: 75vh;
  }

  .content {
    height: 95%;
  }
+  @media screen and (max-width: 768px) {
+    .section {
+      min-width: 250px;
+    }
+  }
 </style>