Moved edit-popover pointer to the before pseudo of the parent element in datetime widget as well.

Author: g1eb

src/datetime-input.css

@@ -22,6 +22,26 @@
   -webkit-user-select: none;
   -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
 }
+.datetime-input.datetime.active::before {
+  content: "";
+  display: block;
+  position: absolute;
+  background-color: #efefef;
+  width: 2em;
+  height: 2em;
+  bottom: -1.6em;
+  left: calc(50% - 1em);
+  z-index: 10;
+  border-color: #aaa;
+  border-style: solid;
+  border-width: 1px 1px 0 0;
+  transform: rotate(-45deg);
+  -moz-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  -o-transform: rotate(-45deg);
+  -webkit-transform: rotate(-45deg);
+  transition: background-color 0.25s ease-out;
+}
 
 
 /**
@@ -82,33 +102,13 @@
 .datetime-input.datetime .edit-popover .header {
   width: 100%;
   color: #777;
+  padding-top: 0.5em;
   font-size: 1.5em;
   line-height: 2em;
   cursor: pointer;
   transition: background-color 0.25s ease-out;
 }
-.datetime-input.datetime .edit-popover .header::before {
-  content: "";
-  display: block;
-  position: absolute;
-  background-color: #efefef;
-  width: 1em;
-  height: 1em;
-  top: -0.55em;
-  left: 10%;
-  z-index: 2;
-  border-color: #aaa;
-  border-style: solid;
-  border-width: 1px 1px 0 0;
-  transform: rotate(-45deg);
-  -moz-transform: rotate(-45deg);
-  -ms-transform: rotate(-45deg);
-  -o-transform: rotate(-45deg);
-  -webkit-transform: rotate(-45deg);
-  transition: background-color 0.25s ease-out;
-}
-.datetime-input.datetime .edit-popover .header:hover,
-.datetime-input.datetime .edit-popover .header:hover::before {
+.datetime-input.datetime .edit-popover .header:hover {
   background-color: #ddd;
 }