Merge branch '21128-toolbar-context-menu'

[arvados-workbench2.git] / src / views / virtual-machine-panel / virtual-machine-admin-panel.tsx

diff --git a/src/views/virtual-machine-panel/virtual-machine-admin-panel.tsx b/src/views/virtual-machine-panel/virtual-machine-admin-panel.tsx
index 468ef35a984da4f7a1198d886c576e4d9a9e33ba..20665f178d1d80dae898357244738790faa6e0ee 100644 (file)
--- a/src/views/virtual-machine-panel/virtual-machine-admin-panel.tsx
+++ b/src/views/virtual-machine-panel/virtual-machine-admin-panel.tsx
@@ -11,12 +11,12 @@ import { compose, Dispatch } from 'redux';
 import { loadVirtualMachinesAdminData, openAddVirtualMachineLoginDialog, openRemoveVirtualMachineLoginDialog, openEditVirtualMachineLoginDialog } from 'store/virtual-machines/virtual-machines-actions';
 import { RootState } from 'store/store';
 import { ListResults } from 'services/common-service/common-service';
-import { MoreOptionsIcon, AddUserIcon } from 'components/icon/icon';
+import { MoreVerticalIcon, AddUserIcon } from 'components/icon/icon';
 import { VirtualMachineLogins, VirtualMachinesResource } from 'models/virtual-machines';
 import { openVirtualMachinesContextMenu } from 'store/context-menu/context-menu-actions';
 import { ResourceUuid, VirtualMachineHostname, VirtualMachineLogin } from 'views-components/data-explorer/renderers';
 
-type CssRules = 'moreOptionsButton' | 'moreOptions' | 'chipsRoot';
+type CssRules = 'moreOptionsButton' | 'moreOptions' | 'chipsRoot' | 'vmTableWrapper';
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     moreOptionsButton: {
@@ -31,6 +31,9 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     chipsRoot: {
         margin: `0px -${theme.spacing.unit / 2}px`,
     },
+    vmTableWrapper: {
+        overflowX: 'auto',
+    },
 });
 
 const mapStateToProps = (state: RootState) => {
@@ -95,7 +98,7 @@ export const VirtualMachineAdminPanel = compose(
 const CardContentWithVirtualMachines = (props: VirtualMachineProps) =>
     <Grid item xs={12}>
         <Card>
-            <CardContent>
+            <CardContent className={props.classes.vmTableWrapper}>
                 {virtualMachinesTable(props)}
             </CardContent>
         </Card>
@@ -136,7 +139,7 @@ const virtualMachinesTable = (props: VirtualMachineProps) =>
                     <TableCell className={props.classes.moreOptions}>
                         <Tooltip title="More options" disableFocusListener>
                             <IconButton onClick={event => props.onOptionsMenuOpen(event, machine)} className={props.classes.moreOptionsButton}>
-                                <MoreOptionsIcon />
+                                <MoreVerticalIcon />
                             </IconButton>
                         </Tooltip>
                     </TableCell>