Merge pull request #367 from visual-framework/fix/embl-grid-and-breadcrumbs

fix: embl-grid-and-breadcrumbs

components/embl-breadcrumbs-lookup/embl-breadcrumbs-lookup.njk

-{% render "@embl-content-meta-properties", {"meta_who": "James Sharpe", "meta_what": "Sharpe Group", "meta_where": "EMBL Barcelona"} %}
-
-<nav class="vf-breadcrumbs embl-breadcrumbs-lookup" aria-label="Breadcrumb" data-embl-js-breadcrumbs-lookup>
-  <div class="vf-list vf-list--inline | vf-breadcrumbs__list | embl-breadcrumbs-lookup--ghosting"></div>
-</nav>
+{% render "@embl-content-meta-properties", {"meta_who": "James Sharpe", "meta_what": "Sharpe Group", "meta_where": "EMBL Barcelona", "meta_active": "what"} %}
+<div class="embl-grid">
+  <nav class="vf-breadcrumbs embl-breadcrumbs-lookup" aria-label="Breadcrumb" data-embl-js-breadcrumbs-lookup>
+    <div class="vf-list vf-list--inline | vf-breadcrumbs__list | embl-breadcrumbs-lookup--ghosting"></div>
+  </nav>
+</div>

components/embl-breadcrumbs-lookup/embl-breadcrumbs-lookup.scss

 // embl-breadcrumbs-lookup
 
+.embl-grid .embl-breadcrumbs-lookup:first-child {
+  // .embl-grid's frist-child property brings higher specificity
+  // it also has a margin bottom, so we don't need the .vf-breadcrumbs margin
+  grid-column: 1/-1;
+  margin-bottom: 0;
+}
+
 .embl-breadcrumbs-lookup--ghosting {
   animation: embl-breadcrumbs-lookup-ghosting-animation 4s ease-in-out infinite alternate;
   background: 50% top / 15% 60% linear-gradient(90deg, set-ui-color(vf-ui-color-gray-light) 0%, set-ui-color(vf-ui-color-gray) 30%, set-ui-color(vf-ui-color-gray) 50%, set-ui-color(vf-ui-color-gray-light) 100%);

components/vf-breadcrumbs/vf-breadcrumbs.scss

@@ -3,7 +3,7 @@
 
 .vf-breadcrumbs {
   display: flex;
-  grid-column: main;
+  grid-column: 1/-1;
   margin-bottom: $vf-breadcrumbs__margin--bottom;
 }