From e6a65d694a0bee7cff62a2987926c3f91d96c175 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carl-Gerhard=20Lindesva=CC=88rd?= <lindesvard@gmail.com>
Date: Thu, 27 Mar 2025 00:35:50 +0100
Subject: [PATCH] fix(dashboard): css issues with large modals on overview

---
 .../(app)/[organizationSlug]/[projectId]/layout-sidebar.tsx   | 4 ++--
 .../settings/organization/organization/billing.tsx            | 2 +-
 .../app/(app)/[organizationSlug]/[projectId]/side-effects.tsx | 4 +++-
 apps/dashboard/src/components/overview/overview-interval.tsx  | 1 +
 4 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/layout-sidebar.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/layout-sidebar.tsx
index a17d08ba..afcc92a5 100644
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/layout-sidebar.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/layout-sidebar.tsx
@@ -45,7 +45,7 @@ export function LayoutSidebar({
         type="button"
         onClick={() => setActive(false)}
         className={cn(
-          'fixed bottom-0 left-0 right-0 top-0 z-50 backdrop-blur-sm transition-opacity',
+          'fixed bottom-0 left-0 right-0 top-0 z-40 backdrop-blur-sm transition-opacity',
           active
             ? 'pointer-events-auto opacity-100'
             : 'pointer-events-none opacity-0',
@@ -53,7 +53,7 @@ export function LayoutSidebar({
       />
       <div
         className={cn(
-          'fixed left-0 top-0 z-50 flex h-screen w-72 flex-col border-r border-border bg-card transition-transform',
+          'fixed left-0 top-0 z-40 flex h-screen w-72 flex-col border-r border-border bg-card transition-transform',
           '-translate-x-72 lg:-translate-x-0', // responsive
           active && 'translate-x-0', // force active on mobile
         )}
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/organization/organization/billing.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/organization/organization/billing.tsx
index 466cbd86..ff2ba82c 100644
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/organization/organization/billing.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/organization/organization/billing.tsx
@@ -132,7 +132,7 @@ export default function Billing({ organization }: Props) {
 
               return (
                 <div className="row gap-2 whitespace-nowrap">
-                  <div className="items-center text-right justify-end gap-4 flex-1 row">
+                  <div className="items-center text-right justify-end gap-4 flex-1 col md:row">
                     <span>
                       {new Intl.NumberFormat('en-US', {
                         style: 'currency',
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/side-effects.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/side-effects.tsx
index 972341d4..1aa7cc21 100644
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/side-effects.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/side-effects.tsx
@@ -57,7 +57,9 @@ export default function SideEffects({ organization }: SideEffectsProps) {
               </>
             }
           />
-          <Billing organization={organization} />
+          <div className="-mx-4 mt-4">
+            <Billing organization={organization} />
+          </div>
         </DialogContent>
       </Dialog>
     </>
diff --git a/apps/dashboard/src/components/overview/overview-interval.tsx b/apps/dashboard/src/components/overview/overview-interval.tsx
index 4425661b..6ed7ebbf 100644
--- a/apps/dashboard/src/components/overview/overview-interval.tsx
+++ b/apps/dashboard/src/components/overview/overview-interval.tsx
@@ -15,6 +15,7 @@ export function OverviewInterval() {
 
   return (
     <Combobox
+      className="hidden md:flex"
       icon={ClockIcon}
       placeholder="Interval"
       onChange={(value) => {