Optimize the style of the header on the monitoring details page. (apa…

…che#2167)

Co-authored-by: Logic <[email protected]>

web-app/src/app/routes/monitor/monitor-detail/monitor-detail.component.html

@@ -34,17 +34,13 @@
   <nz-breadcrumb-item>
     <span nz-icon nzType="pie-chart"></span>
     <span>{{ 'monitors.detail' | i18n }}</span>
+  </nz-breadcrumb-item>
+  <nz-breadcrumb-item>
     <a routerLink="/setting/define" [queryParams]="{ app: app }">
       <nz-tag style="font-size: 14px; margin-left: 4px" nzColor="#3f51b5" class="hoverClass">
         <span>{{ 'monitor.app.' + app | i18n }}</span>
       </nz-tag>
     </a>
-    <a [href]="'https://hertzbeat.apache.org/docs/help/' + app" target="_blank" style="float: right; margin-right: 5%" class="mobile-hide">
-      <button nz-button nzType="primary">
-        <span>{{ 'common.button.help' | i18n }} </span>
-        <span nz-icon nzType="question-circle"></span>
-      </button>
-    </a>
   </nz-breadcrumb-item>
 </nz-breadcrumb>
 <nz-divider></nz-divider>
@@ -104,7 +100,7 @@
       <span *ngIf="deadline <= 0"> {{ 'monitors.detail.close-refresh' | i18n }} </span>
     </button>
     <button
-      style="margin-left: 2px"
+      style="margin-left: 4px"
       nz-button
       nzType="primary"
       (click)="refreshMetrics()"
@@ -113,6 +109,11 @@
     >
       <i nz-icon nzType="sync" nzTheme="outline"></i>
     </button>
+    <a [href]="'https://hertzbeat.apache.org/docs/help/' + app" target="_blank">
+      <button style="margin-left: 4px" nz-button nzType="primary" nz-tooltip [nzTooltipTitle]="'common.button.help' | i18n">
+        <i nz-icon nzType="question-circle" nzTheme="outline"></i>
+      </button>
+    </a>
   </nz-button-group>
   <nz-dropdown-menu #time_menu="nzDropdownMenu">
     <ul nz-menu>