N
Novu•3mo ago
rajat

Broken tabs in <Inbox>

Hi Support, After adding more tabs the UI seems broken. 
  const tabs = useMemo(() => [
    { label: 'All' },
    { label: 'Command Center', filter: { tags: ['primary-shipment-state', 'document-upload'] } },
    { label: 'Live Risk', filter: { tags: ['live-risk-status', 'live-risk-event'] } },
    { label: 'Temp. Release', filter: { tags: ['temperature-release'] } },
    { label: 'Comments', filter: { tags: ['comments'] } }
  ], []);


  <Inbox
    appearance={appearanceConfig}
    tabs={tabs}
    preferenceGroups={preferenceGroups}
    routerPush={handleRouterPush}
  >
    <InboxContent
      onPrimaryActionClick={(notification) => {
        console.log('onPrimaryActionClick', notification.primaryAction?.redirect?.url || '');
      }}
      onNotificationClick={(notification) => {
        console.log('onNotificationClick', notification.primaryAction?.redirect?.url || '');
      }}
    />
  </Inbox>
  const tabs = useMemo(() => [
    { label: 'All' },
    { label: 'Command Center', filter: { tags: ['primary-shipment-state', 'document-upload'] } },
    { label: 'Live Risk', filter: { tags: ['live-risk-status', 'live-risk-event'] } },
    { label: 'Temp. Release', filter: { tags: ['temperature-release'] } },
    { label: 'Comments', filter: { tags: ['comments'] } }
  ], []);


  <Inbox
    appearance={appearanceConfig}
    tabs={tabs}
    preferenceGroups={preferenceGroups}
    routerPush={handleRouterPush}
  >
    <InboxContent
      onPrimaryActionClick={(notification) => {
        console.log('onPrimaryActionClick', notification.primaryAction?.redirect?.url || '');
      }}
      onNotificationClick={(notification) => {
        console.log('onNotificationClick', notification.primaryAction?.redirect?.url || '');
      }}
    />
  </Inbox>
No description
4 Replies
Novu_Bot
Novu_Bot•3mo ago
@rajat, you just advanced to level 1!
Pawan Jain
Pawan Jain•3mo ago
Just tried from from my side
Pawan Jain
Pawan Jain•3mo ago
It is working as expected Are you customizing inbox popover width? adding custom styles?
rajat
rajatOP•3mo ago
Faced this issue while the browser window size was changed. (switching monitor display) Refreshing the page solved it.

Did you find this page helpful?