From 3ea50eb0e7fefa012e15642f607f17c9a456dfa1 Mon Sep 17 00:00:00 2001
From: Benjamin Cabanes <3447705+bcabanes@users.noreply.github.com>
Date: Sun, 25 May 2025 11:27:37 -0400
Subject: [PATCH] docs(nx-dev): adjust Popover.Panel max-width in small screens
 (#31331)

Updated the `max-w` property to use `max-w-xl` by default and `xl:max-w-2xl` for larger screens.
---
 nx-dev/ui-common/src/lib/headers/header.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/nx-dev/ui-common/src/lib/headers/header.tsx b/nx-dev/ui-common/src/lib/headers/header.tsx
index 31397313f0..20bfbbd473 100644
--- a/nx-dev/ui-common/src/lib/headers/header.tsx
+++ b/nx-dev/ui-common/src/lib/headers/header.tsx
@@ -157,7 +157,7 @@ export function Header({ ctaButtons }: HeaderProps): ReactElement {
                     leaveFrom="opacity-100 translate-y-0"
                     leaveTo="opacity-0 translate-y-1"
                   >
-                    <Popover.Panel className="absolute left-60 z-30 mt-3 w-max max-w-2xl -translate-x-1/2 transform lg:left-20">
+                    <Popover.Panel className="absolute left-60 z-30 mt-3 w-max max-w-xl -translate-x-1/2 transform lg:left-20 xl:max-w-2xl">
                       <SectionsMenu
                         sections={{
                           'Speed, Reliability and AI': solutionsItems,
@@ -267,7 +267,7 @@ export function Header({ ctaButtons }: HeaderProps): ReactElement {
                     leaveFrom="opacity-100 translate-y-0"
                     leaveTo="opacity-0 translate-y-1"
                   >
-                    <Popover.Panel className="absolute left-60 z-30 mt-3 w-max max-w-2xl -translate-x-1/2 transform lg:left-20">
+                    <Popover.Panel className="absolute left-60 z-30 mt-3 w-max max-w-xl -translate-x-1/2 transform lg:left-20 xl:max-w-2xl">
                       <SectionsMenu
                         sections={{
                           'Nx for Enterprises': enterpriseItems,