Merge pull request #2721 from patternfly/docs/jump-links/fix-demo

docs(jump-links): fix scrollspy demo layout

Author: zeroedin

elements/pf-jump-links/demo/scrollspy-with-subsections.html

@@ -146,7 +146,7 @@ <h2 id="heading-5">Heading 5</h2>
 import '@patternfly/elements/pf-switch/pf-switch.js';
 import '@patternfly/elements/pf-jump-links/pf-jump-links.js';
 
-const main = document.querySelector('main');
+const main = document.getElementById('demo');
 const links = document.querySelector('pf-jump-links');
 const swtch = document.querySelector('pf-switch');
 const media = matchMedia('(max-width: 600px)');
@@ -159,7 +159,6 @@ <h2 id="heading-5">Heading 5</h2>
   const { matches } = media;
   const { checked } = swtch;
   main.classList.toggle('mobile', matches);
-  main.classList.toggle('horizontal', !checked);
   links.vertical = checked;
   links.expandable = matches && checked;
   links.centered = !checked;
@@ -213,20 +212,20 @@ <h2 id="heading-5">Heading 5</h2>
     padding-inline-start: 48px;
   }
 
-  &:is(.mobile, .horizontal) {
+  &.mobile,
+  &:has(pf-jump-links:not([vertical])) {
     grid-template-rows: repeat(auto-fill, auto);
     grid-template-columns: 100%;
     grid-template-areas:
       'head'
       'side'
       'body';
-  }
-
-  &:is(.mobile, .horizontal) aside {
-    position: sticky;
-    top: 0;
-    box-shadow: rgba(3, 3, 3, 0.16) 0px 4px 4px -4px;
-    z-index: 1;
+    & aside {
+      position: sticky;
+      top: 0;
+      box-shadow: rgba(3, 3, 3, 0.16) 0px 4px 4px -4px;
+      z-index: 1;
+    }
   }
 }