left align actions column and fix spacing

voxel51 · Nov 19, 2024 · 14bf171 · 14bf171
1 parent 1cc390f
commit 14bf171
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 20 deletions.
diff --git a/app/packages/core/src/plugins/SchemaIO/components/ActionsMenu.tsx b/app/packages/core/src/plugins/SchemaIO/components/ActionsMenu.tsx
@@ -9,7 +9,7 @@ import {
   Menu,
   MenuItem,
   Stack,
-  Tooltip
+  Tooltip,
 } from "@mui/material";
 import React, { useCallback } from "react";
 import { getColorByCode } from "../utils";
@@ -21,7 +21,7 @@ export default function ActionsMenu(props: ActionsPropsType) {
 
   if (actions.length <= maxInline) {
     return (
-      <Stack direction="row" spacing={0.5} justifyContent="flex-end">
+      <Stack direction="row" spacing={0.5} justifyContent="flex-start">
         {actions.map((action) => (
           <Action {...action} key={action.name} mode="inline" size={size} />
         ))}
@@ -74,7 +74,8 @@ function ActionsOverflowMenu(props: ActionsPropsType) {
 }
 
 function Action(props: ActionPropsType) {
-  const { label, name, onClick, icon, variant, mode, color, size, tooltip } = props;
+  const { label, name, onClick, icon, variant, mode, color, size, tooltip } =
+    props;
   const resolvedColor = color ? getColorByCode(color) : undefined;
 
   const Icon = icon ? (
@@ -88,25 +89,29 @@ function Action(props: ActionPropsType) {
     [onClick, props]
   );
 
-  const content = mode === "inline" ? (
-    <Button
-      variant={variant}
-      startIcon={Icon}
-      onClick={handleClick}
-      sx={{ color: resolvedColor, padding: size === "small" ? 0 : undefined }}
-    >
-      {label}
-    </Button>
-  ) : (
-    <MenuItem onClick={handleClick}>
-      {Icon && <ListItemIcon>{Icon}</ListItemIcon>}
-      <ListItemText sx={{ color: resolvedColor }}>{label || name}</ListItemText>
-    </MenuItem>
-  );
+  const content =
+    mode === "inline" ? (
+      <Button
+        variant={variant}
+        startIcon={Icon}
+        onClick={handleClick}
+        sx={{ color: resolvedColor, padding: size === "small" ? 0 : undefined }}
+      >
+        {label}
+      </Button>
+    ) : (
+      <MenuItem onClick={handleClick}>
+        {Icon && <ListItemIcon>{Icon}</ListItemIcon>}
+        <ListItemText sx={{ color: resolvedColor }}>
+          {label || name}
+        </ListItemText>
+      </MenuItem>
+    );
 
   return tooltip ? (
     <Tooltip title={tooltip}>
-      <span>{content}</span> {/* Use <span> to wrap the child to avoid DOM issues */}
+      <span>{content}</span>{" "}
+      {/* Use <span> to wrap the child to avoid DOM issues */}
     </Tooltip>
   ) : (
     content

diff --git a/app/packages/core/src/plugins/SchemaIO/components/TableView.tsx b/app/packages/core/src/plugins/SchemaIO/components/TableView.tsx
@@ -141,8 +141,9 @@ export default function TableView(props: ViewPropsType) {
                 {hasRowActions && (
                   <TableCell
                     {...getComponentProps(props, "tableHeadCell", {
-                      sx: { ...headingCellBaseStyles, textAlign: "right" },
+                      sx: { ...headingCellBaseStyles, textAlign: "left" },
                     })}
+                    width={`${max_inline_actions * 5}%`}
                     onClick={() => {
                       handleCellClick(-1, -1);
                     }}