Fix types and minor issues on mobile

BrunoQuaresma · BrunoQuaresma · commit b7ccb0fc3294 · 2022-08-31T23:34:39.000Z
diff --git a/codersdk/audit.go b/codersdk/audit.go
@@ -29,9 +29,9 @@ const (
 type AuditDiff map[string]AuditDiffField
 
 type AuditDiffField struct {
-	Old    any
-	New    any
-	Secret bool
+	Old    any  `json:"old"`
+	New    any  `json:"new"`
+	Secret bool `json:"secret"`
 }
 
 type AuditLog struct {
diff --git a/site/src/api/typesGenerated.ts b/site/src/api/typesGenerated.ts
@@ -40,10 +40,10 @@ export type AuditDiff = Record<string, AuditDiffField>
 // From codersdk/audit.go
 export interface AuditDiffField {
   // eslint-disable-next-line
-  readonly Old: any
+  readonly old: any
   // eslint-disable-next-line
-  readonly New: any
-  readonly Secret: boolean
+  readonly new: any
+  readonly secret: boolean
 }
 
 // From codersdk/audit.go
diff --git a/site/src/components/AuditLogRow/AuditLogDiff.tsx b/site/src/components/AuditLogRow/AuditLogDiff.tsx
@@ -22,7 +22,7 @@ export const AuditLogDiff: React.FC<{ diff: AuditLog["diff"] }> = ({ diff }) =>
           <div key={attrName} className={styles.diffRow}>
             <div className={styles.diffLine}>{index + 1}</div>
             <div className={styles.diffIcon}>-</div>
-            <div className={styles.diffContent}>
+            <div>
               {attrName}:{" "}
               <span className={combineClasses([styles.diffValue, styles.diffValueOld])}>
                 {getDiffValue(valueDiff.old)}
@@ -36,7 +36,7 @@ export const AuditLogDiff: React.FC<{ diff: AuditLog["diff"] }> = ({ diff }) =>
           <div key={attrName} className={styles.diffRow}>
             <div className={styles.diffLine}>{index + 1}</div>
             <div className={styles.diffIcon}>+</div>
-            <div className={styles.diffContent}>
+            <div>
               {attrName}:{" "}
               <span className={combineClasses([styles.diffValue, styles.diffValueNew])}>
                 {getDiffValue(valueDiff.new)}
@@ -76,9 +76,9 @@ const useStyles = makeStyles((theme) => ({
 
   diffLine: {
     opacity: 0.5,
-
     width: theme.spacing(8),
     textAlign: "right",
+    flexShrink: 0,
   },
 
   diffIcon: {
@@ -87,8 +87,6 @@ const useStyles = makeStyles((theme) => ({
     fontSize: theme.typography.body1.fontSize,
   },
 
-  diffContent: {},
-
   diffNew: {
     backgroundColor: theme.palette.success.dark,
     color: theme.palette.success.contrastText,
diff --git a/site/src/components/AuditLogRow/AuditLogRow.tsx b/site/src/components/AuditLogRow/AuditLogRow.tsx
@@ -102,7 +102,12 @@ export const AuditLogRow: React.FC<AuditLogRowProps> = ({
               </div>
             </Stack>
 
-            <Stack direction="column" alignItems="flex-end" spacing={1}>
+            <Stack
+              direction="column"
+              alignItems="flex-end"
+              spacing={1}
+              className={styles.auditLogRight}
+            >
               <Pill
                 type={pillTypeByHttpStatus(auditLog.status_code)}
                 text={auditLog.status_code.toString()}
@@ -159,10 +164,15 @@ const useStyles = makeStyles((theme) => ({
     display: "block",
   },
 
+  auditLogRight: {
+    width: "auto",
+  },
+
   auditLogExtraInfo: {
     ...theme.typography.body2,
     fontFamily: "inherit",
     color: theme.palette.text.secondary,
+    whiteSpace: "nowrap",
   },
 
   disabledDropdownIcon: {
