From 897a082539e843c52991014254cece6703f10deb Mon Sep 17 00:00:00 2001
From: Zong Xun <63457492+Zxun2@users.noreply.github.com>
Date: Tue, 4 Jul 2023 04:19:34 +0800
Subject: [PATCH] [#12275] Instructor edit sessions page: Fix preview sessions
 button overflow (#12492)

* fix: buttons overflow

* test: update

* fix: stylings in small screen

* lint: fix

* fix: update snapshots and linting

* fix: adjust stylings when no students

* fix: optimize css

* fix: update snapshots

* fix: update stylings for help page

---------

Co-authored-by: Wei Qing <48304907+weiquu@users.noreply.github.com>
---
 .../preview-session-panel.component.html      | 118 +++++++++++----
 .../preview-session-panel.component.scss      |  24 ++-
 ...review-session-result-panel.component.html | 110 ++++++++++----
 ...review-session-result-panel.component.scss |  13 +-
 ...r-session-edit-page.component.spec.ts.snap | 140 +++++++++++-------
 5 files changed, 291 insertions(+), 114 deletions(-)

diff --git a/src/web/app/components/preview-session-panel/preview-session-panel.component.html b/src/web/app/components/preview-session-panel/preview-session-panel.component.html
index 485d450f0c9..0568e8bb58c 100644
--- a/src/web/app/components/preview-session-panel/preview-session-panel.component.html
+++ b/src/web/app/components/preview-session-panel/preview-session-panel.component.html
@@ -1,37 +1,97 @@
 <div class="card-body background-color-light-blue text-center">
   <div class="row align-items-center">
-    <div class="col-lg-2 text-lg-end">
+    <div
+      [ngClass]="{ 'col-lg-2': !forDisplayOnly, 'text-lg-end': !forDisplayOnly, 'mb-lg-3': forDisplayOnly }"
+      class="mb-3 mb-lg-0">
       <b>Preview Session:</b>
     </div>
-    <div class="col-lg-5">
-      <select id="preview-student" class="form-control form-select preview-select" [(ngModel)]="emailOfStudentToPreview" aria-label="Select student to preview as">
-        <option *ngFor="let student of studentsOfCourse" [ngValue]="student.email">[{{ student.teamName }}] {{ student.name }}</option>
-      </select>
-      <a *ngIf="emailOfStudentToPreview.length !== 0; else previewStudentBtn" tmRouterLink="/web/sessions/submission"
-         [queryParams]="{ courseid: courseId, fsname: feedbackSessionName, previewas: emailOfStudentToPreview }"
-         target="_blank"
-         rel="noopener noreferrer"
-         [ngbTooltip]="emailOfStudentToPreview.length !== 0 ? 'View how this session would look like to a student who is submitting feedback.' : 'Preview is unavailable if the course has yet to have any student enrolled.'">
-        <ng-container *ngTemplateOutlet="previewStudentBtn"></ng-container>
-      </a>
-      <ng-template #previewStudentBtn>
-        <button id="btn-preview-student" class="btn btn-primary" [disabled]="emailOfStudentToPreview.length === 0 || forDisplayOnly">Preview as Student</button>
-      </ng-template>
+    <div
+      [ngClass]="{'col-lg-5': !forDisplayOnly, 'col-lg-6': forDisplayOnly}"
+      class="col-12 mb-3 mb-lg-0">
+      <div class="row align-items-center justify-content-center">
+        <select
+          id="preview-student"
+          [ngClass]="{ 'preview-example-select': forDisplayOnly }"
+          class="col-12 col-sm-8 col-lg-6 form-control form-select preview-select"
+          [(ngModel)]="emailOfStudentToPreview"
+          aria-label="Select student to preview as"
+        >
+          <option *ngFor="let student of studentsOfCourse" [ngValue]="student.email">
+            [{{ student.teamName }}] {{ student.name }}
+          </option>
+        </select>
+        <div class="mt-1 mt-lg-0 col-sm-4 col-lg-6 w-max-content">
+          <a
+            *ngIf="emailOfStudentToPreview.length !== 0; else previewStudentBtn"
+            tmRouterLink="/web/sessions/submission"
+            [queryParams]="{
+              courseid: courseId,
+              fsname: feedbackSessionName,
+              previewas: emailOfStudentToPreview
+            }"
+            target="_blank"
+            rel="noopener noreferrer"
+            [ngbTooltip]="
+            emailOfStudentToPreview.length !== 0
+            ? 'View how this session would look like to a student who is submitting feedback.'
+            : 'Preview is unavailable if the course has yet to have any student enrolled.'
+            "
+          >
+            <ng-container *ngTemplateOutlet="previewStudentBtn"></ng-container>
+          </a>
+        </div>
+        <ng-template #previewStudentBtn>
+          <button
+            id="btn-preview-student"
+            class="btn btn-primary"
+            [disabled]="emailOfStudentToPreview.length === 0 || forDisplayOnly"
+          >
+            Preview as Student
+          </button>
+        </ng-template>
+      </div>
     </div>
-    <div class="col-lg-5">
-      <select id="preview-instructor" class="form-control form-select preview-select" [(ngModel)]="emailOfInstructorToPreview" aria-label="Select instructor to preview as">
-        <option *ngFor="let instructor of instructorsCanBePreviewedAs" [ngValue]="instructor.email">{{ instructor.name }}</option>
-      </select>
-      <a *ngIf="emailOfInstructorToPreview.length !== 0; else previewInstructorBtn" tmRouterLink="/web/instructor/sessions/submission"
-         [queryParams]="{ courseid: courseId, fsname: feedbackSessionName, previewas: emailOfInstructorToPreview }"
-         target="_blank"
-         rel="noopener noreferrer"
-         ngbTooltip="View how this session would look like to an instructor who is submitting feedback. Only instructors with submit privileges are included in the list.">
-        <ng-container *ngTemplateOutlet="previewInstructorBtn"></ng-container>
-      </a>
-      <ng-template #previewInstructorBtn>
-        <button id="btn-preview-instructor" class="btn btn-primary" [disabled]="emailOfInstructorToPreview.length === 0 || forDisplayOnly">Preview as Instructor</button>
-      </ng-template>
+    <div
+      [ngClass]="{'col-lg-5': !forDisplayOnly, 'col-lg-6': forDisplayOnly}"
+      class="col-12">
+      <div class="row align-items-center justify-content-center">
+        <select
+          id="preview-instructor"
+          [ngClass]="{ 'preview-example-select': forDisplayOnly }"
+          class="col-12 col-sm-8 col-lg-6 form-control form-select preview-select"
+          [(ngModel)]="emailOfInstructorToPreview"
+          aria-label="Select instructor to preview as"
+        >
+          <option *ngFor="let instructor of instructorsCanBePreviewedAs" [ngValue]="instructor.email">
+            {{ instructor.name }}
+          </option>
+        </select>
+        <div class="mt-1 mt-lg-0 col-sm-4 col-lg-6 w-max-content">
+          <a
+            *ngIf="emailOfInstructorToPreview.length !== 0; else previewInstructorBtn"
+            tmRouterLink="/web/instructor/sessions/submission"
+            [queryParams]="{
+              courseid: courseId,
+              fsname: feedbackSessionName,
+              previewas: emailOfInstructorToPreview
+            }"
+            target="_blank"
+            rel="noopener noreferrer"
+            ngbTooltip="View how this session would look like to an instructor who is submitting feedback. Only instructors with submit privileges are included in the list."
+          >
+            <ng-container *ngTemplateOutlet="previewInstructorBtn"></ng-container>
+          </a>
+        </div>
+        <ng-template #previewInstructorBtn>
+          <button
+            id="btn-preview-instructor"
+            class="btn btn-primary"
+            [disabled]="emailOfInstructorToPreview.length === 0 || forDisplayOnly"
+          >
+            Preview as Instructor
+          </button>
+        </ng-template>
+      </div>
     </div>
   </div>
 </div>
