feat(datahub): fix spacing in different pages & responsive layout

apps/datahub/src/app/home/home-page/home-page.component.html

@@ -4,7 +4,7 @@
       <datahub-home-header [expandRatio]="expandRatio"></datahub-home-header>
     </ng-template>
   </gn-ui-sticky-header>
-  <main>
+  <main class="px-5">
     <router-outlet></router-outlet>
   </main>
 </div>

apps/datahub/src/app/home/news-page/news-page.component.css

@@ -3,14 +3,16 @@
   --full-width: 100%;
   --container-width: min(1024px, var(--full-width));
   --right-col-width: 320px;
+  --padding: -20px; /* compensate from router outlet padding */
 }
 
 .backdrop {
   position: absolute;
   height: 100%;
   top: 0;
-  right: 0;
+  right: var(--padding);
   width: calc(
-    var(--right-col-width) + (var(--full-width) - var(--container-width)) / 2
+    var(--right-col-width) - var(--padding) +
+      (var(--full-width) - var(--container-width)) / 2
   );
 }

apps/datahub/src/app/home/news-page/news-page.component.html

@@ -1,7 +1,7 @@
 <div class="relative">
   <div class="backdrop bg-gray-50"></div>
   <div class="relative pt-[44px] container-lg mx-auto flex">
-    <div class="pr-[61px] overflow-hidden flex-grow">
+    <div class="pr-0 lg:pr-[61px] overflow-hidden flex-grow">
       <h2
         class="text-2xl font-title text-primary leading-7 text-left mb-8"
         translate

apps/datahub/src/app/home/organisations-page/organisations-page.component.html

@@ -1,3 +1,3 @@
-<div>
+<div class="container-lg mx-auto">
   <gn-ui-organisations></gn-ui-organisations>
 </div>

apps/datahub/src/app/home/search/record-preview-datahub/record-preview-datahub.component.html

@@ -1,4 +1,4 @@
-<div class="flex cursor-pointer flex-wrap sm:flex-nowrap">
+<div class="container-lg mx-auto flex cursor-pointer flex-wrap sm:flex-nowrap">
   <div class="flex-shrink-0 w-full sm:w-52">
     <div
       class="overflow-hidden bg-gray-100 rounded-lg w-full border border-gray-300 h-36"

apps/datahub/src/app/home/search/search-page/search-page.component.html

@@ -1,9 +1,11 @@
-<div class="px-3 sm:p-7 sm:my-8 sm:shadow-primary-light sm:rounded-2xl">
-  <datahub-search-summary></datahub-search-summary>
-</div>
-<div>
-  <gn-ui-results-list-container
-    [scrollableOptions]="scrollableOptions"
-    (mdSelect)="onMetadataSelection($event)"
-  ></gn-ui-results-list-container>
+<div class="container-lg mx-auto">
+  <div class="px-3 sm:p-7 sm:my-8 sm:shadow-primary-light sm:rounded-2xl">
+    <datahub-search-summary></datahub-search-summary>
+  </div>
+  <div>
+    <gn-ui-results-list-container
+      [scrollableOptions]="scrollableOptions"
+      (mdSelect)="onMetadataSelection($event)"
+    ></gn-ui-results-list-container>
+  </div>
 </div>

apps/datahub/src/app/record/header-record/header-record.component.html

@@ -10,7 +10,7 @@
       {{ metadata.title }}
     </div>
 
-    <div class="absolute" style="top: 20px">
+    <div class="absolute" style="left: 16px; top: 16px">
       <gn-ui-navigation-button
         (click)="back()"
         [label]="'datahub.search.back' | translate"