🐛 Bug Report: Can't see inbox options

[rubenvisser22]

📜 Description

As you can see, I'm unable to see the options pop up; the same applies to "Mark all as read".

Is there a way I can add additional styling for these options?

👟 Reproduction steps

import { Inbox } from '@novu/react'
import './NovuInbox.css'

interface NovuInboxProps {
  className?: string
}

const NovuInbox = ({ className = '' }: NovuInboxProps) => {
  return (
    <div className={`z-50 ${className}`}>
      <Inbox
        applicationIdentifier="MHiPDuft-Pfb"
        subscriberId="6890624cd65a2761a4b300f4"
        backendUrl="https://eu.api.novu.co"
        socketUrl="https://eu.ws.novu.co"
        appearance={{
          variables: {
            colorPrimary: '#DD2450',
            colorForeground: '#0E121B'
          }
        }}
      />
    </div>
  )
}

export default NovuInbox
```
`

in my layout:

`              ```
<header className="mb-6 flex items-center justify-between gap-2 transition-opacity duration-200 ease-in-out">
                <div className="flex items-center gap-2">
                  <SidebarTrigger className="-ml-1" />
                  <Separator orientation="vertical" className="mr-2 h-4" />
                  <Breadcrumb>
                    <BreadcrumbList>
                      {breadcrumbs.map((crumb, index) => (
                        <Fragment key={crumb.href}>
                          <BreadcrumbItem>
                            {index === breadcrumbs.length - 1 ? (
                              <BreadcrumbPage>
                                {capitalizeIfSimpleText(crumb.label)}
                              </BreadcrumbPage>
                            ) : (
                              <BreadcrumbLink asChild>
                                <Link to={crumb.href}>
                                  {capitalizeIfSimpleText(crumb.label)}
                                </Link>
                              </BreadcrumbLink>
                            )}
                          </BreadcrumbItem>
                          {index < breadcrumbs.length - 1 && (
                            <BreadcrumbSeparator />
                          )}
                        </Fragment>
                      ))}
                    </BreadcrumbList>
                  </Breadcrumb>
                </div>
                <NovuInbox className="ml-auto z-[9999]" />
              </header>

👍 Expected behavior

The options appear on top.

👎 Actual Behavior with Screenshots

The options are below the inbox.

Novu version

Cloud managed Novu SaaS

npm version

No response

node version

No response

📃 Provide any additional context for the Bug.

No response

👀 Have you spent some time to check if this bug has been raised before?

• I checked and didn't find a similar issue

🏢 Have you read the Contributing Guidelines?

• I have read the Contributing Guidelines

Are you willing to submit PR?

None

[linear]

NV-6481 🐛 Bug Report: Can't see inbox options