diff --git a/app/assets/stylesheets/components/_buttons.scss b/app/assets/stylesheets/components/_buttons.scss
index e025e64b..6550b4d8 100644
--- a/app/assets/stylesheets/components/_buttons.scss
+++ b/app/assets/stylesheets/components/_buttons.scss
@@ -11,7 +11,7 @@
   text-transform: uppercase;
   text-decoration: none;
   position: fixed;
-  bottom: calc(#{$navbar-height} + env(safe-area-inset-bottom));
+  bottom: unquote('calc(#{$navbar-height} + env(safe-area-inset-bottom))');
   right: 0px;
   margin-right: 7px;
   margin-bottom: 7px;
diff --git a/app/assets/stylesheets/components/_mobile-nav.scss b/app/assets/stylesheets/components/_mobile-nav.scss
index 422a8c75..ce62f3e4 100644
--- a/app/assets/stylesheets/components/_mobile-nav.scss
+++ b/app/assets/stylesheets/components/_mobile-nav.scss
@@ -1,5 +1,5 @@
 #rs-mobile-nav {
-  padding-bottom: calc(env(safe-area-inset-bottom) + 4px);
+  padding-bottom: unquote('calc(env(safe-area-inset-bottom) + 4px)');
 
   .navbar-nav {
     flex-direction: row;