--- a/devtools/client/themes/animationinspector.css
+++ b/devtools/client/themes/animationinspector.css
@@ -58,17 +58,19 @@
 
 :root {
   /* How high should toolbars be */
   --toolbar-height: 20px;
   /* How wide should the sidebar be (should be wide enough to contain long
      property names like 'border-bottom-right-radius' without ellipsis) */
   --timeline-sidebar-width: 200px;
   /* How high should animations displayed in the timeline be */
-  --timeline-animation-height: 20px;
+  --timeline-animation-height: 30px;
+  /* How high should animated properties displayed in the details view be */
+  --detail-animation-height: 20px;
   /* The size of a keyframe marker in the keyframes diagram */
   --keyframes-marker-size: 10px;
   /* The color of the time graduation borders */
   --time-graduation-border-color: rgba(128, 136, 144, .5);
 }
 
 .animation {
   --timeline-border-color: var(--theme-body-color);
@@ -254,16 +256,20 @@ body {
   top: 0;
   left: var(--timeline-sidebar-width);
   /* Leave the width of a marker right of a track so the 100% markers can be
      selected easily */
   right: var(--keyframes-marker-size);
   height: var(--timeline-animation-height);
 }
 
+.animation-detail .track-container {
+  height: var(--detail-animation-height);
+}
+
 .animation-timeline .scrubber-wrapper {
   position: absolute;
   z-index: 5;
   left: var(--timeline-sidebar-width);
   /* Leave the width of a marker right of a track so the 100% markers can be
      selected easily */
   right: var(--keyframes-marker-size);
   pointer-events: none;
@@ -301,42 +307,42 @@ body {
   position: relative;
   height: 100%;
   left: 5px;
   width: 0;
   border-right: 1px solid red;
 }
 
 .animation-timeline .time-header {
-  min-height: var(--timeline-animation-height);
   cursor: col-resize;
   -moz-user-select: none;
+  height: 100%;
 }
 
 .animated-properties-header .header-item,
 .animation-timeline .time-header .header-item {
   position: absolute;
   height: 100%;
   padding-top: 3px;
   border-left: 0.5px solid var(--time-graduation-border-color);
 }
 
 .animation-timeline .header-wrapper {
   position: sticky;
   top: 0;
   background-color: var(--theme-body-background);
   border-bottom: 1px solid var(--time-graduation-border-color);
   z-index: 3;
-  height: var(--timeline-animation-height);
+  height: var(--toolbar-height);
   width: 100%;
   overflow: hidden;
 }
 
 .animation-timeline .time-body {
-  top: var(--timeline-animation-height);
+  top: var(--toolbar-height);
 }
 
 .progress-tick-container .progress-tick,
 .animation-timeline .time-body .time-tick {
   -moz-user-select: none;
   position: absolute;
   height: 100%;
 }
@@ -447,17 +453,17 @@ body {
   max-width: 50%;
 }
 
 .animation-timeline .fast-track .name::after {
   /* Animations running on the compositor have the fast-track background image*/
   content: "";
   display: block;
   position: absolute;
-  top: 1px;
+  top: 5px;
   right: 0;
   height: 100%;
   width: var(--fast-track-icon-width);
   z-index: 1;
 }
 
 .animation-timeline .all-properties .name::after {
   background-color: var(--theme-content-color3);
@@ -542,17 +548,17 @@ body {
 .animation-target .node-highlighter:active,
 .animation-target .node-highlighter.selected {
   filter: url(images/filters.svg#checked-icon-state) brightness(0.9);
 }
 
 /* Inline keyframes info in the timeline */
 
 .animation-detail .animated-properties .property {
-  height: var(--timeline-animation-height);
+  height: var(--detail-animation-height);
   position: relative;
 }
 
 .animation-detail .animated-properties .property.unchanged {
   opacity: 0.6;
 }
 
 .animation-detail .animated-properties .property:nth-child(2n) {
@@ -749,18 +755,18 @@ body {
 .animation-detail .animation-detail-body .animated-properties {
   position: relative;
   height: 100%;
 }
 
 .animated-properties-header {
   -moz-user-select: none;
   position: sticky;
-  top: var(--timeline-animation-height);
-  min-height: var(--timeline-animation-height);
+  top: var(--toolbar-height);
+  min-height: var(--toolbar-height);
   padding-top: 2px;
   z-index: 3;
   background-color: var(--theme-body-background);
 }
 
 .animated-properties-header .header-item:nth-child(2) {
   left: 50%;
 }
@@ -776,17 +782,17 @@ body {
 }
 
 .progress-tick-container .progress-tick:nth-child(3) {
   left: 100%;
 }
 
 .animated-properties-body .property:last-child {
   /* To display animation progress graph clealy when the scroll is bottom. */
-  padding-bottom: calc(var(--timeline-animation-height) / 2);
+  padding-bottom: calc(var(--detail-animation-height) / 2);
 }
 
 .animated-properties .progress-indicator-wrapper {
   pointer-events: none;
   z-index: 5;
 }
 
 .progress-indicator-wrapper .progress-indicator {