From c8dd84580b2a1599b686da8dccf4cdddf31dc3a0 Mon Sep 17 00:00:00 2001
From: cdxker <fdenzell@gmail.com>
Date: Thu, 9 Jan 2025 21:13:26 -0800
Subject: [PATCH] cleanup: make popup non group

---
 server/src/public/page.html    | 10 +++++-----
 server/src/public/product.html | 10 +++++-----
 server/static/output.css       | 14 +++++++++-----
 3 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/server/src/public/page.html b/server/src/public/page.html
index 2d9a506bb..f3f5cd07a 100644
--- a/server/src/public/page.html
+++ b/server/src/public/page.html
@@ -440,20 +440,20 @@
     <script type="module">
         import {renderToDiv} from '{{ search_component_url | safe }}/dist/vanilla/index.js';
         const root = document.querySelector("#root");
-        const params = {{params | tojson}};
 
+        const params = {{ params | tojson }};
         if (params.inline) {
+          const inlineParams = {{ params | tojson }};
           const inlineRoot = document.querySelector("#inline-root");
-          const inlineParams = params;
           inlineParams.groupTrackingId = params.singleProductOptions.groupTrackingId;
           inlineParams.cleanGroupName = params.singleProductOptions.productName;
 
-          if (params.singleProductOptions && params.singleProductOptions.productQuestions) {
-            inlineParams.defaultAiQuestions = params.singleProductOptions.productQuestions;
+          if (inlineParams.singleProductOptions && inlineParams.singleProductOptions.productQuestions) {
+            inlineParams.defaultAiQuestions = inlineParams.singleProductOptions.productQuestions;
           }
 
           renderToDiv(inlineRoot, {
-            ...params,
+            ...inlineParams,
           })
         }
 
diff --git a/server/src/public/product.html b/server/src/public/product.html
index 87886c9d0..135a964e9 100644
--- a/server/src/public/product.html
+++ b/server/src/public/product.html
@@ -87,7 +87,7 @@ <h4 class="text-sm text-gray-500 mt-2 w-fit">
           class="recs mt-6 flex flex-nowrap overflow-x-auto gap-x-4 sm:gap-x-6 xl:gap-x-8 py-2"
         >
           {% for i in range(5) %}
-          <div class="w-64 flex-shrink-0" x-key="{{ i }}">
+          <div class="mt-auto w-64 flex-shrink-0" x-key="{{ i }}">
             <div class="h-72 w-full overflow-hidden rounded-lg">
               <div class="h-full w-full bg-gray-200 animate-pulse"></div>
             </div>
@@ -117,7 +117,7 @@ <h4 class="text-sm text-gray-500 mt-2 w-fit">
     recProducts.forEach((recProduct, i) => {
       if (!idsToKeep.includes(recProduct.getAttribute("x-group-tracking-id"))) {
         const newDiv = document.createElement("div");
-        newDiv.classList.add("w-64", "flex-shrink-0");
+        newDiv.classList.add("w-64", "flex-shrink-0", "mt-auto");
         newDiv.setAttribute("x-key", i);
         newDiv.innerHTML = `
           <div class="h-72 w-full overflow-hidden rounded-lg">
@@ -283,7 +283,7 @@ <h4 class="text-sm text-gray-500 mt-2 w-fit">
       const price = priceNum ? `$${priceNum.toFixed(2)}` : null;
 
       const chunkElement = document.createElement("div");
-      chunkElement.classList.add(...["rec", "w-64", "flex-shrink-0"]);
+      chunkElement.classList.add(...["rec", "w-64", "flex-shrink-0", "mt-auto"]);
       chunkElement.setAttribute("x-group-tracking-id", groupTrackingId);
       chunkElement.innerHTML = `
         <div
@@ -302,12 +302,12 @@ <h6 class="rec-price mt-1 text-sm text-gray-700">${price}</h6>
         </div>
         <div class="mt-6 flex gap-2">
           <button
-            class="similar-button rec-button bg-brand-color w-1/2 flex items-center justify-center rounded-md border border-transparent px-8 py-2 text-sm font-medium text-white"
+            class="similar-button rec-button bg-brand-color w-1/2 flex items-center justify-center rounded-md border border-transparent px-1 py-2 text-sm font-medium text-white"
           >
             More Like This
           </button>
           <button
-            class="different-button rec-button bg-brand-color w-1/2 flex items-center justify-center rounded-md border border-transparent px-8 py-2 text-sm font-medium text-white"
+            class="different-button rec-button bg-brand-color w-1/2 flex items-center justify-center rounded-md border border-transparent px-1 py-2 text-sm font-medium text-white"
           >
             Less Like This
           </button>
diff --git a/server/static/output.css b/server/static/output.css
index b5cffa039..a07e94de1 100644
--- a/server/static/output.css
+++ b/server/static/output.css
@@ -616,6 +616,10 @@ video {
   margin-top: 2rem;
 }
 
+.mt-auto {
+  margin-top: auto;
+}
+
 .line-clamp-1 {
   overflow: hidden;
   display: -webkit-box;
@@ -639,11 +643,6 @@ video {
   display: none;
 }
 
-.size-full {
-  width: 100%;
-  height: 100%;
-}
-
 .h-10 {
   height: 2.5rem;
 }
@@ -832,6 +831,11 @@ video {
      object-fit: cover;
 }
 
+.px-1 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+
 .px-3 {
   padding-left: 0.75rem;
   padding-right: 0.75rem;