diff --git a/src/web/app/components/preview-session-panel/preview-session-panel.component.scss b/src/web/app/components/preview-session-panel/preview-session-panel.component.scss
index fb8f09dba4b..d6c1fbb3c1d 100644
--- a/src/web/app/components/preview-session-panel/preview-session-panel.component.scss
+++ b/src/web/app/components/preview-session-panel/preview-session-panel.component.scss
@@ -1,8 +1,30 @@
 .background-color-light-blue {
-  background-color: #EAEFF5;
+  background-color: '#EAEFF5';
 }
 
 .preview-select {
   float: left;
   width: 50%;
 }
+
+.preview-example-select {
+  float: left;
+  width: 50%;
+}
+
+@media screen and (max-width: 1100px) {
+  .preview-example-select {
+    width: 45%;
+  }
+}
+
+@media screen and (max-width: 576px) {
+  .preview-select,
+  .preview-example-select {
+    width: 100%;
+  }
+}
+
+.w-max-content {
+  min-width: max-content;
+}
diff --git a/src/web/app/components/preview-session-result-panel/preview-session-result-panel.component.html b/src/web/app/components/preview-session-result-panel/preview-session-result-panel.component.html
index 65c3dc1070f..115d2dbc096 100644
--- a/src/web/app/components/preview-session-result-panel/preview-session-result-panel.component.html
+++ b/src/web/app/components/preview-session-result-panel/preview-session-result-panel.component.html
@@ -1,37 +1,89 @@
 <div class="card-body background-color-light-blue text-center">
   <div class="row align-items-center">
