From a8cc65ab9a67eb7ad9adc6669138e1190e3f753b Mon Sep 17 00:00:00 2001
From: Leonard Kim <leonard.h.kim@gmail.com>
Date: Tue, 24 Oct 2017 11:49:40 -0700
Subject: [PATCH] fix(filmstrip-only): do not re-align local video for invite
 button

The bottom alignment of the local video container is adjusted
in horizontal filmstrip mode so that the videos remain evenly
aligned at the top but the invite button sticks out. With
the invite button hidden in filmstrip only, this only caused
misalignment. Re-adjust the local video container back down
and put transitions on the filmstrip wrapper itself, instead
of on the thumbnail wrapper level to avoid transitions
when re-adjusting.
---
 css/_filmstrip.scss                    |  8 +++++++-
 css/_vertical_filmstrip_overrides.scss | 12 ++++++++----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/css/_filmstrip.scss b/css/_filmstrip.scss
index f755c6bb7..f045b1f74 100644
--- a/css/_filmstrip.scss
+++ b/css/_filmstrip.scss
@@ -52,12 +52,12 @@
         /* The filmstrip should not be covered by the left toolbar. */
         bottom: 0;
         width:auto;
-        transition: bottom 2s;
         overflow: visible !important;
 
         &#remoteVideos {
             border: $thumbnailsBorder solid transparent;
             padding-left: $defaultToolbarSize + 5;
+            transition: bottom 2s;
         }
 
         /**
@@ -187,6 +187,12 @@
     &__videos-filmstripOnly {
         margin-top: auto;
         margin-bottom: auto;
+
+        .filmstrip__videos {
+            &#filmstripLocalVideo {
+                bottom: 0px;
+            }
+        }
     }
 
     .remote-videos-container {
diff --git a/css/_vertical_filmstrip_overrides.scss b/css/_vertical_filmstrip_overrides.scss
index a3c45287f..2f052428b 100644
--- a/css/_vertical_filmstrip_overrides.scss
+++ b/css/_vertical_filmstrip_overrides.scss
@@ -29,7 +29,6 @@
          */
         .filmstrip__videos {
             right: 0;
-            transition: right 2s;
 
             &.hidden {
                 bottom: auto;
@@ -37,12 +36,17 @@
             }
 
             /**
-             * Remove horizontal filmstrip padding used to prevent videos from
-             * overlapping the left-side toolbar. An id selector is used to
-             * match id specificity with filmstrip styles.
+             * An id selector is used to match id specificity with existing
+             * filmstrip styles.
              */
             &#remoteVideos {
+                /**
+                 * Remove horizontal filmstrip padding used to prevent videos
+                 * from overlapping the left-side toolbar. An id selector is
+                 * used to match id specificity with filmstrip styles.
+                 */
                 padding-left: 0;
+                transition: right 2s;
             }
         }