fix(docs): wrong image sizes in megamenu (#63)

Author: brankoconjic

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"

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}
       >

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",