Merge pull request #2251 from Arhell/fix-bread

fix breadcrumbs block

Author: heiskr

includes/article.html

@@ -2,7 +2,7 @@
   <article class="markdown-body width-full">
     <div class="d-lg-flex flex-justify-between">
       <div class="d-block d-lg-none">{% include article-version-switcher %}</div>
-      <div class="d-flex flex-items-center" style="height: 39px;">
+      <div class="d-flex flex-items-center breadcrumbs-wrapper">
         {% include breadcrumbs %}
       </div>
       <div class="d-none d-lg-block">{% include article-version-switcher %}</div>

layouts/graphql-explorer.html

@@ -11,13 +11,13 @@
       <main class="container-xl px-3 px-md-6 my-4 my-lg-4 d-xl-flex">
         <article class="markdown-body width-full">
           <div class="d-lg-flex flex-justify-between">
-            <div class="d-flex flex-items-center" style="height: 39px;">
+            <div class="d-flex flex-items-center breadcrumbs-wrapper">
               {% include breadcrumbs %}
             </div>
           </div>
 
           <h1 class="border-bottom-0">{{ page.title }}</h1>
-      
+
           <div class="mt-2">
             <div>
               <iframe id="graphiql" class="graphql-explorer" scrolling="no" src="{{ graphql.explorerUrl }}">

stylesheets/article.scss

@@ -87,6 +87,12 @@
 /* Breadcrumbs
 ------------------------------------------------------------------------------*/
 
+.breadcrumbs-wrapper {
+  @include breakpoint(xl) {
+    height: 39px;
+  }
+}
+
 .breadcrumbs a:not(:last-child)::after, .breadcrumbs span:not(:last-child)::after {
   content: '/';
   color: $gray-400;