refactor(navbar): remove dropdown menu width (#4757)

* refactor: remove dropdown menu width

* refactor: shorter description

apps/docs/app/examples/navbar/with-dropdown-menu/page.tsx

@@ -59,42 +59,41 @@ export default function Page() {
           </NavbarItem>
           <DropdownMenu
             aria-label="ACME features"
-            className="w-[340px]"
             itemClasses={{
               base: "gap-4",
             }}
           >
             <DropdownItem
               key="autoscaling"
-              description="ACME scales apps to meet user demand, automagically, based on load."
+              description="ACME scales apps based on demand and load"
               startContent={icons.scale}
             >
               Autoscaling
             </DropdownItem>
             <DropdownItem
               key="usage_metrics"
-              description="Real-time metrics to debug issues. Slow query added? We’ll show you exactly where."
+              description="Real-time metrics to debug issues"
               startContent={icons.activity}
             >
               Usage Metrics
             </DropdownItem>
             <DropdownItem
               key="production_ready"
-              description="ACME runs on ACME, join us and others serving requests at web scale."
+              description="ACME runs on ACME, join us at web scale"
               startContent={icons.flash}
             >
               Production Ready
             </DropdownItem>
             <DropdownItem
               key="99_uptime"
-              description="Applications stay on the grid with high availability and high uptime guarantees."
+              description="High availability and uptime guarantees"
               startContent={icons.server}
             >
               +99% Uptime
             </DropdownItem>
             <DropdownItem
               key="supreme_support"
-              description="Overcome any challenge with a supporting team ready to respond."
+              description="Support team ready to respond"
               startContent={icons.user}
             >
               +Supreme Support

apps/docs/content/components/navbar/with-dropdown-menu.raw.jsx

@@ -252,42 +252,41 @@ export default function App() {
           </NavbarItem>
           <DropdownMenu
             aria-label="ACME features"
-            className="w-[340px]"
             itemClasses={{
               base: "gap-4",
             }}
           >
             <DropdownItem
               key="autoscaling"
-              description="ACME scales apps to meet user demand, automagically, based on load."
+              description="ACME scales apps based on demand and load"
               startContent={icons.scale}
             >
               Autoscaling
             </DropdownItem>
             <DropdownItem
               key="usage_metrics"
-              description="Real-time metrics to debug issues. Slow query added? We’ll show you exactly where."
+              description="Real-time metrics to debug issues"
               startContent={icons.activity}
             >
               Usage Metrics
             </DropdownItem>
             <DropdownItem
               key="production_ready"
-              description="ACME runs on ACME, join us and others serving requests at web scale."
+              description="ACME runs on ACME, join us at web scale"
               startContent={icons.flash}
             >
               Production Ready
             </DropdownItem>
             <DropdownItem
               key="99_uptime"
-              description="Applications stay on the grid with high availability and high uptime guarantees."
+              description="High availability and uptime guarantees"
               startContent={icons.server}
             >
               +99% Uptime
             </DropdownItem>
             <DropdownItem
               key="supreme_support"
-              description="Overcome any challenge with a supporting team ready to respond."
+              description="Support team ready to respond"
               startContent={icons.user}
             >
               +Supreme Support

packages/components/navbar/stories/navbar.stories.tsx

@@ -265,7 +265,6 @@ const WithDropdownTemplate = (args: NavbarProps) => {
             </NavbarItem>
             <DropdownMenu
               aria-label="ACME features"
-              className="w-[340px]"
               itemClasses={{
                 base: "gap-4",
                 wrapper: "py-3",
@@ -273,42 +272,35 @@ const WithDropdownTemplate = (args: NavbarProps) => {
             >
               <DropdownItem
                 key="autoscaling"
-                description="ACME scales apps to meet user demand, automagically, based on load."
+                description="ACME scales apps based on demand and load"
                 startContent={icons.scale}
               >
                 Autoscaling
               </DropdownItem>
-              <DropdownItem
-                key="safe_and_sound"
-                description="A secure mission control, without the policy headache. Permissions, 2FA, and more."
-                startContent={icons.lock}
-              >
-                Safe and Sound
-              </DropdownItem>
               <DropdownItem
                 key="usage_metrics"
-                description="Real-time metrics to debug issues. Slow query added? We’ll show you exactly where."
+                description="Real-time metrics to debug issues"
                 startContent={icons.activity}
               >
                 Usage Metrics
               </DropdownItem>
               <DropdownItem
                 key="production_ready"
-                description="ACME runs on ACME, join us and others serving requests at web scale."
+                description="ACME runs on ACME, join us at web scale"
                 startContent={icons.flash}
               >
                 Production Ready
               </DropdownItem>
               <DropdownItem
                 key="99_uptime"
-                description="Applications stay on the grid with high availability and high uptime guarantees."
+                description="High availability and uptime guarantees"
                 startContent={icons.server}
               >
                 +99% Uptime
               </DropdownItem>
               <DropdownItem
                 key="supreme_support"
-                description="Overcome any challenge with a supporting team ready to respond."
+                description="Support team ready to respond"
                 startContent={icons.user}
               >
                 +Supreme Support