--- a/devtools/client/themes/animation.css
+++ b/devtools/client/themes/animation.css
@@ -381,25 +381,36 @@ select.playback-rate-selector.devtools-b
   height: 100%;
   overflow: hidden;
   width: 100%;
   z-index: 1;
 }
 
 .animation-detail-header {
   display: flex;
+  padding-inline-end: 0;
+}
+
+/* On OSX the cursor turns into a window-resizing cursor at the edges of the
+ * window, so bring the end of the close button in. */
+:root[platform="mac"] .animation-detail-header {
+  padding-inline-end: 3px;
 }
 
 .animation-detail-title {
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.animation-detail-close-button {
+  margin: 0;
+}
+
 .animation-detail-close-button::before {
   background-image: url(chrome://devtools/skin/images/close.svg);
 }
 
 /* Animated Property List Container */
 .animated-property-list-container {
   display: flex;
   flex: 1;
@@ -482,28 +493,28 @@ select.playback-rate-selector.devtools-b
   width: 0;
 }
 
 /* Animated Property List */
 .animated-property-list-background {
   border-left: var(--tick-line-style);
   border-right: var(--tick-line-style);
   bottom: 0;
-	left: var(--sidebar-width);
+  left: var(--sidebar-width);
   min-height: 100%;
-	position: sticky;
+  position: sticky;
   top: 0;
-	width: calc(100% - var(--sidebar-width) - var(--graph-right-offset));
+  width: calc(100% - var(--sidebar-width) - var(--graph-right-offset));
 }
 
 .animated-property-list-background span {
   border-left: var(--tick-line-style);
-	height: 100%;
-	left: 50%;
-	position: absolute;
+  height: 100%;
+  left: 50%;
+  position: absolute;
 }
 
 .animated-property-list {
   flex: 1;
   list-style-type: none;
   margin: 0;
   padding: 0;
   position: absolute;