feature-9007:Increase spacing below last video room on sidepanel (#9037)

* feature-9007:Increase spacing below last video room on sidepanel

* feature-9007: Increase spacing below last video room on sidepanel

Author: ntthitrinh

app/components/public/stream/side-panel.hbs

@@ -56,44 +56,49 @@
       {{/if}}
     </div>
     {{#if this.showVideoRoom}}
-      <div class="ui inverted vertical fluid menu borderless stream-side-menu" style="margin-top: -20px;">
-        {{#each this.streams as |stream index|}}
-          <a href={{href-to 'public.stream.view' @event stream.slugName stream.id }} class="{{if (eq @currentRoom.microlocationId stream.microlocationId) 'video-active'}} item stream-item d-flex items-center" {{on "click" (fn @setupRoomChat stream) }}>
+    <div class="chat-video-room">
+      <div>
+        <div class="ui inverted vertical fluid menu borderless stream-side-menu">
+          {{#each this.streams as |stream index|}}
+            <a href={{href-to 'public.stream.view' @event stream.slugName stream.id }} class="{{if (eq @currentRoom.microlocationId stream.microlocationId) 'video-active'}} item stream-item d-flex items-center" {{on "click" (fn @setupRoomChat stream) }}>
 
-              <span class="stream-preview-letter" style={{css background-color=(object-at (abs (mod stream.hash this.colors.length)) this.colors)}}>{{truncate (uppercase stream.name) 1 false}}</span>
-              <span class="ml-2">{{stream.name}}</span>
-              {{#if (eq index 0)}}
-                {{#if (gt this.translationChannels.length 1)}}
-								<div style="display:inline-block;margin-left:50px">
-                  <div class="translation-dropdown-button translation-dropdown-container ">
-                    <UiDropdown class="btn btn-secondary dropdown-toggle"
-                                @onChange={{ action "switchLanguage"}}>
-									<div class="translation-dropdown-wrapper">
-                    <div class="translation-dropdown-component">
-                      <i style="font-size:1.1em" class="language icon"></i>
-                    </div>
-                    <div class="translation-dropdown-component">
-                      {{this.translationChannels.length}} {{t 'languages'}}
+                <span class="stream-preview-letter" style={{css background-color=(object-at (abs (mod stream.hash this.colors.length)) this.colors)}}>{{truncate (uppercase stream.name) 1 false}}</span>
+                <span class="ml-2">{{stream.name}}</span>
+                {{#if (eq index 0)}}
+                  {{#if (gt this.translationChannels.length 1)}}
+                  <div style="display:inline-block;margin-left:50px">
+                    <div class="translation-dropdown-button translation-dropdown-container ">
+                      <UiDropdown class="btn btn-secondary dropdown-toggle"
+                                  @onChange={{ action "switchLanguage"}}>
+                    <div class="translation-dropdown-wrapper">
+                      <div class="translation-dropdown-component">
+                        <i style="font-size:1.1em" class="language icon"></i>
+                      </div>
+                      <div class="translation-dropdown-component">
+                        {{this.translationChannels.length}} {{t 'languages'}}
+                      </div>
+                      <div class="translation-dropdown-component">
+                        <i style="margin-left: 0 !important;text-align: right;"
+                          class="dropdown icon"> </i>
+                      </div>
                     </div>
-                    <div class="translation-dropdown-component">
-                      <i style="margin-left: 0 !important;text-align: right;"
-                         class="dropdown icon"> </i>
+                        <div class="ui translation menu">
+                          {{#each-in this.translationChannels as |key channel|}}
+                            <div class="item" data-value="{{channel.url}}">{{channel.name}}</div>
+                          {{/each-in}}
+                        </div>
+                      </UiDropdown>
                     </div>
                   </div>
-                      <div class="ui translation menu">
-                        {{#each-in this.translationChannels as |key channel|}}
-                          <div class="item" data-value="{{channel.url}}">{{channel.name}}</div>
-                        {{/each-in}}
-                      </div>
-                    </UiDropdown>
-                  </div>
-                </div>
+                  {{/if}}
                 {{/if}}
-              {{/if}}
-          </a>
+            </a>
 
-        {{/each}}
+          {{/each}}
+        </div>
       </div>
+    </div>
+
     {{/if}}
 
     {{#if this.loading}}

app/styles/components/stream.scss

@@ -116,6 +116,7 @@ i.chat-panel-icon {
   background-color: #555 !important;
   border: 0 !important;
   box-shadow: none !important;
+  margin-bottom: unset !important;
 }
 
 .video-active {

app/styles/pages/public-event.scss

@@ -230,3 +230,7 @@
 .public-social-links {
   margin-top: 1.5rem !important;
 }
+
+.chat-video-room {
+  margin-bottom: 50px !important;
+}