[#12276] Instructor edit session page: Fix custom visibility table ov…

…erflow (#12574) * Use responsive-table class to add scrollbar when table overflows * Update snapshots according to UI changes --------- Co-authored-by: Jason Qiu <[email protected]> Co-authored-by: Cedric Ong <[email protected]>
TEAMMATES · Sep 17, 2023 · 4a39df1 · 4a39df1
1 parent ef058ca
commit 4a39df1
Show file tree

Hide file tree

Showing 3 changed files with 579 additions and 561 deletions.
diff --git a/...app/components/question-edit-form/__snapshots__/question-edit-form.component.spec.ts.snap b/...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
@@ -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">