Merge pull request #309 from hubmapconsortium/Interface-fixes

Interface fixes

apps/ftu-ui-small-wc/src/app/app.component.scss

@@ -2,7 +2,7 @@
 
 :host {
   height: 100%;
-  font-family: 'Inter';
+  font-family: Inter;
 
   ::ng-deep .product-title {
     width: max-content;

apps/ftu-ui/src/app/app.component.scss

@@ -4,7 +4,7 @@
   display: grid;
   width: 100%;
   height: 100%;
-  grid-template-columns: 21rem calc(100% - 21rem);
+  grid-template-columns: 21rem max(100% - 21rem);
   grid-template-rows: 4.5rem max(100% - 4.5rem);
   grid-template-areas:
     'header header'
@@ -13,6 +13,8 @@
   .header {
     grid-area: header;
     border-bottom: 0.0625rem solid rgba(vars.$dark-dividers);
+    width: 100%;
+    z-index: 1;
   }
 
   .sidebar {
@@ -22,7 +24,6 @@
 
   .page-content::ng-deep {
     grid-area: content;
-    overflow-y: hidden;
     ftu-landing {
       max-height: 100%;
       overflow-y: auto;

apps/ftu-ui/src/app/pages/ftu-page/ftu.component.scss

@@ -1,15 +1,14 @@
 :host {
   display: flex;
   flex-direction: column;
-  height: 100%;
-  overflow-y: hidden;
+  min-width: 59rem;
 
   .content-container {
     display: flex;
-    height: 100%;
 
     .illustration {
-      width: 50%;
+      max-width: calc(100% - 43rem);
+      width: 100%;
     }
 
     .fullscreen-content-container {