[enhancement] Improve mobile display of custom actions

- attempt to match default actions display while still allowing for custom/wildcard content
elastic · Nov 14, 2023 · d076952 · d076952
1 parent 15ae977
commit d076952
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 0 deletions.
diff --git a/changelogs/upcoming/7361.md b/changelogs/upcoming/7361.md
@@ -1,3 +1,5 @@
+- Improved `EuiBasicTable`/`EuiInMemoryTable's mobile UI for custom actions
+
 **Accessibility**
 
 - Fixed custom `EuiBasicTable`/`EuiInMemoryTable` incorrendering nested interactive custom actions
diff --git a/src/components/table/_responsive.scss b/src/components/table/_responsive.scss
@@ -99,6 +99,25 @@
         }
       }
 
+      // Custom actions
+      &:not(.euiTableRow-hasActions) .euiTableRowCell--hasActions:last-child {
+        width: 100%;
+
+        &::before {
+          content: '';
+          position: absolute;
+          left: 0;
+          right: 0;
+          height: $euiBorderWidthThin;
+          background-color: $euiTableActionsBorderColor;
+        }
+
+        .euiTableCellContent {
+          position: relative;
+          top: $euiSizeXS;
+        }
+      }
+
       &.euiTableRow-hasActions.euiTableRow-isExpandable {
         .euiTableRowCell--isExpander {
           top: auto;