fix jumpy solutions tab in top nav

pulumi · Dec 20, 2024 · 5830649 · 5830649
1 parent 84a2f2b
commit 5830649
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 5 deletions.
diff --git a/assets/css/bundle.css b/assets/css/bundle.css
@@ -6857,6 +6857,15 @@ ul.glossary{
     color:#5f6065
   }
 
+  .header-container .desktop-menu li:not(.header-dropdown-item).header-nav-item-drop-down .header-nav-drop-down-menu ul .list-title-width-hold::after{
+    padding-left: 1.75rem;
+    font-weight: 600;
+    content:attr(title);
+    display:block;
+    visibility:hidden;
+    height:0
+  }
+
   .header-container .desktop-menu li:not(.header-dropdown-item).header-nav-item-drop-down .product{
     min-width:70ch;
     left: -6rem

diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -187,7 +187,7 @@
                                                 <a href="/testimonials/">
                                                     <i class="fas fa-quote-left fa-fw"></i>
                                                     Engineers love Pulumi
-                                                    <div class="list-sub-title">Hear from engineers why they love Pulumi</div>
+                                                    <div class="list-sub-title pr-2">Hear from engineers why they love Pulumi</div>
                                                 </a>
                                             </div>
                                         </li>
@@ -204,7 +204,7 @@
                                             <div class="list-title">
                                                 <a href="/product/internal-developer-platforms/">
                                                     <i class="fas fa-users fa-fw"></i>
-                                                    Pulumi for Platform Engineering
+                                                    <span class="list-title-width-hold" title="Pulumi for Platform Engineering">Pulumi for Platform Engineering</span>
                                                     <div class="list-sub-title">Build and scale internal developer platforms</div>
                                                 </a>
                                             </div>
@@ -214,7 +214,7 @@
                                                 <a href="/solutions/ai/">
                                                     <i class="fas fa-robot fa-fw"></i>
                                                     Pulumi for AI
-                                                    <div class="list-sub-title">Discover, learn, and build infrastructure as code faster with AI</div>
+                                                    <div class="list-sub-title pr-2">Discover, learn, and build infrastructure as code faster with AI</div>
                                                 </a>
                                             </div>
                                         </li>
@@ -232,7 +232,7 @@
                                                 <a href="/enterprise/">
                                                     <i class="fas fa-building fa-fw"></i>
                                                     Enterprises
-                                                    <div class="list-sub-title">Learn how Pulumi serves enterprise needs</div>
+                                                    <div class="list-sub-title pr-2">Learn how Pulumi serves enterprise needs</div>
                                                 </a>
                                             </div>
                                         </li>
@@ -241,7 +241,7 @@
                                                 <a href="/proserv/">
                                                     <i class="fas fa-briefcase fa-fw"></i>
                                                     Professional Services
-                                                    <div class="list-sub-title">Explore our professional services offerings</div>
+                                                    <div class="list-sub-title pr-2">Explore our professional services offerings</div>
                                                 </a>
                                             </div>
                                         </li>

diff --git a/theme/src/scss/_header.scss b/theme/src/scss/_header.scss
@@ -259,6 +259,14 @@
                                     color:theme("colors.gray.700");
                                 }
                             }
+
+                            .list-title-width-hold::after {
+                                @apply font-semibold pl-7;
+                                content: attr(title);
+                                display: block;
+                                visibility: hidden;
+                                height: 0;
+                            }
                         }
                     }