Allow to scroll table columns with labels (badges) (#4358)

src/renderer/components/table/table-cell.scss

@@ -25,6 +25,20 @@
   overflow: hidden;
   text-overflow: ellipsis;
 
+  &.menu {
+    @include table-cell-action;
+  }
+
+  &.scrollable {
+    @include hidden-scrollbar;
+    display: flex;
+    align-items: center;
+
+    :not(:last-of-type) {
+      margin-right: 0.5em;
+    }
+  }
+
   &.checkbox {
     display: flex;
     flex: 0 0 32px !important;

src/renderer/components/table/table-cell.tsx

@@ -33,6 +33,7 @@ export interface TableCellProps extends React.DOMAttributes<HTMLDivElement> {
   id?: string; // used for configuration visibility of columns
   className?: string;
   title?: ReactNode;
+  scrollable?: boolean; // content inside could be scrolled
   checkbox?: boolean; // render cell with a checkbox
   isChecked?: boolean; // mark checkbox as checked or not
   renderBoolean?: boolean; // show "true" or "false" for all of the children elements are "typeof boolean"
@@ -88,9 +89,11 @@ export class TableCell extends React.Component<TableCellProps> {
   }
 
   render() {
-    const { className, checkbox, isChecked, sortBy, _sort, _sorting, _nowrap, children, title, renderBoolean: displayBoolean, showWithColumn, ...cellProps } = this.props;
+    const { className, checkbox, isChecked, scrollable, sortBy, _sort, _sorting, _nowrap, children, title, renderBoolean: displayBoolean, showWithColumn, ...cellProps } = this.props;
+
     const classNames = cssNames("TableCell", className, {
       checkbox,
+      scrollable,
       nowrap: _nowrap,
       sorting: this.isSortable,
     });