refactor: Improve long rows in audit log (#4904)

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: {

site/src/components/AuditLogRow/AuditLogRow.stories.tsx

@@ -34,7 +34,10 @@ const Template: Story<AuditLogRowProps> = (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,