diff --git a/ui/components/CheckboxActions.tsx b/ui/components/CheckboxActions.tsx
index e3ebe32b9d..55daf53598 100644
--- a/ui/components/CheckboxActions.tsx
+++ b/ui/components/CheckboxActions.tsx
@@ -104,7 +104,7 @@ function CheckboxActions({ className, checked = [], rows = [] }: Props) {
   }, [checked, rows]);
 
   return (
-    <Flex start align className={className} gap="8">
+    <Flex start align className={className} gap="12">
       <DefaultSync reqObjects={reqObjects} />
       <DefaultSuspend reqObjects={reqObjects} suspend={true} />
       <DefaultSuspend reqObjects={reqObjects} suspend={false} />
diff --git a/ui/components/CustomActions.tsx b/ui/components/CustomActions.tsx
index 7e5f5fa263..9476e68f67 100644
--- a/ui/components/CustomActions.tsx
+++ b/ui/components/CustomActions.tsx
@@ -1,14 +1,10 @@
 import * as React from "react";
-import Spacer from "./Spacer";
 
 function CustomActions({ actions }: { actions: JSX.Element[] }) {
   return actions?.length > 0 ? (
     <>
       {actions?.map((action, index) => (
-        <React.Fragment key={index}>
-          <Spacer padding="xs" />
-          {action}
-        </React.Fragment>
+        <React.Fragment key={index}>{action}</React.Fragment>
       ))}
     </>
   ) : null;
diff --git a/ui/components/SyncActions.tsx b/ui/components/SyncActions.tsx
index 888beb9155..8bbcbedb97 100644
--- a/ui/components/SyncActions.tsx
+++ b/ui/components/SyncActions.tsx
@@ -6,7 +6,6 @@ import { Kind } from "../lib/api/core/types.pb";
 import Button from "./Button";
 import CustomActions from "./CustomActions";
 import Flex from "./Flex";
-import Spacer from "./Spacer";
 import SyncButton from "./SyncButton";
 
 interface Props {
@@ -59,14 +58,13 @@ const SyncActions = ({
     : (opts) => sync.mutateAsync(opts);
 
   return (
-    <Flex start className={className}>
+    <Flex start className={className} gap="12">
       <SyncButton
         onClick={syncHandler}
         loading={sync.isLoading}
         disabled={suspended}
         hideDropdown={hideDropdown}
       />
-      <Spacer padding="xs" />
       <Button onClick={() => suspend.mutateAsync()} loading={suspend.isLoading}>
         {suspended ? "Resume" : "Suspend"}
       </Button>
diff --git a/ui/components/SyncButton.tsx b/ui/components/SyncButton.tsx
index 9abd9d06b4..92cec678e9 100644
--- a/ui/components/SyncButton.tsx
+++ b/ui/components/SyncButton.tsx
@@ -34,10 +34,9 @@ const Sync = styled(Button)<{ $hideDropdown: boolean }>`
   &.MuiButton-outlined {
     margin-right: 0;
     ${(props) =>
-      !props.$hideDropdown && `border-radius: 2px 0 0 2px; border-right: none`}
-  }
-  &.MuiButton-outlined.Mui-disabled {
-    border-right: none;
+      !props.$hideDropdown &&
+      `border-radius: 2px 0 0 2px; border-right: none; &.MuiButton-outlined.Mui-disabled {
+        border-right: none };`}
   }
 `;
 
diff --git a/ui/components/__tests__/__snapshots__/SyncActions.test.tsx.snap b/ui/components/__tests__/__snapshots__/SyncActions.test.tsx.snap
index 32798b6d00..4443ab44da 100644
--- a/ui/components/__tests__/__snapshots__/SyncActions.test.tsx.snap
+++ b/ui/components/__tests__/__snapshots__/SyncActions.test.tsx.snap
@@ -13,6 +13,7 @@ exports[`SyncActions snapshots hideDropdown 1`] = `
   -webkit-box-align: start;
   -ms-flex-align: start;
   align-items: start;
+  gap: 12px;
   -webkit-box-pack: start;
   -webkit-justify-content: flex-start;
   -ms-flex-pack: start;
@@ -33,10 +34,6 @@ exports[`SyncActions snapshots hideDropdown 1`] = `
   align-items: start;
 }
 
-.c6 {
-  padding: 8px;
-}
-
 .c3.MuiButton-root {
   height: 32px;
   font-size: 12px;
@@ -57,10 +54,6 @@ exports[`SyncActions snapshots hideDropdown 1`] = `
   margin-right: 0;
 }
 
-.c4.MuiButton-outlined.Mui-disabled {
-  border-right: none;
-}
-
 .c5 {
   position: absolute;
   overflow: hidden;
@@ -153,9 +146,6 @@ exports[`SyncActions snapshots hideDropdown 1`] = `
       </button>
     </div>
   </div>
-  <div
-    className="c6"
-  />
   <button
     className="MuiButtonBase-root MuiButton-root MuiButton-outlined c3 MuiButton-outlinedPrimary MuiButton-disableElevation"
     disabled={false}
@@ -196,6 +186,7 @@ exports[`SyncActions snapshots non-suspended 1`] = `
   -webkit-box-align: start;
   -ms-flex-align: start;
   align-items: start;
+  gap: 12px;
   -webkit-box-pack: start;
   -webkit-justify-content: flex-start;
   -ms-flex-pack: start;
@@ -278,10 +269,6 @@ exports[`SyncActions snapshots non-suspended 1`] = `
   width: 16px;
 }
 
-.c10 {
-  padding: 8px;
-}
-
 .c3.MuiButton-root {
   height: 32px;
   font-size: 12px;
@@ -333,7 +320,7 @@ exports[`SyncActions snapshots non-suspended 1`] = `
   border-right: none;
 }
 
-.c4.MuiButton-outlined.Mui-disabled {
+.c4.MuiButton-outlined.MuiButton-outlined.Mui-disabled {
   border-right: none;
 }
 
@@ -466,9 +453,6 @@ exports[`SyncActions snapshots non-suspended 1`] = `
       </button>
     </div>
   </div>
-  <div
-    className="c10"
-  />
   <button
     className="MuiButtonBase-root MuiButton-root MuiButton-outlined c3 MuiButton-outlinedPrimary MuiButton-disableElevation"
     disabled={false}
@@ -509,6 +493,7 @@ exports[`SyncActions snapshots suspended 1`] = `
   -webkit-box-align: start;
   -ms-flex-align: start;
   align-items: start;
+  gap: 12px;
   -webkit-box-pack: start;
   -webkit-justify-content: flex-start;
   -ms-flex-pack: start;
@@ -591,10 +576,6 @@ exports[`SyncActions snapshots suspended 1`] = `
   width: 16px;
 }
 
-.c10 {
-  padding: 8px;
-}
-
 .c3.MuiButton-root {
   height: 32px;
   font-size: 12px;
@@ -646,7 +627,7 @@ exports[`SyncActions snapshots suspended 1`] = `
   border-right: none;
 }
 
-.c4.MuiButton-outlined.Mui-disabled {
+.c4.MuiButton-outlined.MuiButton-outlined.Mui-disabled {
   border-right: none;
 }
 
@@ -782,9 +763,6 @@ exports[`SyncActions snapshots suspended 1`] = `
       </button>
     </div>
   </div>
-  <div
-    className="c10"
-  />
   <button
     className="MuiButtonBase-root MuiButton-root MuiButton-outlined c3 MuiButton-outlinedPrimary MuiButton-disableElevation"
     disabled={false}