Skip to content

fix: bg outside workspace #2605

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
emir-karabeg merged 1 commit into from
Dec 27, 2025
Merged

fix: bg outside workspace #2605

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions apps/sim/app/(auth)/components/auth-background.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ type AuthBackgroundProps = {
export default function AuthBackground({ className, children }: AuthBackgroundProps) {
return (
<div className={cn('relative min-h-screen w-full overflow-hidden', className)}>
<div className='-z-50 pointer-events-none fixed inset-0 bg-white' />
<AuthBackgroundSVG />
<div className='relative z-20'>{children}</div>
</div>
Expand Down
46 changes: 23 additions & 23 deletions apps/sim/app/(landing)/components/background/background-svg.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,39 +5,39 @@ export default function BackgroundSVG() {
focusable='false'
className='-translate-x-1/2 pointer-events-none absolute top-0 left-1/2 z-10 hidden h-full min-h-full w-[1308px] sm:block'
width='1308'
height='4942'
viewBox='0 18 1308 4066'
height='4970'
viewBox='0 18 1308 4094'
fill='none'
xmlns='http://www.w3.org/2000/svg'
preserveAspectRatio='xMidYMin slice'
>
{/* Pricing section (original height ~380 units) */}
{/* Pricing section (extended by ~28 units) */}
<path d='M6.71704 1236.22H1300.76' stroke='#E7E4EF' strokeWidth='2' />
<circle cx='11.0557' cy='1236.48' r='8.07846' fill='white' stroke='#E7E4EF' strokeWidth='2' />
<circle cx='1298.02' cy='1236.48' r='8.07846' fill='white' stroke='#E7E4EF' strokeWidth='2' />
<path d='M10.7967 1245.42V1613.91' stroke='#E7E4EF' strokeWidth='2' />
<path d='M1297.76 1245.96V1613.91' stroke='#E7E4EF' strokeWidth='2' />
<path d='M10.7967 1245.42V1641.91' stroke='#E7E4EF' strokeWidth='2' />
<path d='M1297.76 1245.96V1641.91' stroke='#E7E4EF' strokeWidth='2' />

{/* Integrations section (original height ~412 units) */}
<path d='M6.71704 1614.89H1291.05' stroke='#E7E4EF' strokeWidth='2' />
<circle cx='11.0557' cy='1615.15' r='8.07846' fill='white' stroke='#E7E4EF' strokeWidth='2' />
<circle cx='1298.02' cy='1615.15' r='8.07846' fill='white' stroke='#E7E4EF' strokeWidth='2' />
<path d='M10.7967 1624.61V2026.93' stroke='#E7E4EF' strokeWidth='2' />
<path d='M1297.76 1624.61V2026.93' stroke='#E7E4EF' strokeWidth='2' />
{/* Integrations section (shifted down by 28 units) */}
<path d='M6.71704 1642.89H1291.05' stroke='#E7E4EF' strokeWidth='2' />
<circle cx='11.0557' cy='1643.15' r='8.07846' fill='white' stroke='#E7E4EF' strokeWidth='2' />
<circle cx='1298.02' cy='1643.15' r='8.07846' fill='white' stroke='#E7E4EF' strokeWidth='2' />
<path d='M10.7967 1652.61V2054.93' stroke='#E7E4EF' strokeWidth='2' />
<path d='M1297.76 1652.61V2054.93' stroke='#E7E4EF' strokeWidth='2' />

{/* Testimonials section (original short height ~149 units) */}
<path d='M6.71704 2026.71H1300.76' stroke='#E7E4EF' strokeWidth='2' />
<circle cx='11.0557' cy='2026.97' r='8.07846' fill='white' stroke='#E7E4EF' strokeWidth='2' />
<circle cx='1298.02' cy='2026.97' r='8.07846' fill='white' stroke='#E7E4EF' strokeWidth='2' />
<path d='M10.7967 2036.43V2177.43' stroke='#E7E4EF' strokeWidth='2' />
<path d='M1297.76 2036.43V2177.43' stroke='#E7E4EF' strokeWidth='2' />
{/* Testimonials section (shifted down by 28 units) */}
<path d='M6.71704 2054.71H1300.76' stroke='#E7E4EF' strokeWidth='2' />
<circle cx='11.0557' cy='2054.97' r='8.07846' fill='white' stroke='#E7E4EF' strokeWidth='2' />
<circle cx='1298.02' cy='2054.97' r='8.07846' fill='white' stroke='#E7E4EF' strokeWidth='2' />
<path d='M10.7967 2064.43V2205.43' stroke='#E7E4EF' strokeWidth='2' />
<path d='M1297.76 2064.43V2205.43' stroke='#E7E4EF' strokeWidth='2' />

{/* Footer section line */}
<path d='M6.71704 2177.71H1300.76' stroke='#E7E4EF' strokeWidth='2' />
<circle cx='11.0557' cy='2177.97' r='8.07846' fill='white' stroke='#E7E4EF' strokeWidth='2' />
<circle cx='1298.02' cy='2177.97' r='8.07846' fill='white' stroke='#E7E4EF' strokeWidth='2' />
<path d='M10.7967 2187.43V4090.25' stroke='#E7E4EF' strokeWidth='2' />
<path d='M1297.76 2187.43V4090.25' stroke='#E7E4EF' strokeWidth='2' />
{/* Footer section line (shifted down by 28 units) */}
<path d='M6.71704 2205.71H1300.76' stroke='#E7E4EF' strokeWidth='2' />
<circle cx='11.0557' cy='2205.97' r='8.07846' fill='white' stroke='#E7E4EF' strokeWidth='2' />
<circle cx='1298.02' cy='2205.97' r='8.07846' fill='white' stroke='#E7E4EF' strokeWidth='2' />
<path d='M10.7967 2215.43V4118.25' stroke='#E7E4EF' strokeWidth='2' />
<path d='M1297.76 2215.43V4118.25' stroke='#E7E4EF' strokeWidth='2' />
<path
d='M959.828 116.604C1064.72 187.189 1162.61 277.541 1293.45 536.597'
stroke='#E7E4EF'
Expand Down
1 change: 1 addition & 0 deletions apps/sim/app/(landing)/components/background/background.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ type BackgroundProps = {
export default function Background({ className, children }: BackgroundProps) {
return (
<div className={cn('relative min-h-screen w-full', className)}>
<div className='-z-50 pointer-events-none fixed inset-0 bg-white' />
<BackgroundSVG />
<div className='relative z-0 mx-auto w-full max-w-[1308px]'>{children}</div>
</div>
Expand Down
12 changes: 6 additions & 6 deletions apps/sim/app/_styles/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -538,25 +538,25 @@ input[type="search"]::-ms-clear {
}

.auth-button-gradient {
background: linear-gradient(to bottom, var(--brand-500), var(--brand-400)) !important;
background: linear-gradient(to bottom, var(--brand-primary-hex), var(--brand-400)) !important;
border-color: var(--brand-400) !important;
box-shadow: inset 0 2px 4px 0 var(--brand-400) !important;
}

.auth-button-gradient:hover {
background: linear-gradient(to bottom, var(--brand-500), var(--brand-400)) !important;
background: linear-gradient(to bottom, var(--brand-primary-hex), var(--brand-400)) !important;
opacity: 0.9;
}

.auth-button-custom {
background: var(--brand-500) !important;
border-color: var(--brand-500) !important;
background: var(--brand-primary-hex) !important;
border-color: var(--brand-primary-hex) !important;
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.1) !important;
}

.auth-button-custom:hover {
background: var(--brand-500) !important;
border-color: var(--brand-500) !important;
background: var(--brand-primary-hover-hex) !important;
border-color: var(--brand-primary-hover-hex) !important;
opacity: 1;
}

Expand Down
3 changes: 2 additions & 1 deletion apps/sim/app/changelog/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@ import Nav from '@/app/(landing)/components/nav/nav'

export default function ChangelogLayout({ children }: { children: React.ReactNode }) {
return (
<div className='min-h-screen bg-background text-foreground'>
<div className='relative min-h-screen text-foreground'>
<div className='-z-50 pointer-events-none fixed inset-0 bg-white' />
<Nav />
{children}
</div>
Expand Down
2 changes: 1 addition & 1 deletion apps/sim/app/chat/[identifier]/chat.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -553,7 +553,7 @@ export default function ChatClient({ identifier }: { identifier: string }) {

// Standard text-based chat interface
return (
<div className='fixed inset-0 z-[100] flex flex-col bg-background text-foreground'>
<div className='fixed inset-0 z-[100] flex flex-col bg-white text-foreground'>
{/* Header component */}
<ChatHeader chatConfig={chatConfig} starCount={starCount} />

Expand Down
3 changes: 2 additions & 1 deletion apps/sim/app/invite/components/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@ interface InviteLayoutProps {

export default function InviteLayout({ children }: InviteLayoutProps) {
return (
<div className='bg-white'>
<div className='relative min-h-screen'>
<div className='-z-50 pointer-events-none fixed inset-0 bg-white' />
<Nav variant='auth' />
<div className='flex min-h-[calc(100vh-120px)] items-center justify-center px-4'>
<div className='w-full max-w-[410px]'>{children}</div>
Expand Down
3 changes: 2 additions & 1 deletion apps/sim/app/not-found.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,8 @@ export default function NotFound() {
}, [])

return (
<div className='min-h-screen bg-white'>
<div className='relative min-h-screen'>
<div className='-z-50 pointer-events-none fixed inset-0 bg-white' />
<Nav variant='auth' />
<div className='flex min-h-[calc(100vh-120px)] items-center justify-center px-4'>
<div className='w-full max-w-[410px]'>
Expand Down
6 changes: 4 additions & 2 deletions apps/sim/app/resume/[workflowId]/[executionId]/resume-page-client.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -996,7 +996,8 @@ export default function ResumeExecutionPage({

if (!executionDetail) {
return (
<div className='min-h-screen bg-white'>
<div className='relative min-h-screen'>
<div className='-z-50 pointer-events-none fixed inset-0 bg-white' />
<Nav variant='auth' />
<div className='flex min-h-[calc(100vh-120px)] items-center justify-center px-4'>
<div className='w-full max-w-[410px]'>
Expand Down Expand Up @@ -1042,7 +1043,8 @@ export default function ResumeExecutionPage({
}

return (
<div className='min-h-screen bg-gradient-to-b from-slate-50 to-white'>
<div className='relative min-h-screen bg-gradient-to-b from-slate-50 to-white'>
<div className='-z-50 pointer-events-none fixed inset-0 bg-white' />
<Nav variant='auth' />
<div className='mx-auto min-h-[calc(100vh-120px)] max-w-7xl px-4 py-6 sm:py-8'>
{/* Header Section */}
Expand Down
5 changes: 4 additions & 1 deletion apps/sim/app/templates/layout-client.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,10 @@ import { season } from '@/app/_styles/fonts/season/season'
export default function TemplatesLayoutClient({ children }: { children: React.ReactNode }) {
return (
<Tooltip.Provider delayDuration={600} skipDelayDuration={0}>
<div className={`${season.variable} flex min-h-screen flex-col font-season`}>{children}</div>
<div className={`${season.variable} relative flex min-h-screen flex-col font-season`}>
<div className='-z-50 pointer-events-none fixed inset-0 bg-white' />
{children}
</div>
</Tooltip.Provider>
)
}
12 changes: 6 additions & 6 deletions apps/sim/app/unsubscribe/unsubscribe.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ function UnsubscribeContent() {

if (loading) {
return (
<div className='flex min-h-screen items-center justify-center bg-background'>
<div className='before:-z-50 relative flex min-h-screen items-center justify-center before:pointer-events-none before:fixed before:inset-0 before:bg-white'>
Copy link
Contributor

@greptile-apps greptile-apps bot Dec 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

style: inconsistent approach - all other files use a dedicated <div className='-z-50 pointer-events-none fixed inset-0 bg-white' /> while this uses before: pseudo-element classes

Suggested change
<div className='before:-z-50 relative flex min-h-screen items-center justify-center before:pointer-events-none before:fixed before:inset-0 before:bg-white'>
<div className='relative flex min-h-screen items-center justify-center'>
<div className='-z-50 pointer-events-none fixed inset-0 bg-white' />

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

Prompt To Fix With AI 
This is a comment left during a code review.
Path: apps/sim/app/unsubscribe/unsubscribe.tsx
Line: 121:121

Comment:
**style:** inconsistent approach - all other files use a dedicated `<div className='-z-50 pointer-events-none fixed inset-0 bg-white' />` while this uses `before:` pseudo-element classes

```suggestion
      <div className='relative flex min-h-screen items-center justify-center'>
        <div className='-z-50 pointer-events-none fixed inset-0 bg-white' />
```

<sub>Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!</sub>

How can I resolve this? If you propose a fix, please make it concise.

<Card className='w-full max-w-md border shadow-sm'>
<CardContent className='flex items-center justify-center p-8'>
<Loader2 className='h-8 w-8 animate-spin text-muted-foreground' />
Expand All @@ -130,7 +130,7 @@ function UnsubscribeContent() {

if (error) {
return (
<div className='flex min-h-screen items-center justify-center bg-background p-4'>
<div className='before:-z-50 relative flex min-h-screen items-center justify-center p-4 before:pointer-events-none before:fixed before:inset-0 before:bg-white'>
<Card className='w-full max-w-md border shadow-sm'>
<CardHeader className='text-center'>
<XCircle className='mx-auto mb-2 h-12 w-12 text-red-500' />
Expand Down Expand Up @@ -191,7 +191,7 @@ function UnsubscribeContent() {

if (data?.isTransactional) {
return (
<div className='flex min-h-screen items-center justify-center bg-background p-4'>
<div className='before:-z-50 relative flex min-h-screen items-center justify-center p-4 before:pointer-events-none before:fixed before:inset-0 before:bg-white'>
<Card className='w-full max-w-md border shadow-sm'>
<CardHeader className='text-center'>
<Info className='mx-auto mb-2 h-12 w-12 text-blue-500' />
Expand Down Expand Up @@ -243,7 +243,7 @@ function UnsubscribeContent() {

if (unsubscribed) {
return (
<div className='flex min-h-screen items-center justify-center bg-background'>
<div className='before:-z-50 relative flex min-h-screen items-center justify-center before:pointer-events-none before:fixed before:inset-0 before:bg-white'>
<Card className='w-full max-w-md border shadow-sm'>
<CardHeader className='text-center'>
<CheckCircle className='mx-auto mb-2 h-12 w-12 text-green-500' />
Expand Down Expand Up @@ -271,7 +271,7 @@ function UnsubscribeContent() {
}

return (
<div className='flex min-h-screen items-center justify-center bg-background p-4'>
<div className='before:-z-50 relative flex min-h-screen items-center justify-center p-4 before:pointer-events-none before:fixed before:inset-0 before:bg-white'>
<Card className='w-full max-w-md border shadow-sm'>
<CardHeader className='text-center'>
<Heart className='mx-auto mb-2 h-12 w-12 text-red-500' />
Expand Down Expand Up @@ -391,7 +391,7 @@ export default function Unsubscribe() {
return (
<Suspense
fallback={
<div className='flex min-h-screen items-center justify-center bg-background'>
<div className='before:-z-50 relative flex min-h-screen items-center justify-center before:pointer-events-none before:fixed before:inset-0 before:bg-white'>
<Card className='w-full max-w-md border shadow-sm'>
<CardContent className='flex items-center justify-center p-8'>
<Loader2 className='h-8 w-8 animate-spin text-muted-foreground' />
Expand Down
Loading