chore: fix ui bugs

src/extra_styles.css

@@ -320,6 +320,11 @@ markdown-dom p
   width: 20em!important;
 }
 
+.w-100vw
+{
+  width: 100vw!important;
+}
+
 .mw-100
 {
   max-width: 100%!important;

src/layouts/fourCorners/fourCorners.style.css

@@ -9,29 +9,33 @@
 
 .corner-container
 {
-  z-index: 5;
+  max-width: 100%;
 }
 
 .grid-container
 {
   height: 50%;
   display: grid;
-  grid-template-columns: auto auto;
+  grid-template-columns: minmax(auto, 100%) minmax(auto, 100%);
 }
 
 .top-left
 {
   place-self: start start;
+  z-index: 2;
 }
 .top-right
 {
   place-self: start end;
+  z-index: 1;
 }
 .bottom-left
 {
   place-self: end start;
+  z-index: 2;
 }
 .bottom-right
 {
   place-self: end end;
+  z-index: 1;
 }

src/viewerModule/nehuba/nehubaViewerGlue/nehubaViewerGlue.style.css

@@ -29,3 +29,13 @@
 {
   background-color: rgba(0, 0, 0, 0.7);
 }
+
+.nehuba-viewer-container-parent
+{
+  z-index: 1;
+}
+
+current-layout
+{
+  z-index: 2;
+}

src/viewerModule/nehuba/nehubaViewerGlue/nehubaViewerGlue.template.html

-<div class="d-block w-100 h-100"
+<div class="d-block w-100 h-100 nehuba-viewer-container-parent"
   (touchmove)="$event.preventDefault()"
   (drag-drop-file)="handleFileDrop($event)"
   iav-viewer-touch-interface
@@ -122,7 +122,7 @@
   let-panelIndex="panelIndex"
   let-visible="visible">
 
-  <div class="opacity-crossfade always-show-touchdevice pe-all overlay-btn-container"
+  <div class="ws-no-wrap opacity-crossfade always-show-touchdevice pe-all overlay-btn-container"
     [ngClass]="{ onHover: visible }"
     [attr.data-viewer-controller-visible]="visible"
     [attr.data-viewer-controller-index]="panelIndex">

src/viewerModule/viewerCmp/viewerCmp.template.html

@@ -95,7 +95,7 @@
 
 
       <!-- bottom left -->
-      <div iavLayoutFourCornersBottomLeft class="ws-no-wrap">
+      <div iavLayoutFourCornersBottomLeft class="ws-no-wrap d-inline-flex w-100vw pe-none align-items-center mb-4">
 
         <!-- special bottom left -->
         <ng-template [ngIf]="viewerMode$ | async" let-mode [ngIfElse]="localBottomLeftTmpl"></ng-template>
@@ -348,6 +348,8 @@
 
 </ng-template>
 
+
+<!-- special mode top right -->
 <ng-template #specialTopRightTmpl let-mode="mode">
   <mat-card class="mat-card-sm pe-all m-4">
     <span>
@@ -367,16 +369,18 @@
   <!-- atlas selector -->
   <atlas-layer-selector *ngIf="viewerLoaded && !(isStandaloneVolumes$ | async)"
     #alSelector="atlasLayerSelector"
-    class="d-inline-block"
+    class="d-inline-block flex-grow-0 flex-shrink-0 pe-all"
     (iav-outsideClick)="alSelector.selectorExpanded = false">
   </atlas-layer-selector>
 
   <!-- chips -->
-  <viewer-state-breadcrumb
-    *ngIf="parcellationSelected$ | async"
-    class="d-inline-block"
-    (on-item-click)="showFullSideNav()">
-  </viewer-state-breadcrumb>
+  <div *ngIf="parcellationSelected$ | async"
+    class="d-inline-block flex-grow-1 flex-shrink-1 pe-none overflow-x-auto overflow-y-hidden">
+
+    <viewer-state-breadcrumb class="d-inline-block pe-all" (on-item-click)="showFullSideNav()">
+    </viewer-state-breadcrumb>
+  </div>
+
 </ng-template>