-    <div class="col-lg-2 text-lg-end">
+    <div class="col-lg-2 text-lg-end mb-3 mb-lg-0">
       <b>Preview Results:</b>
     </div>
-    <div class="col-lg-5">
-      <select id="preview-student" class="form-control form-select preview-select" [(ngModel)]="emailOfStudentToPreview" aria-label="Select student to preview as">
-        <option *ngFor="let student of studentsOfCourse" [ngValue]="student.email">[{{ student.teamName }}] {{ student.name }}</option>
-      </select>
-      <a *ngIf="emailOfStudentToPreview.length !== 0; else previewStudentBtn" tmRouterLink="/web/sessions/result"
-         [queryParams]="{ courseid: courseId, fsname: feedbackSessionName, previewas: emailOfStudentToPreview }"
-         target="_blank"
-         rel="noopener noreferrer"
-         [ngbTooltip]="emailOfStudentToPreview.length !== 0 ? 'View how the session results would look like to a student.' : 'Preview is unavailable if the course has yet to have any student enrolled.'">
-        <ng-container *ngTemplateOutlet="previewStudentBtn"></ng-container>
-      </a>
-      <ng-template #previewStudentBtn>
-        <button id="btn-preview-student" class="btn btn-primary" [disabled]="emailOfStudentToPreview.length === 0 || forDisplayOnly">Preview as Student</button>
-      </ng-template>
+    <div class="col-12 col-lg-5 mb-3 mb-lg-0">
+      <div class="row align-items-center justify-content-center">
+        <select
+          id="preview-student"
+          class="col-12 col-sm-8 col-lg-6 form-control form-select preview-select"
+          [(ngModel)]="emailOfStudentToPreview"
+          aria-label="Select student to preview as"
+        >
+          <option *ngFor="let student of studentsOfCourse" [ngValue]="student.email">
+            [{{ student.teamName }}] {{ student.name }}
+          </option>
+        </select>
+        <div class="mt-1 mt-lg-0 col-sm-4 col-lg-6">
+          <a
+          *ngIf="emailOfStudentToPreview.length !== 0; else previewStudentBtn"
+          tmRouterLink="/web/sessions/result"
+          [queryParams]="{
+            courseid: courseId,
+            fsname: feedbackSessionName,
+            previewas: emailOfStudentToPreview
+          }"
+          target="_blank"
+          rel="noopener noreferrer"
+          [ngbTooltip]="
+            emailOfStudentToPreview.length !== 0
+              ? 'View how the session results would look like to a student.'
+              : 'Preview is unavailable if the course has yet to have any student enrolled.'
+          "
+          >
+          <ng-container *ngTemplateOutlet="previewStudentBtn"></ng-container>
+        </a>
+      </div>
+        <ng-template #previewStudentBtn>
+          <button
+            id="btn-preview-student"
+            class="btn btn-primary"
+            [disabled]="emailOfStudentToPreview.length === 0 || forDisplayOnly"
+          >
+            Preview as Student
+          </button>
+        </ng-template>
+      </div>
     </div>
