Sync styleguide 2026.05.18.1

docs/styleguide/components/interactive-elements.html

@@ -181,7 +181,7 @@
               Interactive styleguide variant:
               The panel opens and closes via the pulldown button above.
               It closes when clicking outside, when another pulldown opens, or when a sandwich menu opens.
-              If the panel would overflow the viewport, it aligns from the opposite side of the trigger.
+              If the panel is wider than the trigger or would overflow the viewport, it aligns from the opposite side of the trigger.
               Cross-dependencies between pulldowns are application logic and are not defined in this component.
             -->
 
@@ -1059,7 +1059,7 @@
 
     // Pulldown behavior: pulldown demos open their panel below the trigger.
     // Opening one closes all sandwich menus and any other open pulldown demo.
-    // If the panel would overflow the viewport, it aligns from the opposite trigger edge.
+    // If the panel is wider than the trigger or would overflow the viewport, it aligns from the opposite trigger edge.
     document.querySelectorAll('.sg-pulldown-demo').forEach((demo) => {
       const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
 
@@ -1103,8 +1103,9 @@
           return;
         }
 
+        const triggerRect = trigger.getBoundingClientRect();
         const panelRect = panel.getBoundingClientRect();
-        if (panelRect.right > window.innerWidth) {
+        if (panelRect.width > triggerRect.width || panelRect.right > window.innerWidth) {
           demo.dataset.align = 'right';
         }