Better border hiding for DSM popover button

Signed-off-by: Miki <[email protected]>

src/plugins/data_source_management/public/components/popover_button/popover_button.scss

@@ -12,7 +12,21 @@
     font-size: 0.4rem;
     line-height: 0.4rem;
     padding: 0 $euiSizeXS;
-    background-color: $euiHeaderBackgroundColor;
+
+    /* Trying to hide the button's border:
+     * The background should start 1px (for the border) higher than at the edge of the button.
+     * When the top is 0.2rem, the gradient should start at 0.2rem - 1.
+     * The value is rounded down to the nearest pixel to avoid partial coverage of the border
+     * we are trying to hide.
+     */
+    --dsm-popover-label-start: round(down, calc(0.2rem - 1px), 1px);
+
+    background:
+      linear-gradient(
+        to bottom,
+        transparent var(--dsm-popover-label-start),
+        $euiHeaderBackgroundColor var(--dsm-popover-label-start)
+      );
     color: $euiTextColor;
     z-index: 0;
     text-transform: uppercase;