-    <div class="col-lg-5">
-      <select id="preview-instructor" class="form-control form-select preview-select" [(ngModel)]="emailOfInstructorToPreview" aria-label="Select instructor to preview as">
-        <option *ngFor="let instructor of instructorsOfCourse" [ngValue]="instructor.email">{{ instructor.name }}</option>
-      </select>
-      <a *ngIf="emailOfInstructorToPreview.length !== 0; else previewInstructorBtn" tmRouterLink="/web/instructor/sessions/result"
-         [queryParams]="{ courseid: courseId, fsname: feedbackSessionName, previewas: emailOfInstructorToPreview }"
-         target="_blank"
-         rel="noopener noreferrer"
-         ngbTooltip="View how the session results would look like to an instructor.">
-        <ng-container *ngTemplateOutlet="previewInstructorBtn"></ng-container>
-      </a>
-      <ng-template #previewInstructorBtn>
-        <button id="btn-preview-instructor" class="btn btn-primary" [disabled]="emailOfInstructorToPreview.length === 0 || forDisplayOnly">Preview as Instructor</button>
-      </ng-template>
+    <div class="col-12 col-lg-5">
+      <div class="row align-items-center justify-content-center">
+        <select
+          id="preview-instructor"
+          class="col-12 col-sm-8 col-lg-6 form-control form-select preview-select"
+          [(ngModel)]="emailOfInstructorToPreview"
+          aria-label="Select instructor to preview as"
+        >
+          <option *ngFor="let instructor of instructorsOfCourse" [ngValue]="instructor.email">
+            {{ instructor.name }}
+          </option>
+        </select>
+        <div class="mt-1 mt-lg-0 col-sm-4 col-lg-6 w-max-content">
+          <a
+          *ngIf="emailOfInstructorToPreview.length !== 0; else previewInstructorBtn"
+          tmRouterLink="/web/instructor/sessions/result"
+          [queryParams]="{
+            courseid: courseId,
+            fsname: feedbackSessionName,
+            previewas: emailOfInstructorToPreview
+          }"
+          target="_blank"
+          rel="noopener noreferrer"
+          ngbTooltip="View how the session results would look like to an instructor."
+          >
+            <ng-container *ngTemplateOutlet="previewInstructorBtn"></ng-container>
+          </a>
+        </div>
+        <ng-template #previewInstructorBtn>
+          <button
+            id="btn-preview-instructor"
+            class="btn btn-primary"
+            [disabled]="emailOfInstructorToPreview.length === 0 || forDisplayOnly"
+          >
+            Preview as Instructor
+          </button>
+        </ng-template>
+      </div>
     </div>
   </div>
 </div>
diff --git a/src/web/app/components/preview-session-result-panel/preview-session-result-panel.component.scss b/src/web/app/components/preview-session-result-panel/preview-session-result-panel.component.scss
index fb8f09dba4b..6e7991f326d 100644
--- a/src/web/app/components/preview-session-result-panel/preview-session-result-panel.component.scss
+++ b/src/web/app/components/preview-session-result-panel/preview-session-result-panel.component.scss
@@ -1,8 +1,19 @@
 .background-color-light-blue {
-  background-color: #EAEFF5;
+  background-color: '#EAEFF5';
 }
 
 .preview-select {
   float: left;
   width: 50%;
 }
