ref(css): use var for desktop drag area margin (#4104)

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;
 }

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.

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