Merge branch '710-superfluous-space-causes-horizontal-scrolling' into 'staging'

Resolve "Superfluous space causes horizontal scrolling"

Closes #710

See merge request arsnova/frag.jetzt!711

src/app/components/shared/header/header.component.html

@@ -59,11 +59,11 @@
 
       <button mat-flat-button
               tabindex="0"
-              *ngIf="!router.url.endsWith('moderator/comments') && router.url.endsWith('/comments') &&
-                     deviceType === 'desktop'"
-              routerLink="quiz">
-        <mat-icon>timer</mat-icon>
-        <span>{{'header.quiz-now' | translate}}</span>
+              *ngIf="deviceType === 'desktop' && !router.url.endsWith('moderator/comments') &&
+                     isSafari === 'false'"
+              routerLink="participant/room/{{shortId}}/comments/questionwall">
+        <mat-icon class="beamer-icon" svgIcon="beamer"></mat-icon>
+        <span>{{'header.questionwall' | translate}}</span>
       </button>
 
       <!--Feedback im Hörsaal-->
@@ -200,15 +200,6 @@
               <span>{{'header.moderationboard' | translate}}</span>
             </button>
 
-            <button mat-menu-item
-                    tabindex="0"
-                    *ngIf="deviceType !== 'mobile' && !router.url.endsWith('moderator/comments') &&
-                     isSafari === 'false'"
-                    routerLink="participant/room/{{shortId}}/comments/questionwall">
-              <mat-icon class="beamer-icon" svgIcon="beamer"></mat-icon>
-              <span>{{'header.questionwall' | translate}}</span>
-            </button>
-
             <button mat-menu-item
                     tabindex="0"
                     *ngIf="!router.url.endsWith('moderator/comments') && deviceType === 'mobile'"
@@ -219,7 +210,7 @@
 
             <button mat-menu-item
                     tabindex="0"
-                    *ngIf="!router.url.endsWith('moderator/comments') && deviceType === 'mobile'"
+                    *ngIf="!router.url.endsWith('moderator/comments')"
                     routerLink="quiz">
               <mat-icon>timer</mat-icon>
               <span>{{'header.quiz-now' | translate}}</span>

src/app/components/shared/write-comment/write-comment.component.html

@@ -23,26 +23,22 @@
       </mat-select>
     </button>
   </div>
-  <div class="anchor-wrp" *ngIf="enabled">
-    <div class="anchor-right">
-      <mat-form-field *ngIf="tags"
-                      class="tag-form-field">
-        <mat-label>
-          <mat-icon class="icon-svg"
-                    svgIcon="comment_tag"></mat-icon>
-          {{'comment-page.tag' | translate}}
-        </mat-label>
-        <label for="tagSelect">{{selectedTag}}</label>
-        <mat-select [(ngModel)]="selectedTag"
-                    class="tag-select"
-                    id="tagSelect">
-          <mat-option>{{'comment-page.tag-reset' | translate}}</mat-option>
-          <mat-option *ngFor="let tag of tags"
-                      value="{{tag}}">{{tag}}</mat-option>
-        </mat-select>
-      </mat-form-field>
-    </div>
-  </div>
+  <mat-form-field *ngIf="tags"
+                  class="tag-form-field">
+    <mat-label>
+      <mat-icon class="icon-svg"
+                svgIcon="comment_tag"></mat-icon>
+      {{'comment-page.tag' | translate}}
+    </mat-label>
+    <label for="tagSelect">{{selectedTag}}</label>
+    <mat-select [(ngModel)]="selectedTag"
+                class="tag-select"
+                id="tagSelect">
+      <mat-option>{{'comment-page.tag-reset' | translate}}</mat-option>
+      <mat-option *ngFor="let tag of tags"
+                  value="{{tag}}">{{tag}}</mat-option>
+    </mat-select>
+  </mat-form-field>
 </ars-row>
 <ars-row [height]="12"></ars-row>
 <app-view-comment-data *ngIf="enabled"

src/app/components/shared/write-comment/write-comment.component.scss

@@ -118,22 +118,14 @@ Styling for tag selection
 }
 
 .tag-form-field {
-  @media screen and (max-width: 500px) {
-    width: 70px;
-  }
   z-index: 10000;
-}
+  float: right;
 
-.anchor-right {
-  @media screen and (max-width: 500px) {
-    width: 70px;
-    left: calc(100% - 70px);
+  @media screen and (max-width: 480px) {
+    float: unset;
+    width: max-content;
+    margin: 5px 16px;
   }
-  width: 200px;
-  height: 50px;
-  position: relative;
-  left: calc(100% - 200px);
-  top: 0;
 }
 
 .anchor-wrp {
@@ -163,6 +155,11 @@ Styling for language select
   margin-right: 0;
   width: 200px;
   display: inline-block;
+
+  > button {
+    padding: 0 0 0 2px;
+    margin-left: 16px;
+  }
 }
 
 /*