[#12081] User-friendliness: Fix margins on mobile (#12096)

* Redo all changes over the last few days

* Missed out a few changes

* Resolve comments

* Update tests

src/web/app/components/feedback-path-panel/feedback-path-panel.component.html

@@ -2,7 +2,7 @@
   <div>
     <b class="feedback-path-title">Feedback Path</b> (Who is giving feedback about whom?)
   </div>
-  <div ngbDropdown #mainMenu="ngbDropdown" class="margin-top-15px" autoClose="outside">
+  <div ngbDropdown #mainMenu="ngbDropdown" class="margin-top-15px overflow-scroll" autoClose="outside">
     <button id="btn-feedback-path" class="btn btn-light white-space-normal" ngbDropdownToggle [disabled]="!model.isEditable || commonFeedbackPaths.size === 1">
       <span *ngIf="!model.isUsingOtherFeedbackPath">
         {{ model.giverType | giverTypeDescription }} will give feedback on <i class="fas fa-arrow-right"></i> {{ model.recipientType | recipientTypeDescription }}

src/web/app/components/question-edit-form/__snapshots__/question-edit-form.component.spec.ts.snap

@@ -234,7 +234,7 @@ exports[`QuestionEditFormComponent should snap with default view 1`] = `
             </div>
             <div
               autoclose="outside"
-              class="margin-top-15px dropdown"
+              class="margin-top-15px overflow-scroll dropdown"
               ngbdropdown=""
             >
               <button

src/web/app/components/question-text-with-info/question-text-with-info.component.scss

@@ -1,3 +1,7 @@
 .padding-0 {
   padding: 0;
 }
+
+.col-auto {
+  flex: 0 1 auto;
+}