Fixed: Interactive Import dropdown width on mobile

(cherry picked from commit f2f4a98eed5bc83224917897642a28381ca648b9)

frontend/src/Components/Table/Cells/TableRowCell.js

@@ -0,0 +1,37 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import styles from './TableRowCell.css';
+
+class TableRowCell extends Component {
+
+  //
+  // Render
+
+  render() {
+    const {
+      className,
+      children,
+      ...otherProps
+    } = this.props;
+
+    return (
+      <td
+        className={className}
+        {...otherProps}
+      >
+        {children}
+      </td>
+    );
+  }
+}
+
+TableRowCell.propTypes = {
+  className: PropTypes.string.isRequired,
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
+};
+
+TableRowCell.defaultProps = {
+  className: styles.cell
+};
+
+export default TableRowCell;

frontend/src/Components/Table/Cells/TableRowCell.tsx

@@ -1,11 +0,0 @@
-import React, { ComponentPropsWithoutRef } from 'react';
-import styles from './TableRowCell.css';
-
-export interface TableRowCellprops extends ComponentPropsWithoutRef<'td'> {}
-
-export default function TableRowCell({
-  className = styles.cell,
-  ...tdProps
-}: TableRowCellprops) {
-  return <td className={className} {...tdProps} />;
-}

frontend/src/InteractiveImport/Interactive/InteractiveImportModalContent.css

@@ -18,12 +18,17 @@
 .leftButtons,
 .rightButtons {
   display: flex;
-  flex: 1 0 50%;
   flex-wrap: wrap;
+  min-width: 0;
+}
+
+.leftButtons {
+  flex: 0 1 auto;
 }
 
 .rightButtons {
   justify-content: flex-end;
+  flex: 1 1 50%;
 }
 
 .importMode,
@@ -31,6 +36,7 @@
   composes: select from '~Components/Form/SelectInput.css';
 
   margin-right: 10px;
+  max-width: 100%;
   width: auto;
 }
 
@@ -43,10 +49,12 @@
     .leftButtons,
     .rightButtons {
       flex-direction: column;
+      gap: 3px;
     }
 
     .leftButtons {
       align-items: flex-start;
+      max-width: fit-content;
     }
 
     .rightButtons {