Content not clickable right under safearea

Hi,
I used a capacitor plugin to place my app content under the safe area on ios devices. I used this plugin

and I managed to place my app content under the safe area by using a css class:

.safe-area {
  padding-top: var(--safe-area-inset-top) !important;
}

But i cannot click on the three buttons on the left of my app bar even if they are under the safe area. I can click on the icon right under the profile icon. I also tested on testflight and Its also not clickable on my phone. I tried applying z-index to my app bar but no matter what it was not clickable. I also tried using marginin instead of padding but it did not fix anything.

I also tried to use env() in my css class but the app bar is placed far below the dynamic island:

.safe-area {
  padding-top: env(safe-area-inset-top) !important;
}

This works but i would like the app bar to be right below the dynamic island. Is the content that appears in yellow on the pictures in this link clickable ?