diff --git a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.ng.html b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.ng.html
index f6d62b74f0..25dc52cbb5 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.ng.html
+++ b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.ng.html
@@ -21,6 +21,21 @@
     value="{{ title }}"
   ></tb-truncated-path>
   <span class="controls">
+    <button
+      mat-icon-button
+      [disabled]="!seriesDataList || !seriesDataList.length || (newLineChart && !newLineChart.getIsViewBoxOverridden())"
+      (click)="resetDomain()"
+      [title]="
+            (newLineChart && !newLineChart.getIsViewBoxOverridden()) ?
+                'Line chart is already fitted to data. When data updates, the line chart '
+                + 'will auto fit to its domain.' :
+                'Fit line chart domains to data'
+        "
+      i18n-aria-label="A button that resets line chart domain to the data"
+      aria-label="Fit line chart domains to data"
+    >
+      <mat-icon svgIcon="settings_overscan_24px"></mat-icon>
+    </button>
     <button
       mat-icon-button
       class="pin-button"
@@ -64,22 +79,6 @@
         <mat-icon svgIcon="line_weight_24px"></mat-icon>
         <span>Toggle Y-axis log scale</span>
       </button>
-      <button
-        mat-menu-item
-        [disabled]="!seriesDataList || !seriesDataList.length || (newLineChart && !newLineChart.getIsViewBoxOverridden())"
-        (click)="resetDomain()"
-        [title]="
-            (newLineChart && !newLineChart.getIsViewBoxOverridden) ?
-                'Line chart is already fitted to data. When data updates, the line chart '
-                + 'will auto fit to its domain.' :
-                ''
-        "
-        i18n-aria-label="A button that resets line chart domain to the data"
-        aria-label="Fit line chart domains to data"
-      >
-        <mat-icon svgIcon="settings_overscan_24px"></mat-icon>
-        <span>Fit domain to data</span>
-      </button>
       <button
         mat-menu-item
         (click)="openDataDownloadDialog()"
diff --git a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_test.ts b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_test.ts
index 7fa99684ba..3bb2626c49 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_test.ts
+++ b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_test.ts
@@ -779,13 +779,16 @@ describe('scalar card', () => {
     expect(visibleRunIds).toEqual(['run3']);
   }));
 
-  describe('overflow menu', () => {
-    beforeEach(() => {
+  describe('controls', () => {
+    const ByCss = {
+      FIT_TO_DOMAIN: By.css('[aria-label="Fit line chart domains to data"]'),
+    };
+
+    it('resets domain when user clicks on reset button', fakeAsync(() => {
       const runToSeries = {
-        run1: [
-          {wallTime: 100, value: 1, step: 333},
-          {wallTime: 101, value: 2, step: 555},
-        ],
+        run1: [{wallTime: 100, value: 1, step: 333}],
+        run2: [{wallTime: 100, value: 1, step: 333}],
+        run3: [{wallTime: 100, value: 1, step: 333}],
       };
       provideMockCardRunToSeriesData(
         selectSpy,
@@ -794,31 +797,6 @@ describe('scalar card', () => {
         null /* metadataOverride */,
         runToSeries
       );
-    });
-
-    it('toggles yAxisType when you click on button in overflow menu', fakeAsync(() => {
-      const fixture = createComponent('card1');
-
-      openOverflowMenu(fixture);
-      getMenuButton('Toggle Y-axis log scale on line chart').click();
-      fixture.detectChanges();
-
-      const lineChartEl = fixture.debugElement.query(
-        By.directive(TestableLineChart)
-      );
-      expect(lineChartEl.componentInstance.yAxisType).toBe(YAxisType.LOG);
-
-      openOverflowMenu(fixture);
-      getMenuButton('Toggle Y-axis log scale on line chart').click();
-      fixture.detectChanges();
-
-      expect(lineChartEl.componentInstance.yAxisType).toBe(YAxisType.LINEAR);
-
-      // Clicking on overflow menu and mat button enqueue asyncs. Flush them.
-      flush();
-    }));
-
-    it('resets domain when user clicks on reset button', fakeAsync(() => {
       const fixture = createComponent('card1');
 
       const lineChartEl = fixture.debugElement.query(
@@ -829,14 +807,10 @@ describe('scalar card', () => {
         'resetDomain'
       );
 
-      openOverflowMenu(fixture);
-      getMenuButton('Fit line chart domains to data').click();
+      fixture.debugElement.query(ByCss.FIT_TO_DOMAIN).nativeElement.click();
       fixture.detectChanges();
 
       expect(resetDomainSpy).toHaveBeenCalledTimes(1);
-
-      // Clicking on overflow menu and mat button enqueue asyncs. Flush them.
-      flush();
     }));
 
     it('disables the resetDomain button when there are no runs', fakeAsync(() => {
@@ -850,11 +824,47 @@ describe('scalar card', () => {
       );
       const fixture = createComponent('card1');
 
+      const button = fixture.debugElement.query(ByCss.FIT_TO_DOMAIN);
+      expect(button.properties['disabled']).toBe(true);
+    }));
+  });
+
+  describe('overflow menu', () => {
+    beforeEach(() => {
+      const runToSeries = {
+        run1: [
+          {wallTime: 100, value: 1, step: 333},
+          {wallTime: 101, value: 2, step: 555},
+        ],
+      };
+      provideMockCardRunToSeriesData(
+        selectSpy,
+        PluginType.SCALARS,
+        'card1',
+        null /* metadataOverride */,
+        runToSeries
+      );
+    });
+
+    it('toggles yAxisType when you click on button in overflow menu', fakeAsync(() => {
+      const fixture = createComponent('card1');
+
+      openOverflowMenu(fixture);
+      getMenuButton('Toggle Y-axis log scale on line chart').click();
+      fixture.detectChanges();
+
+      const lineChartEl = fixture.debugElement.query(
+        By.directive(TestableLineChart)
+      );
+      expect(lineChartEl.componentInstance.yAxisType).toBe(YAxisType.LOG);
+
       openOverflowMenu(fixture);
-      const button = getMenuButton('Fit line chart domains to data');
-      expect(button.disabled).toBe(true);
+      getMenuButton('Toggle Y-axis log scale on line chart').click();
+      fixture.detectChanges();
+
+      expect(lineChartEl.componentInstance.yAxisType).toBe(YAxisType.LINEAR);
 
-      // Clicking on overflow menu enqueues async.
+      // Clicking on overflow menu and mat button enqueue asyncs. Flush them.
       flush();
     }));
   });