From 4a39df1205b791fe0480e0c8662de9a18a0ecf92 Mon Sep 17 00:00:00 2001
From: Podugu Rohith Surya <prsurya1020@gmail.com>
Date: Sun, 17 Sep 2023 08:02:06 -0700
Subject: [PATCH] [#12276] Instructor edit session page: Fix custom visibility
 table overflow (#12574)

* Use responsive-table class to add scrollbar when table overflows

* Update snapshots according to UI changes

---------

Co-authored-by: Jason Qiu <jason_qiu@hotmail.com>
Co-authored-by: Cedric Ong <67156011+cedricongjh@users.noreply.github.com>
---
 .../question-edit-form.component.spec.ts.snap |    4 +
 .../visibility-panel.component.html           |   44 +-
 ...r-session-edit-page.component.spec.ts.snap | 1092 +++++++++--------
 3 files changed, 579 insertions(+), 561 deletions(-)

diff --git a/src/web/app/components/question-edit-form/__snapshots__/question-edit-form.component.spec.ts.snap b/src/web/app/components/question-edit-form/__snapshots__/question-edit-form.component.spec.ts.snap
index ff17dc5d3f7..6a053f54ffd 100644
--- a/src/web/app/components/question-edit-form/__snapshots__/question-edit-form.component.spec.ts.snap
+++ b/src/web/app/components/question-edit-form/__snapshots__/question-edit-form.component.spec.ts.snap
@@ -407,6 +407,10 @@ exports[`QuestionEditFormComponent should snap with default view 1`] = `
                 </li>
               </ul>
             </div>
+            <div
+              class="table-responsive"
+            >
+            </div>
             <div
               class="margin-top-15px visibility-message"
             >
diff --git a/src/web/app/components/visibility-panel/visibility-panel.component.html b/src/web/app/components/visibility-panel/visibility-panel.component.html
index 82957f78264..425928a1cad 100644
--- a/src/web/app/components/visibility-panel/visibility-panel.component.html
+++ b/src/web/app/components/visibility-panel/visibility-panel.component.html
@@ -24,28 +24,30 @@
       </li>
     </ul>
   </div>
-  <table class="table margin-top-15px background-color-white table-striped" *ngIf="model.isUsingOtherVisibilitySetting" aria-label="Custom Visibility Options Table">
-    <thead>
-    <tr>
-      <th scope="col" class="text-start">User/Group</th>
-      <th scope="col" class="text-center" *ngFor="let visibilityControl of VisibilityControl | enumToArray">{{ visibilityControl | visibilityControlName }}</th>
-    </tr>
-    </thead>
-    <tbody id="custom-visibility-table">
-    <ng-container *ngFor="let visibilityType of FeedbackVisibilityType | enumToArray">
-      <tr *ngIf="visibilityStateMachine.isVisibilityTypeApplicable(visibilityType)">
-        <td><span class="ngb-tooltip-class" [ngbTooltip]="visibilityType | visibilityTypeDescription" container="body">{{ visibilityType | visibilityTypeName }}</span></td>
-        <td *ngFor="let visibilityControl of VisibilityControl | enumToArray" class="text-center">
-          <input type="checkbox"
-                 (click)="modifyVisibilityControl($event.target.checked, visibilityType, visibilityControl)"
-                 [checked]="visibilityStateMachine.isVisible(visibilityType, visibilityControl)"
-                 [disabled]="!visibilityStateMachine.isCellEditable(visibilityType, visibilityControl) || !model.isEditable"
-                 [attr.aria-label]="getCheckboxAriaLabel(visibilityType, visibilityControl)">
-        </td>
+  <div class="table-responsive">
+    <table class="table margin-top-15px background-color-white table-striped" *ngIf="model.isUsingOtherVisibilitySetting" aria-label="Custom Visibility Options Table">
+      <thead>
+      <tr>
+        <th scope="col" class="text-start">User/Group</th>
+        <th scope="col" class="text-center" *ngFor="let visibilityControl of VisibilityControl | enumToArray">{{ visibilityControl | visibilityControlName }}</th>
       </tr>
-    </ng-container>
-    </tbody>
-  </table>
+      </thead>
+      <tbody id="custom-visibility-table">
+      <ng-container *ngFor="let visibilityType of FeedbackVisibilityType | enumToArray">
+        <tr *ngIf="visibilityStateMachine.isVisibilityTypeApplicable(visibilityType)">
+          <td><span class="ngb-tooltip-class" [ngbTooltip]="visibilityType | visibilityTypeDescription" container="body">{{ visibilityType | visibilityTypeName }}</span></td>
+          <td *ngFor="let visibilityControl of VisibilityControl | enumToArray" class="text-center">
+            <input type="checkbox"
+                   (click)="modifyVisibilityControl($event.target.checked, visibilityType, visibilityControl)"
+                   [checked]="visibilityStateMachine.isVisible(visibilityType, visibilityControl)"
+                   [disabled]="!visibilityStateMachine.isCellEditable(visibilityType, visibilityControl) || !model.isEditable"
+                   [attr.aria-label]="getCheckboxAriaLabel(visibilityType, visibilityControl)">
+          </td>
+        </tr>
+      </ng-container>
+      </tbody>
+    </table>
+  </div>
   <div class="margin-top-15px visibility-message">
     This is the visibility hint as seen by the feedback giver:
     <ul class="text-muted background-color-warning">
diff --git a/src/web/app/pages-instructor/instructor-session-edit-page/__snapshots__/instructor-session-edit-page.component.spec.ts.snap b/src/web/app/pages-instructor/instructor-session-edit-page/__snapshots__/instructor-session-edit-page.component.spec.ts.snap
index 4a556b097b5..0001bb43f3c 100644
--- a/src/web/app/pages-instructor/instructor-session-edit-page/__snapshots__/instructor-session-edit-page.component.spec.ts.snap
+++ b/src/web/app/pages-instructor/instructor-session-edit-page/__snapshots__/instructor-session-edit-page.component.spec.ts.snap
@@ -1779,181 +1779,185 @@ exports[`InstructorSessionEditPageComponent should snap with feedback session qu
                         </li>
                       </ul>
                     </div>
-                    <table
-                      aria-label="Custom Visibility Options Table"
-                      class="table margin-top-15px background-color-white table-striped"
-                      style=""
+                    <div
+                      class="table-responsive"
                     >
-                      <thead>
-                        <tr>
-                          <th
-                            class="text-start"
-                            scope="col"
-                          >
-                            User/Group
-                          </th>
-                          <th
-                            class="text-center"
-                            scope="col"
-                          >
-                            Can see answer
-                          </th>
-                          <th
-                            class="text-center"
-                            scope="col"
-                          >
-                            Can see giver's name
-                          </th>
-                          <th
-                            class="text-center"
-                            scope="col"
-                          >
-                            Can see recipient's name
-                          </th>
-                        </tr>
-                      </thead>
-                      <tbody
-                        id="custom-visibility-table"
+                      <table
+                        aria-label="Custom Visibility Options Table"
+                        class="table margin-top-15px background-color-white table-striped"
+                        style=""
                       >
-                        <tr>
-                          <td>
-                            <span
-                              class="ngb-tooltip-class"
-                              container="body"
+                        <thead>
+                          <tr>
+                            <th
+                              class="text-start"
+                              scope="col"
                             >
-                              Recipient(s)
-                            </span>
-                          </td>
-                          <td
-                            class="text-center"
-                          >
-                            <input
-                              aria-label="Recipient(s) can see Answer"
-                              type="checkbox"
-                            />
-                          </td>
-                          <td
-                            class="text-center"
-                          >
-                            <input
-                              aria-label="Recipient(s) can see Giver's Name"
-                              type="checkbox"
-                            />
-                          </td>
-                          <td
-                            class="text-center"
-                          >
-                            <input
-                              aria-label="Recipient(s) can see Recipient's Name"
-                              disabled=""
-                              type="checkbox"
-                            />
-                          </td>
-                        </tr>
-                        <tr>
-                          <td>
-                            <span
-                              class="ngb-tooltip-class"
-                              container="body"
+                              User/Group
+                            </th>
+                            <th
+                              class="text-center"
+                              scope="col"
                             >
-                              Giver's Team Members
-                            </span>
-                          </td>
-                          <td
-                            class="text-center"
-                          >
-                            <input
-                              aria-label="Giver's Team Members can see Answer"
-                              type="checkbox"
-                            />
-                          </td>
-                          <td
-                            class="text-center"
-                          >
-                            <input
-                              aria-label="Giver's Team Members can see Giver's Name"
-                              type="checkbox"
-                            />
-                          </td>
-                          <td
-                            class="text-center"
-                          >
-                            <input
-                              aria-label="Giver's Team Members can see Recipient's Name"
-                              type="checkbox"
-                            />
-                          </td>
-                        </tr>
-                        <tr>
-                          <td>
-                            <span
-                              class="ngb-tooltip-class"
-                              container="body"
+                              Can see answer
+                            </th>
+                            <th
+                              class="text-center"
+                              scope="col"
                             >
-                              Other students
-                            </span>
-                          </td>
-                          <td
-                            class="text-center"
-                          >
-                            <input
-                              aria-label="Other Students can see Answer"
-                              type="checkbox"
-                            />
-                          </td>
-                          <td
-                            class="text-center"
-                          >
-                            <input
-                              aria-label="Other Students can see Giver's Name"
-                              type="checkbox"
-                            />
-                          </td>
-                          <td
-                            class="text-center"
-                          >
-                            <input
-                              aria-label="Other Students can see Recipient's Name"
-                              type="checkbox"
-                            />
-                          </td>
-                        </tr>
-                        <tr>
-                          <td>
-                            <span
-                              class="ngb-tooltip-class"
-                              container="body"
+                              Can see giver's name
+                            </th>
+                            <th
+                              class="text-center"
+                              scope="col"
                             >
-                              Instructors
-                            </span>
-                          </td>
-                          <td
-                            class="text-center"
-                          >
-                            <input
-                              aria-label="Instructors can see Answer"
-                              type="checkbox"
-                            />
-                          </td>
-                          <td
-                            class="text-center"
-                          >
-                            <input
-                              aria-label="Instructors can see Giver's Name"
-                              type="checkbox"
-                            />
-                          </td>
-                          <td
-                            class="text-center"
-                          >
-                            <input
-                              aria-label="Instructors can see Recipient's Name"
-                              type="checkbox"
-                            />
-                          </td>
-                        </tr>
-                      </tbody>
-                    </table>
+                              Can see recipient's name
+                            </th>
+                          </tr>
+                        </thead>
+                        <tbody
+                          id="custom-visibility-table"
+                        >
+                          <tr>
+                            <td>
+                              <span
+                                class="ngb-tooltip-class"
+                                container="body"
+                              >
+                                Recipient(s)
+                              </span>
+                            </td>
+                            <td
+                              class="text-center"
+                            >
+                              <input
+                                aria-label="Recipient(s) can see Answer"
+                                type="checkbox"
+                              />
+                            </td>
+                            <td
+                              class="text-center"
+                            >
+                              <input
+                                aria-label="Recipient(s) can see Giver's Name"
+                                type="checkbox"
+                              />
+                            </td>
+                            <td
+                              class="text-center"
+                            >
+                              <input
+                                aria-label="Recipient(s) can see Recipient's Name"
+                                disabled=""
+                                type="checkbox"
+                              />
+                            </td>
+                          </tr>
+                          <tr>
+                            <td>
+                              <span
+                                class="ngb-tooltip-class"
+                                container="body"
+                              >
+                                Giver's Team Members
+                              </span>
+                            </td>
+                            <td
+                              class="text-center"
+                            >
+                              <input
+                                aria-label="Giver's Team Members can see Answer"
+                                type="checkbox"
+                              />
+                            </td>
+                            <td
+                              class="text-center"
+                            >
+                              <input
+                                aria-label="Giver's Team Members can see Giver's Name"
+                                type="checkbox"
+                              />
+                            </td>
+                            <td
+                              class="text-center"
+                            >
+                              <input
+                                aria-label="Giver's Team Members can see Recipient's Name"
+                                type="checkbox"
+                              />
+                            </td>
+                          </tr>
+                          <tr>
+                            <td>
+                              <span
+                                class="ngb-tooltip-class"
+                                container="body"
+                              >
+                                Other students
+                              </span>
+                            </td>
+                            <td
+                              class="text-center"
+                            >
+                              <input
+                                aria-label="Other Students can see Answer"
+                                type="checkbox"
+                              />
+                            </td>
+                            <td
+                              class="text-center"
+                            >
+                              <input
+                                aria-label="Other Students can see Giver's Name"
+                                type="checkbox"
+                              />
+                            </td>
+                            <td
+                              class="text-center"
+                            >
+                              <input
+                                aria-label="Other Students can see Recipient's Name"
+                                type="checkbox"
+                              />
+                            </td>
+                          </tr>
+                          <tr>
+                            <td>
+                              <span
+                                class="ngb-tooltip-class"
+                                container="body"
+                              >
+                                Instructors
+                              </span>
+                            </td>
+                            <td
+                              class="text-center"
+                            >
+                              <input
+                                aria-label="Instructors can see Answer"
+                                type="checkbox"
+                              />
+                            </td>
+                            <td
+                              class="text-center"
+                            >
+                              <input
+                                aria-label="Instructors can see Giver's Name"
+                                type="checkbox"
+                              />
+                            </td>
+                            <td
+                              class="text-center"
+                            >
+                              <input
+                                aria-label="Instructors can see Recipient's Name"
+                                type="checkbox"
+                              />
+                            </td>
+                          </tr>
+                        </tbody>
+                      </table>
+                    </div>
                     <div
                       class="margin-top-15px visibility-message"
                     >
@@ -2502,181 +2506,185 @@ exports[`InstructorSessionEditPageComponent should snap with feedback session qu
                         </li>
                       </ul>
                     </div>
-                    <table
-                      aria-label="Custom Visibility Options Table"
-                      class="table margin-top-15px background-color-white table-striped"
-                      style=""
+                    <div
+                      class="table-responsive"
                     >
-                      <thead>
-                        <tr>
-                          <th
-                            class="text-start"
-                            scope="col"
-                          >
-                            User/Group
-                          </th>
-                          <th
-                            class="text-center"
-                            scope="col"
-                          >
-                            Can see answer
-                          </th>
-                          <th
-                            class="text-center"
-                            scope="col"
-                          >
-                            Can see giver's name
-                          </th>
-                          <th
-                            class="text-center"
-                            scope="col"
-                          >
-                            Can see recipient's name
-                          </th>
-                        </tr>
-                      </thead>
-                      <tbody
-                        id="custom-visibility-table"
+                      <table
+                        aria-label="Custom Visibility Options Table"
+                        class="table margin-top-15px background-color-white table-striped"
+                        style=""
                       >
-                        <tr>
-                          <td>
-                            <span
-                              class="ngb-tooltip-class"
-                              container="body"
+                        <thead>
+                          <tr>
+                            <th
+                              class="text-start"
+                              scope="col"
                             >
-                              Recipient(s)
-                            </span>
-                          </td>
-                          <td
-                            class="text-center"
-                          >
-                            <input
-                              aria-label="Recipient(s) can see Answer"
-                              type="checkbox"
-                            />
-                          </td>
-                          <td
-                            class="text-center"
-                          >
-                            <input
-                              aria-label="Recipient(s) can see Giver's Name"
-                              type="checkbox"
-                            />
-                          </td>
-                          <td
-                            class="text-center"
-                          >
-                            <input
-                              aria-label="Recipient(s) can see Recipient's Name"
-                              disabled=""
-                              type="checkbox"
-                            />
-                          </td>
-                        </tr>
-                        <tr>
-                          <td>
-                            <span
-                              class="ngb-tooltip-class"
-                              container="body"
+                              User/Group
+                            </th>
+                            <th
+                              class="text-center"
+                              scope="col"
                             >
-                              Giver's Team Members
-                            </span>
-                          </td>
-                          <td
-                            class="text-center"
-                          >
-                            <input
-                              aria-label="Giver's Team Members can see Answer"
-                              type="checkbox"
-                            />
-                          </td>
-                          <td
-                            class="text-center"
-                          >
-                            <input
-                              aria-label="Giver's Team Members can see Giver's Name"
-                              type="checkbox"
-                            />
-                          </td>
-                          <td
-                            class="text-center"
-                          >
-                            <input
-                              aria-label="Giver's Team Members can see Recipient's Name"
-                              type="checkbox"
-                            />
-                          </td>
-                        </tr>
-                        <tr>
-                          <td>
-                            <span
-                              class="ngb-tooltip-class"
-                              container="body"
+                              Can see answer
+                            </th>
+                            <th
+                              class="text-center"
+                              scope="col"
                             >
-                              Other students
-                            </span>
-                          </td>
-                          <td
-                            class="text-center"
-                          >
-                            <input
-                              aria-label="Other Students can see Answer"
-                              type="checkbox"
-                            />
-                          </td>
-                          <td
-                            class="text-center"
-                          >
-                            <input
-                              aria-label="Other Students can see Giver's Name"
-                              type="checkbox"
-                            />
-                          </td>
-                          <td
-                            class="text-center"
-                          >
-                            <input
-                              aria-label="Other Students can see Recipient's Name"
-                              type="checkbox"
-                            />
-                          </td>
-                        </tr>
-                        <tr>
-                          <td>
-                            <span
-                              class="ngb-tooltip-class"
-                              container="body"
+                              Can see giver's name
+                            </th>
+                            <th
+                              class="text-center"
+                              scope="col"
                             >
-                              Instructors
-                            </span>
-                          </td>
-                          <td
-                            class="text-center"
-                          >
-                            <input
-                              aria-label="Instructors can see Answer"
-                              type="checkbox"
-                            />
-                          </td>
-                          <td
-                            class="text-center"
-                          >
-                            <input
-                              aria-label="Instructors can see Giver's Name"
-                              type="checkbox"
-                            />
-                          </td>
-                          <td
-                            class="text-center"
-                          >
-                            <input
-                              aria-label="Instructors can see Recipient's Name"
-                              type="checkbox"
-                            />
-                          </td>
-                        </tr>
-                      </tbody>
-                    </table>
+                              Can see recipient's name
+                            </th>
+                          </tr>
+                        </thead>
+                        <tbody
+                          id="custom-visibility-table"
+                        >
+                          <tr>
+                            <td>
+                              <span
+                                class="ngb-tooltip-class"
+                                container="body"
+                              >
+                                Recipient(s)
+                              </span>
+                            </td>
+                            <td
+                              class="text-center"
+                            >
+                              <input
+                                aria-label="Recipient(s) can see Answer"
+                                type="checkbox"
+                              />
+                            </td>
+                            <td
+                              class="text-center"
+                            >
+                              <input
+                                aria-label="Recipient(s) can see Giver's Name"
+                                type="checkbox"
+                              />
+                            </td>
+                            <td
+                              class="text-center"
+                            >
+                              <input
+                                aria-label="Recipient(s) can see Recipient's Name"
+                                disabled=""
+                                type="checkbox"
+                              />
+                            </td>
+                          </tr>
+                          <tr>
+                            <td>
+                              <span
+                                class="ngb-tooltip-class"
+                                container="body"
+                              >
+                                Giver's Team Members
+                              </span>
+                            </td>
+                            <td
+                              class="text-center"
+                            >
+                              <input
+                                aria-label="Giver's Team Members can see Answer"
+                                type="checkbox"
+                              />
+                            </td>
+                            <td
+                              class="text-center"
+                            >
+                              <input
+                                aria-label="Giver's Team Members can see Giver's Name"
+                                type="checkbox"
+                              />
+                            </td>
+                            <td
+                              class="text-center"
+                            >
+                              <input
+                                aria-label="Giver's Team Members can see Recipient's Name"
+                                type="checkbox"
+                              />
+                            </td>
+                          </tr>
+                          <tr>
+                            <td>
+                              <span
+                                class="ngb-tooltip-class"
+                                container="body"
+                              >
+                                Other students
+                              </span>
+                            </td>
+                            <td
+                              class="text-center"
+                            >
+                              <input
+                                aria-label="Other Students can see Answer"
+                                type="checkbox"
+                              />
+                            </td>
+                            <td
+                              class="text-center"
+                            >
+                              <input
+                                aria-label="Other Students can see Giver's Name"
+                                type="checkbox"
+                              />
+                            </td>
+                            <td
+                              class="text-center"
+                            >
+                              <input
+                                aria-label="Other Students can see Recipient's Name"
+                                type="checkbox"
+                              />
+                            </td>
+                          </tr>
+                          <tr>
+                            <td>
+                              <span
+                                class="ngb-tooltip-class"
+                                container="body"
+                              >
+                                Instructors
+                              </span>
+                            </td>
+                            <td
+                              class="text-center"
+                            >
+                              <input
+                                aria-label="Instructors can see Answer"
+                                type="checkbox"
+                              />
+                            </td>
+                            <td
+                              class="text-center"
+                            >
+                              <input
+                                aria-label="Instructors can see Giver's Name"
+                                type="checkbox"
+                              />
+                            </td>
+                            <td
+                              class="text-center"
+                            >
+                              <input
+                                aria-label="Instructors can see Recipient's Name"
+                                type="checkbox"
+                              />
+                            </td>
+                          </tr>
+                        </tbody>
+                      </table>
+                    </div>
                     <div
                       class="margin-top-15px visibility-message"
                     >
@@ -4546,215 +4554,219 @@ exports[`InstructorSessionEditPageComponent should snap with new question added
                     </li>
                   </ul>
                 </div>
-                <table
-                  aria-label="Custom Visibility Options Table"
-                  class="table margin-top-15px background-color-white table-striped"
-                  style=""
+                <div
+                  class="table-responsive"
                 >
-                  <thead>
-                    <tr>
-                      <th
-                        class="text-start"
-                        scope="col"
-                      >
-                        User/Group
-                      </th>
-                      <th
-                        class="text-center"
-                        scope="col"
-                      >
-                        Can see answer
-                      </th>
-                      <th
-                        class="text-center"
-                        scope="col"
-                      >
-                        Can see giver's name
-                      </th>
-                      <th
-                        class="text-center"
-                        scope="col"
-                      >
-                        Can see recipient's name
-                      </th>
-                    </tr>
-                  </thead>
-                  <tbody
-                    id="custom-visibility-table"
+                  <table
+                    aria-label="Custom Visibility Options Table"
+                    class="table margin-top-15px background-color-white table-striped"
+                    style=""
                   >
-                    <tr>
-                      <td>
-                        <span
-                          class="ngb-tooltip-class"
-                          container="body"
+                    <thead>
+                      <tr>
+                        <th
+                          class="text-start"
+                          scope="col"
                         >
-                          Recipient(s)
-                        </span>
-                      </td>
-                      <td
-                        class="text-center"
-                      >
-                        <input
-                          aria-label="Recipient(s) can see Answer"
-                          type="checkbox"
-                        />
-                      </td>
-                      <td
-                        class="text-center"
-                      >
-                        <input
-                          aria-label="Recipient(s) can see Giver's Name"
-                          type="checkbox"
-                        />
-                      </td>
-                      <td
-                        class="text-center"
-                      >
-                        <input
-                          aria-label="Recipient(s) can see Recipient's Name"
-                          disabled=""
-                          type="checkbox"
-                        />
-                      </td>
-                    </tr>
-                    <tr>
-                      <td>
-                        <span
-                          class="ngb-tooltip-class"
-                          container="body"
+                          User/Group
+                        </th>
+                        <th
+                          class="text-center"
+                          scope="col"
                         >
-                          Giver's Team Members
-                        </span>
-                      </td>
-                      <td
-                        class="text-center"
-                      >
-                        <input
-                          aria-label="Giver's Team Members can see Answer"
-                          type="checkbox"
-                        />
-                      </td>
-                      <td
-                        class="text-center"
-                      >
-                        <input
-                          aria-label="Giver's Team Members can see Giver's Name"
-                          type="checkbox"
-                        />
-                      </td>
-                      <td
-                        class="text-center"
-                      >
-                        <input
-                          aria-label="Giver's Team Members can see Recipient's Name"
-                          type="checkbox"
-                        />
-                      </td>
-                    </tr>
-                    <tr>
-                      <td>
-                        <span
-                          class="ngb-tooltip-class"
-                          container="body"
+                          Can see answer
+                        </th>
+                        <th
+                          class="text-center"
+                          scope="col"
                         >
-                          Recipient's Team Members
-                        </span>
-                      </td>
-                      <td
-                        class="text-center"
-                      >
-                        <input
-                          aria-label="Recipient's Team Members can see Answer"
-                          type="checkbox"
-                        />
-                      </td>
-                      <td
-                        class="text-center"
-                      >
-                        <input
-                          aria-label="Recipient's Team Members can see Giver's Name"
-                          type="checkbox"
-                        />
-                      </td>
-                      <td
-                        class="text-center"
-                      >
-                        <input
-                          aria-label="Recipient's Team Members can see Recipient's Name"
-                          type="checkbox"
-                        />
-                      </td>
-                    </tr>
-                    <tr>
-                      <td>
-                        <span
-                          class="ngb-tooltip-class"
-                          container="body"
+                          Can see giver's name
+                        </th>
+                        <th
+                          class="text-center"
+                          scope="col"
                         >
-                          Other students
-                        </span>
-                      </td>
-                      <td
-                        class="text-center"
-                      >
-                        <input
-                          aria-label="Other Students can see Answer"
-                          type="checkbox"
-                        />
-                      </td>
-                      <td
-                        class="text-center"
-                      >
-                        <input
-                          aria-label="Other Students can see Giver's Name"
-                          type="checkbox"
-                        />
-                      </td>
-                      <td
-                        class="text-center"
-                      >
-                        <input
-                          aria-label="Other Students can see Recipient's Name"
-                          type="checkbox"
-                        />
-                      </td>
-                    </tr>
-                    <tr>
-                      <td>
-                        <span
-                          class="ngb-tooltip-class"
-                          container="body"
+                          Can see recipient's name
+                        </th>
+                      </tr>
+                    </thead>
+                    <tbody
+                      id="custom-visibility-table"
+                    >
+                      <tr>
+                        <td>
+                          <span
+                            class="ngb-tooltip-class"
+                            container="body"
+                          >
+                            Recipient(s)
+                          </span>
+                        </td>
+                        <td
+                          class="text-center"
                         >
-                          Instructors
-                        </span>
-                      </td>
-                      <td
-                        class="text-center"
-                      >
-                        <input
-                          aria-label="Instructors can see Answer"
-                          type="checkbox"
-                        />
-                      </td>
-                      <td
-                        class="text-center"
-                      >
-                        <input
-                          aria-label="Instructors can see Giver's Name"
-                          type="checkbox"
-                        />
-                      </td>
-                      <td
-                        class="text-center"
-                      >
-                        <input
-                          aria-label="Instructors can see Recipient's Name"
-                          type="checkbox"
-                        />
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
+                          <input
+                            aria-label="Recipient(s) can see Answer"
+                            type="checkbox"
+                          />
+                        </td>
+                        <td
+                          class="text-center"
+                        >
+                          <input
+                            aria-label="Recipient(s) can see Giver's Name"
+                            type="checkbox"
+                          />
+                        </td>
+                        <td
+                          class="text-center"
+                        >
+                          <input
+                            aria-label="Recipient(s) can see Recipient's Name"
+                            disabled=""
+                            type="checkbox"
+                          />
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>
+                          <span
+                            class="ngb-tooltip-class"
+                            container="body"
+                          >
+                            Giver's Team Members
+                          </span>
+                        </td>
+                        <td
+                          class="text-center"
+                        >
+                          <input
+                            aria-label="Giver's Team Members can see Answer"
+                            type="checkbox"
+                          />
+                        </td>
+                        <td
+                          class="text-center"
+                        >
+                          <input
+                            aria-label="Giver's Team Members can see Giver's Name"
+                            type="checkbox"
+                          />
+                        </td>
+                        <td
+                          class="text-center"
+                        >
+                          <input
+                            aria-label="Giver's Team Members can see Recipient's Name"
+                            type="checkbox"
+                          />
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>
+                          <span
+                            class="ngb-tooltip-class"
+                            container="body"
+                          >
+                            Recipient's Team Members
+                          </span>
+                        </td>
+                        <td
+                          class="text-center"
+                        >
+                          <input
+                            aria-label="Recipient's Team Members can see Answer"
+                            type="checkbox"
+                          />
+                        </td>
+                        <td
+                          class="text-center"
+                        >
+                          <input
+                            aria-label="Recipient's Team Members can see Giver's Name"
+                            type="checkbox"
+                          />
+                        </td>
+                        <td
+                          class="text-center"
+                        >
+                          <input
+                            aria-label="Recipient's Team Members can see Recipient's Name"
+                            type="checkbox"
+                          />
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>
+                          <span
+                            class="ngb-tooltip-class"
+                            container="body"
+                          >
+                            Other students
+                          </span>
+                        </td>
+                        <td
+                          class="text-center"
+                        >
+                          <input
+                            aria-label="Other Students can see Answer"
+                            type="checkbox"
+                          />
+                        </td>
+                        <td
+                          class="text-center"
+                        >
+                          <input
+                            aria-label="Other Students can see Giver's Name"
+                            type="checkbox"
+                          />
+                        </td>
+                        <td
+                          class="text-center"
+                        >
+                          <input
+                            aria-label="Other Students can see Recipient's Name"
+                            type="checkbox"
+                          />
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>
+                          <span
+                            class="ngb-tooltip-class"
+                            container="body"
+                          >
+                            Instructors
+                          </span>
+                        </td>
+                        <td
+                          class="text-center"
+                        >
+                          <input
+                            aria-label="Instructors can see Answer"
+                            type="checkbox"
+                          />
+                        </td>
+                        <td
+                          class="text-center"
+                        >
+                          <input
+                            aria-label="Instructors can see Giver's Name"
+                            type="checkbox"
+                          />
+                        </td>
+                        <td
+                          class="text-center"
+                        >
+                          <input
+                            aria-label="Instructors can see Recipient's Name"
+                            type="checkbox"
+                          />
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
                 <div
                   class="margin-top-15px visibility-message"
                 >