[Discover] Display filter buttons at top right of the cell (#5784)

Signed-off-by: Miki <miki@amazon.com>

src/plugins/discover/public/application/components/default_discover_table/_table_cell.scss

@@ -6,19 +6,52 @@
   padding: 4px 0 0 !important;
 }
 
-.osdDocTableCell__filter { // TODO: make them appear at top right corner
-}
-
 /**
    * 1. Align icon with text in cell.
    * 2. Use opacity to make this element accessible to screen readers and keyboard.
    * 3. Show on focus to enable keyboard accessibility.
    */
 
 .osdDocTableCell {
-  white-space: pre-wrap;
+  position: relative;
+
+  &__filter {
+    position: absolute;
+    display: flex;
+    flex-grow: 0;
+
+    // Vertically align the button group with the first line of text
+    // 8px is set by .table and 2em is the line-height
+    top: calc(2em / 2 + 8px);
+    transform: translateY(-50%);
+
+    // Stick it to the right but use the padding of the container to distance it from the edge (below)
+    right: 0;
+
+    // Just to have some distance from the content behind it; larger for left so we can show a gradiant
+    // 8px is set by .table
+    padding: 8px 8px 8px 16px;
+
+    &::before {
+      content: "";
+      position: absolute;
+      display: block;
+      right: 0;
+      top: 0;
+      height: 100%;
+      width: 100%;
+      background-image: linear-gradient(to right, transparent 0, $ouiColorEmptyShade 16px);
+      z-index: 1;
+    }
+
+    & > * {
+      // So they will appear over the background in ::before
+      z-index: 2;
+    }
+  }
 
-  &__filterButton {
+  &__filterButton,
+  &__filter {
     opacity: 0;
     transition: opacity $euiAnimSpeedFast;
 
@@ -28,7 +61,9 @@
   }
 
   &:hover &__filterButton,
-  &:focus &__filterButton {
+  &:focus &__filterButton,
+  &:hover &__filter,
+  &:focus &__filter {
     opacity: 1;
   }