From e64b3f8078a826e5073061db45c35cc489e6ddbe Mon Sep 17 00:00:00 2001
From: Sumedha Pramod <pramods@umich.edu>
Date: Thu, 15 Nov 2018 09:41:33 -0800
Subject: [PATCH] Fix: Popover CSS issues  (#287)

- Hide @mention tooltip at all times
- Fix time misalignment in popover
- Fix tablet popover CSS to not be positioned absolutely
---
 .../ActionControls/ActionControls.scss        | 26 ++++++++-----------
 .../AnnotationPopover/AnnotationPopover.scss  | 16 +++++-------
 2 files changed, 17 insertions(+), 25 deletions(-)

diff --git a/src/components/ActionControls/ActionControls.scss b/src/components/ActionControls/ActionControls.scss
index 0e6a895ec..5b6a13f37 100644
--- a/src/components/ActionControls/ActionControls.scss
+++ b/src/components/ActionControls/ActionControls.scss
@@ -1,6 +1,10 @@
 @import '../../variables';
 
 .ba {
+    .bcs-at-mention-tip {
+        display: none;
+    }
+
     .ba-action-controls {
         background: white;
         color: $fours;
@@ -17,7 +21,7 @@
         flex-flow: column wrap;
     }
 
-    .bcs-comment-user-name ~ .bcs-comment-created-at {
+    .bcs-comment .bcs-comment-content .bcs-comment-user-name ~ .bcs-comment-created-at {
         margin: 0;
     }
 
@@ -32,12 +36,16 @@
         .ba-create-popover .ba-action-controls {
             border: none;
             box-shadow: none;
+            justify-content: flex-end;
         }
 
-        .ba-annotation-input-container {
+        .ba-annotation-input-container,
+        .ba-create-popover .ba-annotation-input-container {
+            background: white;
+            border-top: 1px solid $see-see;
             bottom: 0;
+            box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .1);
             padding: 15px;
-            position: absolute;
             width: 100%;
         }
 
@@ -55,17 +63,5 @@
             justify-content: flex-end;
             width: 100%;
         }
-
-        .ba-annotation-input-container {
-            padding: 15px;
-            width: 100%;
-        }
-
-        .ba-create-popover .ba-annotation-input-container {
-            border-top: 1px solid $seesee;
-            box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .1);
-            padding: 15px;
-            width: 100%;
-        }
     }
 }
diff --git a/src/components/AnnotationPopover/AnnotationPopover.scss b/src/components/AnnotationPopover/AnnotationPopover.scss
index aea685aed..7e569efbf 100644
--- a/src/components/AnnotationPopover/AnnotationPopover.scss
+++ b/src/components/AnnotationPopover/AnnotationPopover.scss
@@ -115,7 +115,7 @@
             height: 100%;
         }
 
-        .ba-popover .overlay {
+        .ba-popover .ba-popover-overlay {
             border: none;
             box-shadow: unset;
             display: flex;
@@ -130,7 +130,7 @@
             height: auto;
         }
 
-        .ba-inline .overlay {
+        .ba-inline .ba-popover-overlay {
             background: transparent;
             border-bottom: 1px solid $seesee;
             box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .1);
@@ -139,7 +139,7 @@
             text-align: center;
         }
 
-        .ba-inline.ba-create-popover .overlay {
+        .ba-inline.ba-create-popover .ba-popover-overlay {
             border: none;
             box-shadow: none;
             display: flex;
@@ -164,7 +164,7 @@
             top: auto;
         }
 
-        .ba-create-popover .overlay {
+        .ba-create-popover .ba-popover-overlay {
             background: transparent;
             border-radius: 0;
             height: auto;
@@ -196,19 +196,15 @@
         }
 
         .ba-create-popover,
-        .ba-create-popover .overlay {
+        .ba-create-popover .ba-popover-overlay {
             background: white;
             height: 100%;
         }
 
         .ba-inline.ba-create-popover,
-        .ba-inline.ba-create-popover .overlay {
+        .ba-inline.ba-create-popover .ba-popover-overlay {
             background: transparent;
             height: auto;
         }
-
-        .ba-create-popover .overlay {
-            padding: 15px;
-        }
     }
 }