bugfix: mobile tabs for demo page horizontally scroll now

devflowinc · Dec 16, 2024 · 19f4e8e · 19f4e8e
1 parent 6d662fe
commit 19f4e8e
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 5 deletions.
diff --git a/server/src/public/navbar.html b/server/src/public/navbar.html
@@ -36,7 +36,7 @@
     <div class="flex-1"></div>
     <div
       id="nav-links"
-      class="flex flex-wrap items-center gap-4 justify-center sm:justify-right"
+      class="flex flex-wrap items-center gap-4 justify-center sm:justify-right -mt-2 sm:mt-0"
     >
       <a
         class="flex items-center gap-1 text-black"

diff --git a/server/src/public/page.html b/server/src/public/page.html
@@ -209,6 +209,13 @@
         padding: 0rem;
       }
 
+      #tab-buttons {
+        display: flex;
+        flex-wrap: nowrap;
+        overflow-x: auto;
+        gap: 0.25rem;
+      }
+
       .tab-button {
         background-color: #ffffff;
         border-radius: 0.25rem 0.25rem 0rem 0rem;
@@ -280,10 +287,12 @@
     <main>
       <div class="basic">
         <div id="root" class="min-h-[36px]"></div>
-        {% if params.singleProductOptions and params.singleProductOptions.productName %} {% include
-        "product.html" %} {% endif %} {% if tabs|length > 0 %} {% include
-        "tabs.html" %} {% else %} {% include "search-component-code.html" %} {%
-        endif %}
+        {% if params.singleProductOptions and
+        params.singleProductOptions.productName %} {% include "product.html" %}
+        {% else %}
+        <div class="mt-24 sm:mt-6"></div>
+        {% endif %} {% if tabs|length > 0 %} {% include "tabs.html" %} {% else
+        %} {% include "search-component-code.html" %} {% endif %}
       </div>
     </main>
     {% if logged_in %}

diff --git a/server/src/public/tabs.html b/server/src/public/tabs.html
@@ -29,6 +29,7 @@
     tabButtons.forEach((tabButton, index) => {
       if (index === tabIndex) {
         tabButton.classList.add('active');
+        tabButton.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
       } else {
         tabButton.classList.remove('active');
       }

diff --git a/server/static/output.css b/server/static/output.css
@@ -581,6 +581,10 @@ video {
   margin-right: auto;
 }
 
+.-mt-2 {
+  margin-top: -0.5rem;
+}
+
 .mt-0\.5 {
   margin-top: 0.125rem;
 }
@@ -616,6 +620,10 @@ video {
   -webkit-line-clamp: 1;
 }
 
+.block {
+  display: block;
+}
+
 .flex {
   display: flex;
 }
@@ -931,6 +939,10 @@ video {
     margin-right: 1.5rem;
   }
 
+  .sm\:mt-0 {
+    margin-top: 0px;
+  }
+
   .sm\:mt-6 {
     margin-top: 1.5rem;
   }