Merge pull request #8134 from KDSBrowne/issue-8049

Fix mis-aligned audio permission hint modal (RTL)

bigbluebutton-html5/imports/ui/components/audio/permissions-overlay/styles.scss

@@ -7,15 +7,12 @@
   --position-left-firefox: 22em;
   --position-top-chrome: 5.5em;
   --position-left-chrome: 18em;
-  --position-top-safari: 100px;
-  --position-left-safari-1280: 53em;
-  --position-left-safari-1440: 58em;
-  --position-left-safari-1680: 65em;
-  --position-left-safari-1920: 68em;
+  --position-top-safari: 150px;
   --arrow-top: -65px;
   --arrow-left: -20px;
   --arrow-top-edge: -2.5rem;
   --arrow-left-edge: -21rem;
+  --rtl-hint-top: 15rem;
 }
 
 @mixin arrowIconStyle() {
@@ -55,6 +52,12 @@
   }
 }
 
+@mixin useRTLPosition() {
+  right: none;
+  left: none;
+  top: var(--rtl-hint-top);
+}
+
 @mixin positionHint() {
   :global(.browser-edge) & {
     left: var(--position-left-edge);
@@ -72,8 +75,7 @@
     right: auto;
 
     [dir="rtl"] & {
-      right: var(--position-left-firefox-left-edge);
-      left: auto;
+      @include useRTLPosition();
     }
   }
   :global(.browser-chrome) & {
@@ -82,48 +84,15 @@
     right: auto;
 
     [dir="rtl"] & {
-      left: auto;
-      right: var(--position-left-chrome);
+      @include useRTLPosition();
     }
   }
   :global(.browser-safari) & {
     top: var(--position-top-safari);
-    @include mq($safari1280) {
-      left: var(--position-left-safari-1280);
-      right: auto;
-
-      [dir="rtl"] & {
-        left: auto;
-        right: var(--position-left-safari-1280);
-      }
-    }
-    @include mq($safari1440) {
-      left: var(--position-left-safari-1440);
-      right: auto;
-
-      [dir="rtl"] & {
-        right: var(--position-left-safari-1440);
-        left: auto;
-      }
-    }
-    @include mq($safari1680) {
-      left: var(--position-left-safari-1680);
-      right: auto;
-
-      [dir="rtl"] & {
-        right: var(--position-left-safari-1680);
-        left: auto;
-      }
-    }
-    @include mq($safari1920) {
-      left: var(--position-left-safari-1920);
-      right: auto;
-
-      [dir="rtl"] & {
-        right: var(--position-left-safari-1920);
-        left: auto;
-      }
-    }
+    left:0;
+    right:0;
+    margin-left: auto;
+    margin-right: auto;
   }
 }
 
@@ -147,9 +116,9 @@
 
 .hint {
   @include positionHint();
+  position: absolute;
   background: none;
   box-shadow: none;
-  position: absolute;
   color: #fff;
   font-size: 16px;
   font-weight: 400;
@@ -158,7 +127,7 @@
   width: 340px;
 
   [dir="rtl"] & {
-    padding-right: 0 var(--jumbo-padding-x) 0 0;
+    padding: 0 var(--jumbo-padding-x) 0 0;
   }
 
   small {