From bce3ba9bb1d89db62bffb96b47c26717f709a54c Mon Sep 17 00:00:00 2001
From: Elblinator <lelble@intevation.de>
Date: Mon, 27 May 2024 16:38:16 +0200
Subject: [PATCH] start fixing projector-detail

---
 .../projector-detail.component.html            | 18 ++++++++++--------
 .../projector-detail.component.scss            |  9 ++++++++-
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/client/src/app/site/pages/meetings/pages/projectors/modules/projector-detail/components/projector-detail/projector-detail.component.html b/client/src/app/site/pages/meetings/pages/projectors/modules/projector-detail/components/projector-detail/projector-detail.component.html
index 42fcaf6dc1..d46c24db09 100644
--- a/client/src/app/site/pages/meetings/pages/projectors/modules/projector-detail/components/projector-detail/projector-detail.component.html
+++ b/client/src/app/site/pages/meetings/pages/projectors/modules/projector-detail/components/projector-detail/projector-detail.component.html
@@ -91,7 +91,9 @@ <h2>{{ projector.name }}</h2>
                         <mat-icon>refresh</mat-icon>
                     </button>
                     <!-- scaling indicator -->
-                    <div class="button-size" [ngClass]="projector.scale !== 0 ? 'warn' : ''">{{ projector.scale }}</div>
+                    <span class="button-size" [ngClass]="projector.scale !== 0 ? 'warn' : ''">
+                        {{ projector.scale }}
+                    </span>
 
                     <!-- scroll viewport up (fast), decrease scroll counter -->
                     <button
@@ -142,15 +144,15 @@ <h2>{{ projector.name }}</h2>
                         <mat-icon>refresh</mat-icon>
                     </button>
                     <!-- scroll indicator -->
-                    <div class="button-size" [ngClass]="projector.scroll !== 0 ? 'warn' : ''">
+                    <span class="button-size" [ngClass]="projector.scroll !== 0 ? 'warn' : ''">
                         {{ projector.scroll }}
-                    </div>
+                    </span>
                 </div>
             </div>
         </os-tile>
         <os-tile [preferredSize]="projectorTileSizeRight">
             <div *osPerms="permission.projectorCanManage" style="padding-bottom: 60px">
-                <div class="control-group slide-controls">
+                <div class="back-n-forth-controls slide-controls">
                     <button
                         type="button"
                         mat-button
@@ -158,7 +160,7 @@ <h2>{{ projector.name }}</h2>
                         [disabled]="projector.history_projections.length === 0"
                     >
                         <mat-icon>arrow_back</mat-icon>
-                        <span>{{ 'Previous' | translate }}</span>
+                        {{ 'Previous' | translate }}
                     </button>
                     <button
                         type="button"
@@ -166,8 +168,8 @@ <h2>{{ projector.name }}</h2>
                         (click)="projectNextSlide()"
                         [disabled]="projector.preview_projections.length === 0"
                     >
-                        <span>{{ 'Next' | translate }}</span>
-                        <mat-icon>arrow_forward</mat-icon>
+                        {{ 'Next' | translate }}
+                        <mat-icon iconPositionEnd>arrow_forward</mat-icon>
                     </button>
                     <hr />
                 </div>
@@ -178,7 +180,7 @@ <h2>{{ projector.name }}</h2>
                             *ngFor="let projection of projector.nonStableCurrentProjections"
                             class="current-element backgroundColorAccent"
                         >
-                            <div class="emelent-grid">
+                            <div class="element-grid">
                                 <os-projector-button [blendIn]="true"></os-projector-button>
 
                                 <!-- Slide title and subtitle -->
diff --git a/client/src/app/site/pages/meetings/pages/projectors/modules/projector-detail/components/projector-detail/projector-detail.component.scss b/client/src/app/site/pages/meetings/pages/projectors/modules/projector-detail/components/projector-detail/projector-detail.component.scss
index 64c2c2fd3b..3c1c558c58 100644
--- a/client/src/app/site/pages/meetings/pages/projectors/modules/projector-detail/components/projector-detail/projector-detail.component.scss
+++ b/client/src/app/site/pages/meetings/pages/projectors/modules/projector-detail/components/projector-detail/projector-detail.component.scss
@@ -15,6 +15,13 @@
 }
 
 .control-group {
+    padding-left: 5px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+}
+
+.back-n-forth-controls {
     .button-size {
         padding-left: 5px;
         display: inline-block;
@@ -33,7 +40,7 @@
     margin-bottom: 20px;
     box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.25);
 
-    .emelent-grid {
+    .element-grid {
         display: grid;
         width: 100%;
         grid-gap: 5px;