fix(dashboard): css issues with large modals on overview

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

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

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

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) => {