+
+// small
+@media screen and (max-width: 576px) {
+  .preview-select {
+    width: 100%;
+  }
+}
+
+.w-max-content {
+  min-width: max-content;
+}
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 7d36464e94b..12f5299d3e6 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
@@ -3051,45 +3051,61 @@ exports[`InstructorSessionEditPageComponent should snap with feedback session qu
             class="row align-items-center"
           >
             <div
-              class="col-lg-2 text-lg-end"
+              class="mb-3 mb-lg-0 col-lg-2 text-lg-end"
             >
               <b>
                 Preview Session:
               </b>
             </div>
             <div
-              class="col-lg-5"
+              class="col-12 mb-3 mb-lg-0 col-lg-5"
             >
-              <select
-                aria-label="Select student to preview as"
-                class="form-control form-select preview-select ng-untouched ng-pristine ng-valid"
-                id="preview-student"
-              >
-              </select>
-              <button
-                class="btn btn-primary"
-                disabled=""
-                id="btn-preview-student"
+              <div
+                class="row align-items-center justify-content-center"
               >
-                Preview as Student
-              </button>
+                <select
+                  aria-label="Select student to preview as"
+                  class="col-12 col-sm-8 col-lg-6 form-control form-select preview-select ng-untouched ng-pristine ng-valid"
+                  id="preview-student"
+                >
+                </select>
+                <div
+                  class="mt-1 mt-lg-0 col-sm-4 col-lg-6 w-max-content"
+                >
+                  <button
+                    class="btn btn-primary"
+                    disabled=""
+                    id="btn-preview-student"
+                  >
+                     Preview as Student 
+                  </button>
+                </div>
+              </div>
             </div>
             <div
-              class="col-lg-5"
+              class="col-12 col-lg-5"
             >
-              <select
-                aria-label="Select instructor to preview as"
-                class="form-control form-select preview-select ng-untouched ng-pristine ng-valid"
-                id="preview-instructor"
-              >
-              </select>
-              <button
-                class="btn btn-primary"
-                disabled=""
-                id="btn-preview-instructor"
+              <div
+                class="row align-items-center justify-content-center"
               >
-                Preview as Instructor
-              </button>
+                <select
+                  aria-label="Select instructor to preview as"
+                  class="col-12 col-sm-8 col-lg-6 form-control form-select preview-select ng-untouched ng-pristine ng-valid"
+                  id="preview-instructor"
+                >
+                </select>
+                <div
+                  class="mt-1 mt-lg-0 col-sm-4 col-lg-6 w-max-content"
+                >
+                  <button
+                    class="btn btn-primary"
+                    disabled=""
+                    id="btn-preview-instructor"
+                  >
+                     Preview as Instructor 
+                  </button>
+                </div>
+              </div>
             </div>
           </div>
         </div>
@@ -4788,45 +4804,61 @@ exports[`InstructorSessionEditPageComponent should snap with new question added
             class="row align-items-center"
           >
             <div
-              class="col-lg-2 text-lg-end"
+              class="mb-3 mb-lg-0 col-lg-2 text-lg-end"
             >
               <b>
                 Preview Session:
               </b>
             </div>
             <div
-              class="col-lg-5"
+              class="col-12 mb-3 mb-lg-0 col-lg-5"
             >
-              <select
-                aria-label="Select student to preview as"
-                class="form-control form-select preview-select ng-untouched ng-pristine ng-valid"
-                id="preview-student"
-              >
-              </select>
-              <button
-                class="btn btn-primary"
-                disabled=""
-                id="btn-preview-student"
+              <div
+                class="row align-items-center justify-content-center"
               >
-                Preview as Student
-              </button>
+                <select
+                  aria-label="Select student to preview as"
+                  class="col-12 col-sm-8 col-lg-6 form-control form-select preview-select ng-untouched ng-pristine ng-valid"
+                  id="preview-student"
+                >
+                </select>
+                <div
+                  class="mt-1 mt-lg-0 col-sm-4 col-lg-6 w-max-content"
+                >
+                  <button
+                    class="btn btn-primary"
+                    disabled=""
+                    id="btn-preview-student"
+                  >
+                     Preview as Student 
+                  </button>
+                </div>
+              </div>
             </div>
             <div
-              class="col-lg-5"
+              class="col-12 col-lg-5"
             >
-              <select
-                aria-label="Select instructor to preview as"
-                class="form-control form-select preview-select ng-untouched ng-pristine ng-valid"
-                id="preview-instructor"
-              >
-              </select>
-              <button
-                class="btn btn-primary"
-                disabled=""
-                id="btn-preview-instructor"
+              <div
+                class="row align-items-center justify-content-center"
               >
-                Preview as Instructor
-              </button>
+                <select
+                  aria-label="Select instructor to preview as"
+                  class="col-12 col-sm-8 col-lg-6 form-control form-select preview-select ng-untouched ng-pristine ng-valid"
+                  id="preview-instructor"
+                >
+                </select>
+                <div
+                  class="mt-1 mt-lg-0 col-sm-4 col-lg-6 w-max-content"
+                >
+                  <button
+                    class="btn btn-primary"
+                    disabled=""
+                    id="btn-preview-instructor"
+                  >
+                     Preview as Instructor 
+                  </button>
+                </div>
+              </div>
             </div>
           </div>
         </div>