From 9b0ca2c2cd675fb1cd36e5c37e1b52e5900ca247 Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Fri, 4 Nov 2022 17:08:21 +0000
Subject: [PATCH 1/2] refactor: Improve long rows in audit log

---
 .../components/AuditLogRow/AuditLogDiff.tsx   |  9 ++++++--
 .../AuditLogRow/AuditLogRow.stories.tsx       | 21 ++++++++++++++++++-
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/site/src/components/AuditLogRow/AuditLogDiff.tsx b/site/src/components/AuditLogRow/AuditLogDiff.tsx
index cd45b39ca6cd8..e9a7a561e306a 100644
--- a/site/src/components/AuditLogRow/AuditLogDiff.tsx
+++ b/site/src/components/AuditLogRow/AuditLogDiff.tsx
@@ -83,10 +83,14 @@ const useStyles = makeStyles((theme) => ({
   },
 
   diffColumn: {
-    flex: 1,
+    width: "50%",
     paddingTop: theme.spacing(2),
     paddingBottom: theme.spacing(2.5),
+    paddingRight: theme.spacing(2),
     lineHeight: "160%",
+    alignSelf: "stretch",
+    maxWidth: "50%",
+    overflowX: "auto",
   },
 
   diffOld: {
@@ -101,7 +105,7 @@ const useStyles = makeStyles((theme) => ({
 
   diffLine: {
     opacity: 0.5,
-    width: theme.spacing(8),
+    width: theme.spacing(6),
     textAlign: "right",
     flexShrink: 0,
   },
@@ -110,6 +114,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<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,

From 80168194f9079d8ccd743481d519a839fc67edc2 Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Fri, 4 Nov 2022 17:10:32 +0000
Subject: [PATCH 2/2] Remove unecessary css

---
 site/src/components/AuditLogRow/AuditLogDiff.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/site/src/components/AuditLogRow/AuditLogDiff.tsx b/site/src/components/AuditLogRow/AuditLogDiff.tsx
index e9a7a561e306a..4c32f6145fb2a 100644
--- a/site/src/components/AuditLogRow/AuditLogDiff.tsx
+++ b/site/src/components/AuditLogRow/AuditLogDiff.tsx
@@ -83,14 +83,12 @@ const useStyles = makeStyles((theme) => ({
   },
 
   diffColumn: {
-    width: "50%",
+    flex: 1,
     paddingTop: theme.spacing(2),
     paddingBottom: theme.spacing(2.5),
     paddingRight: theme.spacing(2),
     lineHeight: "160%",
     alignSelf: "stretch",
-    maxWidth: "50%",
-    overflowX: "auto",
   },
 
   diffOld: {