retrospring/app/javascript/styles/components/_mobile-nav.scss

#rs-mobile-nav {
  .container {
    padding: 0;
  }

  padding: 4px 0 unquote('calc(env(safe-area-inset-bottom) + 4px)') 0;

  .navbar-icon-row {
    flex-direction: row;
    justify-content: space-around;
    width: 100%;

    .nav-link {
      padding: 0;

      .fa {
        padding-top: 8px;
        font-size: 20px;
      }

      .badge {
        position: absolute;
        top: 4px;
        transform: translateX(16px);
      }
    }
  }
}

#rs-mobile-nav-notifications,
#rs-mobile-nav-profile {
  bottom: unquote("calc(env(safe-area-inset-bottom) + #{$navbar-height + 2px})");
  position: fixed;
  top: unset;
}

#rs-mobile-nav-profile {
  left: unset;
  right: unquote("calc(env(safe-area-inset-right) + 15px)");
}

#rs-mobile-nav-notifications {
  left: unquote("calc(env(safe-area-inset-left) + 8px)");
  right: unquote("calc(env(safe-area-inset-right) + 8px)");
  max-width: unquote("calc(100vw - (8px + env(safe-area-inset-right)) - (8px + env(safe-area-inset-left)))");
  min-width: unset;
}