From 6bc5f4258f14e629a48413c64275467591274b4a Mon Sep 17 00:00:00 2001
From: skeptrune <nick.k@trieve.ai>
Date: Mon, 16 Dec 2024 14:31:28 -0800
Subject: [PATCH] bugfix: mobile tabs for demo page horizontally scroll now

---
 server/src/public/navbar.html |  2 +-
 server/src/public/page.html   | 17 +++++++++++++----
 server/src/public/tabs.html   |  1 +
 server/static/output.css      | 12 ++++++++++++
 4 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/server/src/public/navbar.html b/server/src/public/navbar.html
index 9a41de8c8..0d7cc5bf3 100644
--- 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
index ec6e706a2..0fef1b2e2 100644
--- 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
index f90df22e8..fc83461bc 100644
--- 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
index 95249a2c6..55d070659 100644
--- 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;
   }