Fine lightbox controls #587

src/frontend/app/ui/gallery/grid/grid.gallery.component.ts

@@ -356,7 +356,7 @@ export class GalleryGridComponent
     // (on lightbox navigation)
     while (
       (this.mediaToRender.length - 1 < groupIndex &&
-        this.mediaToRender[this.mediaToRender.length - 1].media.length < mediaIndex) &&
+        this.mediaToRender[this.mediaToRender.length - 1]?.media?.length < mediaIndex) &&
       this.renderARow() !== null
       // eslint-disable-next-line no-empty
       ) {

src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.html

@@ -5,7 +5,7 @@
 
   <div [class.dim-controls]="controllersDimmed"
        class="controls controls-top">
-    <div class="controls-background rounded-start-bottom pe-1 pt-1">
+    <div class="controls-background rounded-start-bottom">
       <div class="highlight control-button" (click)="toggleInfoPanel.emit()"
            title="info key: i" i18n-title>
         <ng-icon  name="ionInformationOutline"></ng-icon>

src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.css

@@ -17,6 +17,11 @@
   -moz-transition: all 0.3s ease-in-out;
 }
 
+.controls-background {
+  display: inline-block;
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
 .sebm-google-map-container {
   width: 100%;
   height: 100%;
@@ -49,7 +54,6 @@
   height: initial;
   text-align: right;
   width: 100%;
-  padding: 5px;
   font-size: large;
 }
 

src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.html

@@ -20,6 +20,7 @@
 
   <div id="controllers-container" *ngIf="controllersVisible">
     <div id="controls">
+      <div class="controls-background rounded-start-bottom">
         <div class="highlight control-button"
              *ngIf="fullScreenService.isFullScreenEnabled()"
              (click)="fullScreenService.exitFullScreen()" title="toggle fullscreen, key: f" i18n-title>
@@ -40,3 +41,4 @@
 
     </div>
   </div>
+</div>