From dc9dd9026d588aa27e4eb5b5d5c592dcb5768a87 Mon Sep 17 00:00:00 2001
From: Branko Conjic <brankoconjic@gmail.com>
Date: Wed, 7 Feb 2024 23:19:08 -0500
Subject: [PATCH] fix(docs): wrong image sizes in megamenu

---
 apps/docs/src/components/LemonSqueezyHeader.tsx | 6 +++---
 apps/docs/src/components/Navigation.tsx         | 2 +-
 apps/docs/tailwind.config.ts                    | 4 ++++
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/apps/docs/src/components/LemonSqueezyHeader.tsx b/apps/docs/src/components/LemonSqueezyHeader.tsx
index 0ff4ffa..697eb8c 100644
--- a/apps/docs/src/components/LemonSqueezyHeader.tsx
+++ b/apps/docs/src/components/LemonSqueezyHeader.tsx
@@ -196,10 +196,10 @@ function ResourcesDropdown({ caseStudy, blog }: { caseStudy: WebflowData; blog:
   ];
 
   return (
-    <div className="container">
+    <div className="container !w-[calc(100%+40px)] 2xl:!max-w-7xl">
       <div className="grid grid-cols-3">
         {/* ----------------------------- Helpful Links ----------------------------- */}
-        <Navigation.DropdownColumn className="-ml-4 pl-0">
+        <Navigation.DropdownColumn className="-ml-4 pl-0 2xl:ml-6">
           <Navigation.DropdownTitle label="Helpful Links" id="dropdown-menu__helpful-links" />
 
           {links.map(({ label, description, href }, index) => (
@@ -232,7 +232,7 @@ function ResourcesDropdown({ caseStudy, blog }: { caseStudy: WebflowData; blog:
         </Navigation.DropdownColumn>
 
         {/* ----------------------------- Blog Articles ---------------------------- */}
-        <Navigation.DropdownColumn className="-mr-4 place-content-start border-none pr-0">
+        <Navigation.DropdownColumn className="place-content-start border-none">
           <Navigation.DropdownTitle
             buttonHref="https://www.lemonsqueezy.com/blog"
             buttonLabel="All articles"
diff --git a/apps/docs/src/components/Navigation.tsx b/apps/docs/src/components/Navigation.tsx
index 94f2ef7..a96a790 100644
--- a/apps/docs/src/components/Navigation.tsx
+++ b/apps/docs/src/components/Navigation.tsx
@@ -209,7 +209,7 @@ const NavDropdownTitle = forwardRef<HTMLDivElement, NavDropdownTitleProps>(
   ({ label, buttonHref, buttonLabel, ...otherProps }, ref) => {
     return (
       <div
-        className="mx-4 mb-4 flex items-center justify-between gap-3 text-sm"
+        className="mx-4 mb-4 flex shrink-0 flex-wrap items-center justify-between gap-3 text-sm"
         ref={ref}
         {...otherProps}
       >
diff --git a/apps/docs/tailwind.config.ts b/apps/docs/tailwind.config.ts
index 3da9dcc..9077fef 100644
--- a/apps/docs/tailwind.config.ts
+++ b/apps/docs/tailwind.config.ts
@@ -30,6 +30,9 @@ const config: Config = {
   darkMode: "class",
   theme: {
     extend: {
+      screens: {
+        "2xl": "82rem",
+      },
       typography: {
         DEFAULT: {
           css: {
@@ -62,6 +65,7 @@ const config: Config = {
       },
 
       maxWidth: {
+        "7xl": "82rem",
         "8xl": "88rem",
         "9xl": "96rem",
         "10xl": "102rem",