From a3350b6f63bcb101d2b0f5bee389a0a8ef079b06 Mon Sep 17 00:00:00 2001
From: KDSBrowne <kert.browne85@gmail.com>
Date: Sat, 23 Nov 2019 17:42:26 +0000
Subject: [PATCH] increase padding for talking indicator elements

---
 .../nav-bar/talking-indicator/styles.scss     | 21 ++++++++++++-------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/bigbluebutton-html5/imports/ui/components/nav-bar/talking-indicator/styles.scss b/bigbluebutton-html5/imports/ui/components/nav-bar/talking-indicator/styles.scss
index d790d76837..bdd2a37f70 100644
--- a/bigbluebutton-html5/imports/ui/components/nav-bar/talking-indicator/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/nav-bar/talking-indicator/styles.scss
@@ -5,11 +5,12 @@
 :root {
   --spoke-opacity: .5;
   --talker-margin-sm: .5rem;
+  --talker-padding-lg: .75rem;
+  --talker-padding-xl: 1.62rem;
+  --talker-padding-xsm: .13rem;
   --talker-max-width: 10rem;
   --talker-font-weight: 400;
   --talker-border-radius: 2rem;
-  --max-speaker-height: 1.5rem;
-  --icon-offset: 1.1rem;
 }
 
 .hidden {
@@ -32,7 +33,7 @@
 
 .speaking {
   flex-wrap: wrap;
-  max-height: var(--max-speaker-height);
+  max-height: var(--talker-padding-xl);
 }
 
 .talker {
@@ -41,8 +42,7 @@
   font-weight: var(--talker-font-weight);
   border-radius: var(--talker-border-radius) var(--talker-border-radius);
   font-size: var(--font-size-base);
-  padding-left: var(--border-radius);
-  padding-right: var(--border-radius);
+  padding: var(--talker-padding-xsm) var(--talker-padding-lg) var(--talker-padding-xsm) var(--talker-padding-lg);
   margin-left: var(--border-radius);
   margin-right: var(--border-radius);
 
@@ -51,6 +51,11 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    margin-right: var(--talker-margin-sm);
+    [dir="rtl"]  & {
+      margin-right: 0;
+      margin-left: var(--talker-margin-sm);
+    }
   }
 
   i {
@@ -62,11 +67,11 @@
 
 .spoke {
   opacity: var(--spoke-opacity);
-  padding-right: var(--icon-offset);
+  padding-right: var(--talker-padding-xl);
 
   [dir="rtl"]  & {
-    padding-left: var(--icon-offset);
-    padding-right: var(--border-radius);
+    padding-left: var(--talker-padding-xl);
+    padding-right: var(--talker-padding-lg)
   }
  }