Better action column

2 files changed, 37 insertions, 9 deletions

diff --git a/modern/src/settings/GroupsPage.js b/modern/src/settings/GroupsPage.js
index ebaa3b5e..7526563b 100644
--- a/modern/src/settings/GroupsPage.js
+++ b/modern/src/settings/GroupsPage.js
@@ -12,7 +12,7 @@ import CollectionActions from './components/CollectionActions';
 
 const useStyles = makeStyles((theme) => ({
   columnAction: {
-    width: theme.spacing(1),
+    width: '1%',
     padding: theme.spacing(0, 1),
   },
 }));
diff --git a/modern/src/settings/components/CollectionActions.js b/modern/src/settings/components/CollectionActions.js
index c5e14949..e69553bd 100644
--- a/modern/src/settings/components/CollectionActions.js
+++ b/modern/src/settings/components/CollectionActions.js
@@ -1,16 +1,31 @@
 import React, { useState } from 'react';
-import { IconButton, Menu, MenuItem } from '@mui/material';
+import {
+  IconButton, Menu, MenuItem, useMediaQuery, useTheme,
+} from '@mui/material';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
+import EditIcon from '@mui/icons-material/Edit';
+import DeleteIcon from '@mui/icons-material/Delete';
 import { useNavigate } from 'react-router-dom';
+import { makeStyles } from '@mui/styles';
 import RemoveDialog from '../../common/components/RemoveDialog';
 import { useTranslation } from '../../common/components/LocalizationProvider';
 
+const useStyles = makeStyles(() => ({
+  row: {
+    display: 'flex',
+  },
+}));
+
 const CollectionActions = ({
   itemId, editPath, endpoint, setTimestamp,
 }) => {
+  const theme = useTheme();
+  const classes = useStyles();
   const navigate = useNavigate();
   const t = useTranslation();
 
+  const phone = useMediaQuery(theme.breakpoints.down('sm'));
+
   const [menuAnchorEl, setMenuAnchorEl] = useState(null);
   const [removing, setRemoving] = useState(false);
 
@@ -33,13 +48,26 @@ const CollectionActions = ({
 
   return (
     <>
-      <IconButton size="small" onClick={(event) => setMenuAnchorEl(event.currentTarget)}>
-        <MoreVertIcon />
-      </IconButton>
-      <Menu open={!!menuAnchorEl} anchorEl={menuAnchorEl} onClose={() => setMenuAnchorEl(null)}>
-        <MenuItem onClick={handleEdit}>{t('sharedEdit')}</MenuItem>
-        <MenuItem onClick={handleRemove}>{t('sharedRemove')}</MenuItem>
-      </Menu>
+      {phone ? (
+        <>
+          <IconButton size="small" onClick={(event) => setMenuAnchorEl(event.currentTarget)}>
+            <MoreVertIcon fontSize="small" />
+          </IconButton>
+          <Menu open={!!menuAnchorEl} anchorEl={menuAnchorEl} onClose={() => setMenuAnchorEl(null)}>
+            <MenuItem onClick={handleEdit}>{t('sharedEdit')}</MenuItem>
+            <MenuItem onClick={handleRemove}>{t('sharedRemove')}</MenuItem>
+          </Menu>
+        </>
+      ) : (
+        <div className={classes.row}>
+          <IconButton size="small" onClick={handleEdit}>
+            <EditIcon fontSize="small" />
+          </IconButton>
+          <IconButton size="small" onClick={handleRemove}>
+            <DeleteIcon fontSize="small" />
+          </IconButton>
+        </div>
+      )}
       <RemoveDialog style={{ transform: 'none' }} open={removing} endpoint={endpoint} itemId={itemId} onResult={handleRemoveResult} />
     </>
   );