From 8a829fabb4b2df3e840c00296221430bb8ad48d3 Mon Sep 17 00:00:00 2001
From: Vitor Mattos <1079143+vitormattos@users.noreply.github.com>
Date: Sat, 18 Jul 2026 11:13:31 -0300
Subject: [PATCH] fix: resolve CSS isolation conflicts in language selector
 when embedded in WordPress

When the header fragment is loaded in WordPress/WooCommerce, several
Bootstrap and theme CSS rules bleed into the language selector dropdown
because the fragment CSS lacked explicit overrides.

Issues fixed in header-fragment.scss:
- .ud-nav-dropdown-toggle was not scoped to .nav-item, so min-height:40px
  and padding:8px 0 (meant for nav dropdowns) also applied to the language
  selector button, inflating the header from 76px to 92px
- Same scope fix applied to the responsive rule
- .selector .dropdown-toggle: use padding shorthand (0 12px 0 0) to
  explicitly zero out top/bottom padding added by Bootstrap button resets
- .selector .ud-submenu: width:128px -> min-width:160px so the dropdown
  can grow to fit content instead of clipping at a fixed size
- .selector .ud-submenu-link: add padding:0 (neutralise Bootstrap
  .dropdown-menu a padding), white-space:nowrap (prevent NB-NO / PT-BR
  from wrapping), and font-weight:400 (override bold from
  .ud-nav-submenu-link which shares the same element)

Issues fixed in _header.scss to align static site with fragment:
- .selector .ud-submenu: width:128px -> min-width:160px (static site was
  reaching 160px only via Bootstrap .dropdown-menu min-width fallback;
  now the intent is explicit)
- .selector .ud-submenu: add border:none to prevent Bootstrap
  .dropdown-menu border from making the dropdown taller than WordPress
- .selector .ud-submenu: add hr { margin:8px 0 } to match the fragment
  CSS value; Bootstrap was applying margin:1rem adding 16px extra height
- .selector .ud-submenu-link: add font-size:15px; the static site
  inherited 16px from Bootstrap body while WordPress got 15px from the
  fragment's .ud-nav-submenu-link rule

Signed-off-by: Vitor Mattos <1079143+vitormattos@users.noreply.github.com>
---
 source/_assets/scss/_header.scss         |  8 +++++++-
 source/_assets/scss/header-fragment.scss | 11 +++++++----
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/source/_assets/scss/_header.scss b/source/_assets/scss/_header.scss
index ddd0f0cc..9a701c74 100644
--- a/source/_assets/scss/_header.scss
+++ b/source/_assets/scss/_header.scss
@@ -389,8 +389,9 @@
     z-index: 100;
 
     position: absolute;
-    width: 128px;
+    min-width: 160px;
     background: var(--white);
+    border: none;
     top: 100%;
     margin-top: 16px;
     padding: 8px 16px;
@@ -404,12 +405,17 @@
     flex-direction: column;
     gap: 8px;
 
+    hr {
+      margin: 8px 0;
+    }
+
     &.show {
       display: flex;
     }
 
     .ud-submenu-link {
       color: var(--heading-color);
+      font-size: 15px;
 
       display: flex;
       align-items: center;
diff --git a/source/_assets/scss/header-fragment.scss b/source/_assets/scss/header-fragment.scss
index d7987d73..c6ddb64d 100644
--- a/source/_assets/scss/header-fragment.scss
+++ b/source/_assets/scss/header-fragment.scss
@@ -268,7 +268,7 @@ body.admin-bar .libresign-site-header-fragment__spacer {
   text-underline-offset: 6px;
 }
 
-.libresign-site-header-fragment .ud-nav-dropdown-toggle {
+.libresign-site-header-fragment .nav-item .ud-nav-dropdown-toggle {
   background: transparent;
   border: none;
   border-radius: 0;
@@ -397,7 +397,7 @@ body.admin-bar .libresign-site-header-fragment__spacer {
   display: flex;
   align-items: center;
   gap: 8px;
-  padding-right: 12px;
+  padding: 0 12px 0 0;
   cursor: pointer;
 }
 
@@ -415,7 +415,7 @@ body.admin-bar .libresign-site-header-fragment__spacer {
 .libresign-site-header-fragment .selector .ud-submenu {
   z-index: 100;
   position: absolute;
-  width: 128px;
+  min-width: 160px;
   background: var(--white);
   top: 100%;
   margin-top: 16px;
@@ -433,6 +433,9 @@ body.admin-bar .libresign-site-header-fragment__spacer {
   display: flex;
   align-items: center;
   gap: 8px;
+  padding: 0;
+  white-space: nowrap;
+  font-weight: 400;
 }
 
 .libresign-site-header-fragment .selector .ud-submenu-link img {
@@ -542,7 +545,7 @@ body.admin-bar .libresign-site-header-fragment__spacer {
 
   .libresign-site-header-fragment .nav-item,
   .libresign-site-header-fragment .nav-item > .nav-link,
-  .libresign-site-header-fragment .ud-nav-dropdown-toggle {
+  .libresign-site-header-fragment .nav-item .ud-nav-dropdown-toggle {
     width: 100%;
     justify-content: flex-start;
   }