diff --git a/site/src/components/AuditLogRow/AuditLogDiff.tsx b/site/src/components/AuditLogRow/AuditLogDiff.tsx index cd45b39ca6cd8..4c32f6145fb2a 100644 --- a/site/src/components/AuditLogRow/AuditLogDiff.tsx +++ b/site/src/components/AuditLogRow/AuditLogDiff.tsx @@ -86,7 +86,9 @@ const useStyles = makeStyles((theme) => ({ flex: 1, paddingTop: theme.spacing(2), paddingBottom: theme.spacing(2.5), + paddingRight: theme.spacing(2), lineHeight: "160%", + alignSelf: "stretch", }, diffOld: { @@ -101,7 +103,7 @@ const useStyles = makeStyles((theme) => ({ diffLine: { opacity: 0.5, - width: theme.spacing(8), + width: theme.spacing(6), textAlign: "right", flexShrink: 0, }, @@ -110,6 +112,7 @@ const useStyles = makeStyles((theme) => ({ width: theme.spacing(4), textAlign: "center", fontSize: theme.typography.body1.fontSize, + flexShrink: 0, }, diffNew: { diff --git a/site/src/components/AuditLogRow/AuditLogRow.stories.tsx b/site/src/components/AuditLogRow/AuditLogRow.stories.tsx index 9b1239ebe7b82..533b6d8c72c06 100644 --- a/site/src/components/AuditLogRow/AuditLogRow.stories.tsx +++ b/site/src/components/AuditLogRow/AuditLogRow.stories.tsx @@ -34,7 +34,10 @@ const Template: Story = (args) => ( export const NoDiff = Template.bind({}) NoDiff.args = { - auditLog: MockAuditLog, + auditLog: { + ...MockAuditLog, + diff: {}, + }, } export const WithDiff = Template.bind({}) @@ -43,6 +46,22 @@ WithDiff.args = { defaultIsDiffOpen: true, } +export const WithLongDiffRow = Template.bind({}) +WithLongDiffRow.args = { + auditLog: { + ...MockAuditLog2, + diff: { + ...MockAuditLog2.diff, + icon: { + old: "https://www.docker.com/wp-content/uploads/2022/03/Moby-logo.png", + new: "https://www.docker.com/wp-content/uploads/2022/03/vertical-logo-monochromatic.png", + secret: false, + }, + }, + }, + defaultIsDiffOpen: true, +} + export const WithWorkspaceBuild = Template.bind({}) WithWorkspaceBuild.args = { auditLog: MockAuditLogWithWorkspaceBuild,