diff --git a/changelog/7719-fix-style-regression.yaml b/changelog/7719-fix-style-regression.yaml
new file mode 100644
index 00000000000..d48475228da
--- /dev/null
+++ b/changelog/7719-fix-style-regression.yaml
@@ -0,0 +1,4 @@
+type: Fixed # One of: Added, Changed, Developer Experience, Deprecated, Docs, Fixed, Removed, Security
+description: Styles on infra and datastore monitor screens
+pr: 7719 # PR number
+labels: [] # Optional: ["high-risk", "db-migration"]
diff --git a/clients/admin-ui/src/features/data-discovery-and-detection/action-center/fields/MonitorFieldListItem.tsx b/clients/admin-ui/src/features/data-discovery-and-detection/action-center/fields/MonitorFieldListItem.tsx
index 50b50a9dc61..8724bc18f16 100644
--- a/clients/admin-ui/src/features/data-discovery-and-detection/action-center/fields/MonitorFieldListItem.tsx
+++ b/clients/admin-ui/src/features/data-discovery-and-detection/action-center/fields/MonitorFieldListItem.tsx
@@ -52,7 +52,7 @@ export const tagRender: TagRender = (props) => {
onClose={onClose}
/** Style required because of tailwind limitations and our ui package presets */
style={{
- marginInlineEnd: "calc((var(--ant-padding-xs) * 0.5))",
+ marginInlineEnd: 4,
}}
icon={isFromClassifier && }
>
diff --git a/clients/admin-ui/src/features/data-discovery-and-detection/action-center/fields/page.tsx b/clients/admin-ui/src/features/data-discovery-and-detection/action-center/fields/page.tsx
index 5c5dd7da72b..5034e027fc4 100644
--- a/clients/admin-ui/src/features/data-discovery-and-detection/action-center/fields/page.tsx
+++ b/clients/admin-ui/src/features/data-discovery-and-detection/action-center/fields/page.tsx
@@ -263,12 +263,11 @@ const ActionCenterFields = ({
return (
<>
-
-
+
+
- {/** Note: style attr used here due to specificity of ant css. */}
-
-
+
+
Monitor results
diff --git a/clients/admin-ui/src/features/data-discovery-and-detection/action-center/tables/DiscoveredInfrastructureSystemsTable.tsx b/clients/admin-ui/src/features/data-discovery-and-detection/action-center/tables/DiscoveredInfrastructureSystemsTable.tsx
index c0222add85b..344f73ad823 100644
--- a/clients/admin-ui/src/features/data-discovery-and-detection/action-center/tables/DiscoveredInfrastructureSystemsTable.tsx
+++ b/clients/admin-ui/src/features/data-discovery-and-detection/action-center/tables/DiscoveredInfrastructureSystemsTable.tsx
@@ -146,7 +146,7 @@ export const DiscoveredInfrastructureSystemsTable = ({
);
return (
-
+
;
+
+export default meta;
+type Story = StoryObj;
+
+export const Primary: Story = {};
diff --git a/clients/fidesui/src/components/data-entry/SelectInline.stories.tsx b/clients/fidesui/src/components/data-entry/SelectInline.stories.tsx
index f460c2788bb..cbe2db3ac65 100644
--- a/clients/fidesui/src/components/data-entry/SelectInline.stories.tsx
+++ b/clients/fidesui/src/components/data-entry/SelectInline.stories.tsx
@@ -1,5 +1,7 @@
import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Tag } from "../../index";
+import { OPTION_NAMES } from "../../stories/utils/content";
import { SelectInline } from "./SelectInline";
const meta = {
@@ -16,3 +18,21 @@ type Story = StoryObj;
export const Primary: Story = {
args: {},
};
+
+export const Selected: Story = {
+ args: {
+ options: OPTION_NAMES.map((value) => ({ label: value, value })),
+ value: OPTION_NAMES,
+ },
+ parameters: { controls: { includes: [] } },
+};
+
+export const CustomTags: Story = {
+ args: {
+ options: OPTION_NAMES.map((value) => ({ label: value, value })),
+ value: OPTION_NAMES,
+ mode: "tags",
+ tagRender: (props) => {props.value},
+ },
+ parameters: { controls: { includes: [] } },
+};
diff --git a/clients/fidesui/src/hoc/CustomSelect.stories.tsx b/clients/fidesui/src/hoc/CustomSelect.stories.tsx
index 87cf6a5c8d7..f4ec75b4be0 100644
--- a/clients/fidesui/src/hoc/CustomSelect.stories.tsx
+++ b/clients/fidesui/src/hoc/CustomSelect.stories.tsx
@@ -1,6 +1,7 @@
import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Icons } from "../index";
+import { Icons, Tag } from "../index";
+import { OPTION_NAMES } from "../stories/utils/content";
import type { CustomSelectProps } from "./CustomSelect";
import { CustomSelect } from "./CustomSelect";
@@ -16,7 +17,7 @@ const SELECT_VARIANT: Record<
type SelectSize = NonNullable["size"]>;
-const SELECT_SIZE: SelectSize[] = ["small", "medium", "large"];
+const SELECT_SIZE: SelectSize[] = ["small", "middle", "large"];
const SELECT_MODE: Record<
NonNullable["mode"]>,
@@ -98,3 +99,22 @@ export default meta;
type Story = StoryObj;
export const Primary: Story = {};
+
+export const SelectedMultiple: Story = {
+ args: {
+ options: OPTION_NAMES.map((value) => ({ label: value, value })),
+ value: OPTION_NAMES,
+ mode: "multiple",
+ },
+ parameters: { controls: { includes: [] } },
+};
+
+export const CustomTags: Story = {
+ args: {
+ options: OPTION_NAMES.map((value) => ({ label: value, value })),
+ value: OPTION_NAMES,
+ mode: "tags",
+ tagRender: (props) => {props.value},
+ },
+ parameters: { controls: { includes: [] } },
+};
diff --git a/clients/fidesui/src/stories/utils/content.ts b/clients/fidesui/src/stories/utils/content.ts
index 6abf88f837e..89f9e8fdefb 100644
--- a/clients/fidesui/src/stories/utils/content.ts
+++ b/clients/fidesui/src/stories/utils/content.ts
@@ -10,4 +10,6 @@ export const PARAGRAPH_LOREM =
export const MENU_NAMES = ["About", "Info", "Contact", "Settings"];
+export const OPTION_NAMES = ["Fides", "Helios", "Janus", "Lethe", "Astralis"];
+
export const DAYJS_LOREM = dayjs().date(18).month(8).year(2018);