v0.11.6

Adjusted scroll-tabs for mobile devices

components.js

@@ -3646,17 +3646,20 @@ scrollTabHeader.innerHTML = `
             gap: 1rem;
             --padding: 0;
             --border-radius: 0.3rem;
+            --grid-auto-flow: auto;
             --background: rgba(var(--foreground-color), 1);
         }
         .tab-header{
             display: grid;
             gap: var(--gap);
+            grid-auto-flow: var(--grid-auto-flow);
+            justify-content: flex-start;
             padding: var(--padding);
             border-radius: var(--border-radius);
             background: var(--background);
         }
     </style>
-    <div class="tab-header">
+    <div part="tab-header" class="tab-header">
         <slot></slot>
     </div>
 `
@@ -3688,7 +3691,6 @@ customElements.define('scroll-tab-header', class extends HTMLElement{
     changeActiveTab = (tabIndex, fire = false) => {
         if (this.activeTab)
             this.activeTab.removeAttribute('active')
-        console.log(this._assignedElements, tabIndex)
         this._assignedElements[tabIndex].setAttribute('active', '')
         if(fire)
             this.fireEvent(tabIndex)
@@ -3837,7 +3839,6 @@ customElements.define('scroll-tab-panels', class extends HTMLElement {
         })
         this.tabPanels.addEventListener('slotchange', e => {
             this._assignedElements = this.tabPanelsSlot.assignedElements()
-            console.log(this._assignedElements)
             this._assignedElements.forEach((elem, index) => {
                 elem.setAttribute('data-index', index)
                 if (elem.hasAttribute('active')) {

css/main.css

@@ -688,6 +688,7 @@ scroll-tab-header {
   --padding: 0.5rem;
   margin-right: 1.5rem;
   --background: rgba(var(--text-color), 0.04);
+  --grid-auto-flow: column;
 }
 
 scroll-tab-panels {
@@ -696,6 +697,13 @@ scroll-tab-panels {
   --background: transparent;
 }
 
+.auto-grid-layout {
+  -webkit-box-pack: start;
+      -ms-flex-pack: start;
+          justify-content: flex-start;
+  overflow-x: auto;
+}
+
 .grid-2 {
   grid-template-columns: auto 1fr;
 }
@@ -857,6 +865,14 @@ table {
     gap: 3rem;
     grid-template-columns: auto 1fr;
   }
+
+  scroll-tab-header {
+    --grid-auto-flow: row;
+  }
+
+  .auto-grid-layout {
+    grid-template-columns: auto 1fr;
+  }
 }
 @media only screen and (min-width: 1280px) {
   .page {

css/main.scss

@@ -560,12 +560,17 @@ scroll-tab-header{
     --padding: 0.5rem;
     margin-right: 1.5rem;
     --background: rgba(var(--text-color), 0.04);
+    --grid-auto-flow: column;
 }
 scroll-tab-panels{
     --height: max(24rem, 50vh);
     --gap: 4rem;
     --background: transparent;
 }
+.auto-grid-layout{
+    justify-content: flex-start;
+    overflow-x: auto;
+}
 .grid-2{
     grid-template-columns: auto 1fr;
 }
@@ -703,6 +708,12 @@ table{
         gap: 3rem;
         grid-template-columns: auto 1fr;
     }
+    scroll-tab-header{
+        --grid-auto-flow: row;
+    }
+    .auto-grid-layout{
+        grid-template-columns: auto 1fr;
+    }
 }
 @media only screen and (min-width: 1280px) {
     .page{

index.html

@@ -256,7 +256,7 @@
             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum cumque aut illum soluta. Inventore nihil quisquam harum quo mollitia sunt!</p>
         </section>
         <h3 class="h3 margin-bottom-1r">Rooms</h3>
-        <div class="grid grid-2">
+        <div class="grid auto-grid-layout">
             <scroll-tab-header data-target="bit_bond_page_group">
                 <button class="room-button">
                     <svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><g><path d="M21,8c-1.45,0-2.26,1.44-1.93,2.51l-3.55,3.56c-0.3-0.09-0.74-0.09-1.04,0l-2.55-2.55C12.27,10.45,11.46,9,10,9 c-1.45,0-2.27,1.44-1.93,2.52l-4.56,4.55C2.44,15.74,1,16.55,1,18c0,1.1,0.9,2,2,2c1.45,0,2.26-1.44,1.93-2.51l4.55-4.56 c0.3,0.09,0.74,0.09,1.04,0l2.55,2.55C12.73,16.55,13.54,18,15,18c1.45,0,2.27-1.44,1.93-2.52l3.56-3.55 C21.56,12.26,23,11.45,23,10C23,8.9,22.1,8,21,8z"/><polygon points="15,9 15.94,6.93 18,6 15.94,5.07 15,3 14.08,5.07 12,6 14.08,6.93"/><polygon points="3.5,11 4,9 6,8.5 4,8 3.5,6 3,8 1,8.5 3,9"/></g></g></svg>