From ccb4ef6bb99bf5be8d4ea7c1ef38129d06e82d85 Mon Sep 17 00:00:00 2001
From: Ivan Vasilov <vasilov.ivan@gmail.com>
Date: Fri, 21 Jul 2023 14:31:04 +0200
Subject: [PATCH] Make the Details part sticky when scrolling the integration
 page.

---
 .../pages/partners/integrations/[slug].tsx    | 82 ++++++++++---------
 1 file changed, 42 insertions(+), 40 deletions(-)

diff --git a/apps/www/pages/partners/integrations/[slug].tsx b/apps/www/pages/partners/integrations/[slug].tsx
index 661369872d2..54ee024dee0 100644
--- a/apps/www/pages/partners/integrations/[slug].tsx
+++ b/apps/www/pages/partners/integrations/[slug].tsx
@@ -188,58 +188,60 @@ function Partner({
               </div>
 
               <div>
-                <h2
-                  className="text-scale-1200"
-                  style={{ fontSize: '1.5rem', marginBottom: '1rem' }}
-                >
-                  Details
-                </h2>
+                <div className="sticky top-20">
+                  <h2
+                    className="text-scale-1200"
+                    style={{ fontSize: '1.5rem', marginBottom: '1rem' }}
+                  >
+                    Details
+                  </h2>
+
+                  <div className="text-scale-1200 divide-y">
+                    {partner.type === 'technology' && (
+                      <div className="flex items-center justify-between py-2">
+                        <span className="text-scale-900">Developer</span>
+                        <span className="text-scale-1200">{partner.developer}</span>
+                      </div>
+                    )}
 
-                <div className="text-scale-1200 divide-y">
-                  {partner.type === 'technology' && (
                     <div className="flex items-center justify-between py-2">
-                      <span className="text-scale-900">Developer</span>
-                      <span className="text-scale-1200">{partner.developer}</span>
+                      <span className="text-scale-900">Category</span>
+                      <Link href={`/partners/integrations#${partner.category.toLowerCase()}`}>
+                        <a className="text-brand-900 hover:text-brand-800 transition-colors">
+                          {partner.category}
+                        </a>
+                      </Link>
                     </div>
-                  )}
 
-                  <div className="flex items-center justify-between py-2">
-                    <span className="text-scale-900">Category</span>
-                    <Link href={`/partners/integrations#${partner.category.toLowerCase()}`}>
-                      <a className="text-brand-900 hover:text-brand-800 transition-colors">
-                        {partner.category}
-                      </a>
-                    </Link>
-                  </div>
-
-                  <div className="flex items-center justify-between py-2">
-                    <span className="text-scale-900">Website</span>
-                    <a
-                      href={partner.website}
-                      target="_blank"
-                      rel="noreferrer"
-                      className="text-brand-900 hover:text-brand-800 transition-colors"
-                    >
-                      {new URL(partner.website).host}
-                    </a>
-                  </div>
-
-                  {partner.type === 'technology' && partner.docs && (
                     <div className="flex items-center justify-between py-2">
-                      <span className="text-scale-900">Documentation</span>
+                      <span className="text-scale-900">Website</span>
                       <a
-                        href={partner.docs}
+                        href={partner.website}
                         target="_blank"
                         rel="noreferrer"
                         className="text-brand-900 hover:text-brand-800 transition-colors"
                       >
-                        <span className="flex items-center space-x-1">
-                          <span>Learn</span>
-                          <IconExternalLink size="small" />
-                        </span>
+                        {new URL(partner.website).host}
                       </a>
                     </div>
-                  )}
+
+                    {partner.type === 'technology' && partner.docs && (
+                      <div className="flex items-center justify-between py-2">
+                        <span className="text-scale-900">Documentation</span>
+                        <a
+                          href={partner.docs}
+                          target="_blank"
+                          rel="noreferrer"
+                          className="text-brand-900 hover:text-brand-800 transition-colors"
+                        >
+                          <span className="flex items-center space-x-1">
+                            <span>Learn</span>
+                            <IconExternalLink size="small" />
+                          </span>
+                        </a>
+                      </div>
+                    )}
+                  </div>
                 </div>
               </div>
             </div>