[#12269] Instructor edit sessions page: Fix add question button overf…

…low. (#12477)

* fixed overlapping button issue

* Overflow fixed

* Updating failing checks

* Reduced padding at ends and for the info button

* Corresponding snapshots updated

* Padding changed to horizontal axis

* snapshots updated

* custom styling added

src/web/app/components/adding-question-panel/adding-question-panel.component.html

@@ -1,6 +1,6 @@
-<div class="card-body background-color-light-blue text-center">
+<div class="card-body background-color-light-blue text-center responsive-padding">
   <div ngbDropdown class="d-inline-block">
-    <button id="btn-new-question" class="btn btn-primary" ngbDropdownToggle>Add New Question</button>
+    <button id="btn-new-question" class="btn btn-primary btn-small-padding" ngbDropdownToggle>Add New Question</button>
     <div id="new-question-dropdown" ngbDropdownMenu>
       <button class="dropdown-item" (click)="templateQuestionModalHandler()">Choose from template questions</button>
       <div class="dropdown-divider"></div>
@@ -20,11 +20,11 @@
       </ng-container>
     </div>
   </div>
-  <a type="button" class="btn btn-link" *ngIf="!isLinkDisabled" target="_blank" rel="noopener noreferrer"
+  <a type="button" class="btn btn-link px-1 px-sm-3" *ngIf="!isLinkDisabled" target="_blank" rel="noopener noreferrer"
     tmRouterLink="/web/instructor/help" [queryParams]="{questionId: 'questions', section: 'questions'}" aria-label="Help for questions">
     <i class="fas fa-info-circle"></i>
   </a>
-  <a type="button" class="btn btn-link" *ngIf="isLinkDisabled"><i class="fas fa-info-circle"></i></a>
-  <button id="btn-copy-question" class="btn btn-primary" (click)="copyQuestionsFromOtherSessionsHandler()"
+  <a type="button" class="btn btn-link px-1 px-sm-3" *ngIf="isLinkDisabled"><i class="fas fa-info-circle"></i></a>
+  <button id="btn-copy-question" class="btn btn-primary btn-small-padding" (click)="copyQuestionsFromOtherSessionsHandler()"
     [disabled]="isCopyingQuestion"><tm-ajax-loading *ngIf="isCopyingQuestion"></tm-ajax-loading>Copy Question</button>
 </div>

src/web/app/components/adding-question-panel/adding-question-panel.component.scss

@@ -1,3 +1,16 @@
 .background-color-light-blue {
   background-color: #EAEFF5;
 }
+
+.responsive-padding {
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+@media (max-width: 576px) {
+  // prevent overflow for small screen sizes
+  .btn-small-padding {
+    padding-left: .5rem;
+    padding-right: .5rem;
+  }
+}

src/web/app/pages-instructor/instructor-session-edit-page/__snapshots__/instructor-session-edit-page.component.spec.ts.snap

@@ -2738,15 +2738,15 @@ exports[`InstructorSessionEditPageComponent should snap with feedback session qu
     >
       <tm-adding-question-panel>
         <div
-          class="card-body background-color-light-blue text-center"
+          class="card-body background-color-light-blue text-center responsive-padding"
         >
           <div
             class="d-inline-block"
             ngbdropdown=""
           >
             <button
               aria-expanded="false"
-              class="dropdown-toggle btn btn-primary"
+              class="dropdown-toggle btn btn-primary btn-small-padding"
               id="btn-new-question"
               ngbdropdowntoggle=""
             >
@@ -3019,7 +3019,7 @@ exports[`InstructorSessionEditPageComponent should snap with feedback session qu
           </div>
           <a
             aria-label="Help for questions"
-            class="btn btn-link"
+            class="btn btn-link px-1 px-sm-3"
             href="/web/instructor/help?questionId=questions&section=questions"
             rel="noopener noreferrer"
             target="_blank"
@@ -3031,7 +3031,7 @@ exports[`InstructorSessionEditPageComponent should snap with feedback session qu
             />
           </a>
           <button
-            class="btn btn-primary"
+            class="btn btn-primary btn-small-padding"
             id="btn-copy-question"
           >
             Copy Question