diff --git a/css/_chat.scss b/css/_chat.scss
index c2aa61e6c..36dca4545 100644
--- a/css/_chat.scss
+++ b/css/_chat.scss
@@ -42,7 +42,7 @@
     flex: 1;
     font-size: 10pt;
     line-height: 20px;
-    margin-top: 30px;
+    margin-top: $desktopAppDragBarHeight + 5px;
     overflow: auto;
     padding: 5px;
     text-align: left;
@@ -104,7 +104,7 @@
     position: absolute;
     right: 5px;
     text-align: center;
-    top: 25px;
+    top: $desktopAppDragBarHeight;
     width: 10px;
     z-index: 1;
 }
diff --git a/css/_variables.scss b/css/_variables.scss
index 04b5e2373..e887e0977 100644
--- a/css/_variables.scss
+++ b/css/_variables.scss
@@ -90,6 +90,7 @@ $defaultWatermarkLink: '../images/watermark.png';
 $sidebarWidth: 220px;
 $popoverMenuPadding: 13px;
 $happySoftwareBackground: transparent;
+$desktopAppDragBarHeight: 25px;
 
 /**
  * Z-indexes. TODO: Replace this by a function.
diff --git a/css/filmstrip/_vertical_filmstrip.scss b/css/filmstrip/_vertical_filmstrip.scss
index f6bcbee73..1ad922862 100644
--- a/css/filmstrip/_vertical_filmstrip.scss
+++ b/css/filmstrip/_vertical_filmstrip.scss
@@ -25,7 +25,7 @@
     display: flex;
     flex-direction: column-reverse;
     height: 100%;
-    padding: 20px 5px 10px;
+    padding: ($desktopAppDragBarHeight - 5px) 5px 10px;
     /**
      * fixed positioning is necessary for remote menus and tooltips to pop
      * out of the scrolling filmstrip. AtlasKit dialogs and tooltips use