From 1abd2ec22c087fef3196566f9413395ca8105b88 Mon Sep 17 00:00:00 2001
From: Olivia Guyot <olivia.guyot@camptocamp.com>
Date: Tue, 19 Nov 2024 11:45:07 +0100
Subject: [PATCH] feat(datahub): better layout for preview tabs

---
 .../record/record-metadata/record-metadata.component.css  | 8 ++++++++
 .../record/record-metadata/record-metadata.component.html | 4 +---
 .../record/src/lib/data-view/data-view.component.html     | 2 +-
 .../record/src/lib/map-view/map-view.component.html       | 4 ++--
 4 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/apps/datahub/src/app/record/record-metadata/record-metadata.component.css b/apps/datahub/src/app/record/record-metadata/record-metadata.component.css
index e3a0105a26..55d8c876f6 100644
--- a/apps/datahub/src/app/record/record-metadata/record-metadata.component.css
+++ b/apps/datahub/src/app/record/record-metadata/record-metadata.component.css
@@ -1,3 +1,8 @@
+/* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
+::ng-deep .mat-mdc-tab-labels {
+  /* move tabs on the right to let the title show */
+  margin-left: 140px;
+}
 ::ng-deep .mat-mdc-tab.mdc-tab {
   letter-spacing: 0.88px;
 }
@@ -16,6 +21,9 @@
 }
 @media only screen and (max-width: 639px) {
   /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
+  ::ng-deep .mat-mdc-tab-labels {
+    margin-left: 0px;
+  }
   ::ng-deep .mat-mdc-tab.mdc-tab {
     padding: 0px !important;
     margin-right: 24px;
diff --git a/apps/datahub/src/app/record/record-metadata/record-metadata.component.html b/apps/datahub/src/app/record/record-metadata/record-metadata.component.html
index 12a73987d8..62a7e5abab 100644
--- a/apps/datahub/src/app/record/record-metadata/record-metadata.component.html
+++ b/apps/datahub/src/app/record/record-metadata/record-metadata.component.html
@@ -79,9 +79,7 @@
           >
             <mat-tab [disabled]="(displayMap$ | async) === false">
               <ng-template mat-tab-label>
-                <span class="tab-header-label sm:ml-32" translate
-                  >record.tab.map</span
-                >
+                <span class="tab-header-label" translate>record.tab.map</span>
               </ng-template>
               <div
                 class="block"
diff --git a/libs/feature/record/src/lib/data-view/data-view.component.html b/libs/feature/record/src/lib/data-view/data-view.component.html
index a108eeb621..4fad234bda 100644
--- a/libs/feature/record/src/lib/data-view/data-view.component.html
+++ b/libs/feature/record/src/lib/data-view/data-view.component.html
@@ -2,7 +2,7 @@
   <gn-ui-dropdown-selector
     *ngIf="dropdownChoices$ | async as choices"
     [title]="'table.select.data' | translate"
-    class="truncate p-1 -mx-1"
+    class="truncate p-1 -mx-1 self-end mb-1"
     extraBtnClass="!text-primary font-sans font-medium"
     [choices]="choices"
     (selectValue)="selectLink($event)"
diff --git a/libs/feature/record/src/lib/map-view/map-view.component.html b/libs/feature/record/src/lib/map-view/map-view.component.html
index ebb313c87b..fb1da0662a 100644
--- a/libs/feature/record/src/lib/map-view/map-view.component.html
+++ b/libs/feature/record/src/lib/map-view/map-view.component.html
@@ -1,7 +1,7 @@
 <div class="w-full h-full flex flex-col p-1">
-  <div class="w-full flex justify-end mb-7 mt-1">
+  <div class="w-full flex justify-end">
     <gn-ui-dropdown-selector
-      class="truncate p-1 -mx-1"
+      class="truncate p-1 -mx-1 mb-1"
       extraBtnClass="!text-primary font-sans font-medium"
       [title]="'map.select.layer' | translate"
       [choices]="dropdownChoices$ | async"