fix DefaultValueInput styling

src/components/Table/ColumnMenu/FieldSettings/DefaultValueInput.tsx

@@ -12,6 +12,7 @@ import CodeEditorHelper from "@src/components/CodeEditor/CodeEditorHelper";
 import FormAutosave from "./FormAutosave";
 import { FieldType } from "@src/constants/fields";
 import { WIKI_LINKS } from "@src/constants/externalLinks";
+import { useProjectContext } from "@src/contexts/ProjectContext";
 
 const CodeEditor = lazy(
   () =>
@@ -29,6 +30,8 @@ export default function DefaultValueInput({
   fieldName,
   ...props
 }: IDefaultValueInputProps) {
+  const { settings } = useProjectContext();
+
   const _type =
     type !== FieldType.derivative
       ? type
@@ -41,6 +44,7 @@ export default function DefaultValueInput({
         config.defaultValue?.value ?? getFieldProp("initialValue", _type),
     },
   });
+
   return (
     <>
       <TextField
@@ -50,11 +54,6 @@ export default function DefaultValueInput({
         onChange={(e) => handleChange("defaultValue.type")(e.target.value)}
         fullWidth
         sx={{ mb: 1 }}
-        SelectProps={{
-          MenuProps: {
-            sx: { "& .MuiListItemText-root": { whiteSpace: "normal" } },
-          },
-        }}
       >
         <MenuItem value="undefined">
           <ListItemText
@@ -78,10 +77,30 @@ export default function DefaultValueInput({
             secondary="Set a specific default value for all cells in this column."
           />
         </MenuItem>
-        <MenuItem value="dynamic">
+        <MenuItem
+          value="dynamic"
+          disabled={!settings?.rowyRunUrl}
+          sx={{
+            "&.Mui-disabled": { opacity: 1, color: "text.disabled" },
+            "&.Mui-disabled .MuiListItemText-secondary": {
+              color: "text.disabled",
+            },
+          }}
+        >
           <ListItemText
-            primary={`Dynamic (Requires Rowy Cloud Functions)`}
-            secondary={`Write code to set the default value using this table’s Rowy Cloud Function. Setup is required.`}
+            primary={
+              settings?.rowyRunUrl ? (
+                "Dynamic"
+              ) : (
+                <>
+                  Dynamic —{" "}
+                  <Typography color="error" variant="inherit" component="span">
+                    Requires Rowy Run setup
+                  </Typography>
+                </>
+              )
+            }
+            secondary="Write code to set the default value using Rowy Run"
           />
         </MenuItem>
       </TextField>

src/components/TableSettings/form.tsx

@@ -2,7 +2,7 @@ import _find from "lodash/find";
 import { Field, FieldType } from "@rowy/form-builder";
 import { TableSettingsDialogModes } from "./index";
 
-import { Link, Typography } from "@mui/material";
+import { Link, ListItemText, Typography } from "@mui/material";
 import OpenInNewIcon from "@src/components/InlineOpenInNewIcon";
 import WarningIcon from "@mui/icons-material/WarningAmber";
 
@@ -29,43 +29,32 @@ export const tableSettings = (
       options: [
         {
           label: (
-            <div>
-              Primary collection
-              <Typography
-                variant="caption"
-                color="text.secondary"
-                display="block"
-                sx={{
-                  width: 470,
-                  whiteSpace: "normal",
-                  ".MuiSelect-select &": { display: "none" },
-                }}
-              >
-                Connect this table to the <b>single collection</b> matching the
-                collection name entered below
-              </Typography>
-            </div>
+            <ListItemText
+              primary="Primary collection"
+              secondary={
+                <>
+                  Connect this table to the <b>single collection</b> matching
+                  the collection name entered below
+                </>
+              }
+              style={{ maxWidth: 470 }}
+            />
           ),
           value: "primaryCollection",
         },
         {
           label: (
-            <div>
-              Collection group
-              <Typography
-                variant="caption"
-                color="text.secondary"
-                display="block"
-                sx={{
-                  width: 470,
-                  whiteSpace: "normal",
-                  ".MuiSelect-select &": { display: "none" },
-                }}
-              >
-                Connect this table to <b>all collections and subcollections</b>{" "}
-                matching the collection name entered below
-              </Typography>
-            </div>
+            <ListItemText
+              primary="Collection group"
+              secondary={
+                <>
+                  Connect this table to{" "}
+                  <b>all collections and subcollections</b> matching the
+                  collection name entered below
+                </>
+              }
+              style={{ maxWidth: 470 }}
+            />
           ),
           value: "collectionGroup",
         },

src/theme/components.tsx

@@ -405,6 +405,22 @@ export const components = (theme: Theme): ThemeOptions => {
       MuiListItem: {
         defaultProps: { dense: true },
       },
+      MuiListItemText: {
+        defaultProps: {
+          secondaryTypographyProps: { variant: "caption" },
+        },
+        styleOverrides: {
+          root: {
+            ".MuiMenu-list &": { whiteSpace: "normal" },
+          },
+          primary: {
+            ".MuiSelect-select &": theme.typography.body2,
+          },
+          secondary: {
+            ".MuiSelect-select &": { display: "none" },
+          },
+        },
+      },
       MuiMenu: {
         styleOverrides: {
           list: { padding: theme.spacing(0.5, 0) },
@@ -1008,9 +1024,10 @@ export const components = (theme: Theme): ThemeOptions => {
               },
             },
 
-            "&:hover .MuiCheckbox-root, &:hover .MuiRadio-root": {
-              backgroundColor: theme.palette.action.hover,
-            },
+            "&:hover .MuiCheckbox-root:not(.Mui-disabled), &:hover .MuiRadio-root:not(.Mui-disabled)":
+              {
+                backgroundColor: theme.palette.action.hover,
+              },
           },
           label: {
             marginTop: 10,