style change how row action icons are aligned

frontend/src/components/TableView/ActionComponent.tsx

@@ -34,7 +34,10 @@ export const ActionComponent = <T extends MRT_RowData>({
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
+            textAlign: 'center',
+
             height: '100%',
+            width: '100%',
           }}
           variant="button"
           component="p"

frontend/src/components/TableView/TableView.tsx

@@ -143,12 +143,10 @@ export const TableView = <T extends MRT_RowData>({
               <ActionComponent {...{ selectorFn, tableRowAction, url, checkRowRestriction, row, idFieldName }} />
             )}
           </Box>
-          <Box>
+          <Box display="flex" alignItems="center" px="1.35em">
             {row.original.has_no_locality && (
               <Tooltip title="This species is not currently in any locality" placement="right-start">
-                <Button>
-                  <NotListedLocationIcon color="primary" />
-                </Button>
+                <NotListedLocationIcon color="disabled" sx={{}} />
               </Tooltip>
             )}
           </Box>

frontend/src/styles/tableview/TableView.css

@@ -1,13 +1,6 @@
- .row-actions-column {
-  display: grid;
-  grid-template-columns: repeat(3, 3.6em);
-  align-items: start;
-  justify-items: start;
+.row-actions-column {
+  display: flex;
+  flex-wrap: nowrap;
   gap: 1px; 
-  max-width: 10.8em;
-  min-width: 10.8em;
+  min-width: 13em;
 }
-
- .row-actions-column:last-child {
-    margin-right: 1.5em;
- }