🐛 Bug Report: Elevate Profile Card Z-Index for Better Visibility

[shaikahmadnawaz]

📜 Description

Currently, when clicking on the profile, the profile card is not positioned correctly in terms of its z-index. As a result, it appears beneath other elements on the page, causing visibility issues.

👟 Reproduction steps

Click on the user's profile, triggering the profile card to open.

Observe the behavior of the profile card:

Note whether the profile card consistently appears on top of all other page elements.
Identify any instances where the profile card is obscured or partially hidden by other content on the page.

👍 Expected behavior

The profile card should immediately and smoothly appear on the screen without any delays or flickering.

The profile card should consistently and reliably appear on top of all other page elements, ensuring that it is fully visible and accessible to the user.

It should not be obscured, hidden, or partially covered by any other content, such as text, images, or buttons, on the page.

👎 Actual Behavior with Screenshots

Novu version

0.19.0

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?

Yes I am willing to submit a PR!

[subharthihazra]

I can fix this, please assign me this issue.

[shaikahmadnawaz]

Can I proceed @scopsy, Is this a valid issue?

[ainouzgali]

Yes @shaikahmadnawaz , good find. Thank you!

[shaikahmadnawaz]

This is the issue I am facing when I try to run it locally, can you please help me @ainouzgali.

[Shiva1406]

I have made the required changes, kindly review and let me know if any alterations are required.

[shaikahmadnawaz]

I have made the required changes, kindly review and let me know if any alterations are required.

This issue is assigned for me right? @Shiva1406

[Shiva1406]

yes, @shaikahmadnawaz I was working on the issue parallely and thought I would send in my code. My apologies for being abrupt as it is my first time contributing to open source.

[shaikahmadnawaz]

yes, @shaikahmadnawaz I was working on the issue parallely and thought I would send in my code. My apologies for being abrupt as it is my first time contributing to open source.

Are you able to run this code locally? @Shiva1406

[shaikahmadnawaz]

This is the issue I am facing when I try to run it locally, can you please help me @ainouzgali.

@LetItRock, can you please help?

[LetItRock]

This is the issue I am facing when I try to run it locally, can you please help me @ainouzgali.

@LetItRock, can you please help?

hey, please try to clone and run the project locally instead of doing this from the Codespaces.

[shaikahmadnawaz]

This is the issue I am facing when I try to run it locally, can you please help me @ainouzgali.

@LetItRock, can you please help?

hey, please try to clone and run the project locally instead of doing this from the Codespaces.

I am facing the same issue locally also @LetItRock

[djabarovgeorge]

@shaikahmadnawaz could you try to set up the project with npm run setup:project instead?

[shaikahmadnawaz]

npm run setup:project @djabarovgeorge

[LetItRock]

npm run setup:project @djabarovgeorge

@shaikahmadnawaz it looks like everything is built properly :) you can now run the apps manually or with Jarvis ;)

[shaikahmadnawaz]

Check this once @LetItRock, mine is windows 11.

[michaldziuba03]

@shaikahmadnawaz

to be honest, developing on Windows is painful. I would suggest to use WSL - this is what I personally do on my windows machine.

I also had heap out of memory error in the past. I will assume you have enough RAM memory in your machine.

Set env variable:

export NODE_OPTIONS='--max-old-space-size=8192'

For Linux and MacOS

$Env:NODE_OPTIONS='--max-old-space-size=8192'

For Windows (Powershell)

Keep in mind every time you open terminal, you will need to set NODE_OPTIONS env variable.

[shaikahmadnawaz]

@shaikahmadnawaz

to be honest, developing on Windows is painful. I would suggest to use WSL - this is what I personally do on my windows machine.

I also had heap out of memory error in the past. I will assume you have enough RAM memory in your machine.

Set env variable:

export NODE_OPTIONS='--max-old-space-size=8192'

For Linux and MacOS

$Env:NODE_OPTIONS='--max-old-space-size=8192'

For Windows (Powershell)

Keep in mind every time you open terminal, you will need to set NODE_OPTIONS env variable.

Thank you so much for guiding @michaldziuba03

[shaikahmadnawaz]

Now it's working fine locally, but I am facing this issue @michaldziuba03, the command I used to run it locally is npm run start:web

[michaldziuba03]

@shaikahmadnawaz

do you have API running?

You need at least API and WEB app

npm run start:web
npm run start:api

API requires running both MongoDB and Redis.

[shaikahmadnawaz]

@shaikahmadnawaz

do you have API running?

You need at least API and WEB app

npm run start:web
npm run start:api

API requires running both MongoDB and Redis.

Okay, Thank you @michaldziuba03