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

This commit is contained in:
Carl-Gerhard Lindesvärd
2025-03-27 00:35:50 +01:00
parent d4c1c15174
commit e6a65d694a
4 changed files with 7 additions and 4 deletions

View File

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

View File

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

View File

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