Merge pull request #15828 from grafana/15771-datasource-url-icon

Add padding to all input fields with help icon

public/app/features/alerting/partials/alert_tab.html

@@ -17,7 +17,7 @@
           </div>
           <div class="gf-form max-width-11">
             <label class="gf-form-label width-5">For</label>
-            <input type="text" class="gf-form-input max-width-6" ng-model="ctrl.alert.for"
+            <input type="text" class="gf-form-input max-width-6 gf-form-input--has-help-icon" ng-model="ctrl.alert.for"
                   spellcheck='false' placeholder="5m">
             <info-popover mode="right-absolute">
               If an alert rule has a configured For and the query violates the configured

public/app/features/datasources/partials/http_settings.html

@@ -4,7 +4,7 @@
     <div class="gf-form-inline">
       <div class="gf-form max-width-30">
         <span class="gf-form-label width-10">URL</span>
-        <input class="gf-form-input" type="text"
+        <input class="gf-form-input gf-form-input--has-help-icon" type="text"
               ng-model='current.url' placeholder="{{suggestUrl}}"
               bs-typeahead="getSuggestUrls"  min-length="0"
               ng-pattern="/^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/" required></input>
@@ -59,7 +59,7 @@
 		<div class="gf-form-inline" ng-if="current.access=='proxy'">
 			<div class="gf-form">
 				<span class="gf-form-label width-10">Whitelisted Cookies</span>
-				<bootstrap-tagsinput ng-model="current.jsonData.keepCookies" width-class="width-20" tagclass="label label-tag" placeholder="Add Name">
+				<bootstrap-tagsinput ng-model="current.jsonData.keepCookies" width-class="width-20 gf-form-input--has-help-icon" tagclass="label label-tag" placeholder="Add Name">
 				</bootstrap-tagsinput>
 				<info-popover mode="right-absolute">
 					Grafana Proxy deletes forwarded cookies by default. Specify cookies by name that should be forwarded to the data source.

public/app/plugins/datasource/cloudwatch/partials/config.html

@@ -8,7 +8,7 @@
 
   <div class="gf-form" ng-show='ctrl.current.jsonData.authType == "credentials"'>
     <label class="gf-form-label width-13">Credentials profile name</label>
-    <input type="text" class="gf-form-input max-width-18" ng-model='ctrl.current.database' placeholder="default"></input>
+    <input type="text" class="gf-form-input max-width-18 gf-form-input--has-help-icon" ng-model='ctrl.current.database' placeholder="default"></input>
     <info-popover mode="right-absolute">
       Credentials profile name, as specified in ~/.aws/credentials, leave blank for default
     </info-popover>
@@ -30,7 +30,7 @@
 
   <div class="gf-form" ng-show='ctrl.current.jsonData.authType == "arn"'>
     <label class="gf-form-label width-13">Assume Role ARN</label>
-    <input type="text" class="gf-form-input max-width-18" ng-model='ctrl.current.jsonData.assumeRoleArn' placeholder="arn:aws:iam:*"></input>
+    <input type="text" class="gf-form-input max-width-18 gf-form-input--has-help-icon" ng-model='ctrl.current.jsonData.assumeRoleArn' placeholder="arn:aws:iam:*"></input>
     <info-popover mode="right-absolute">
       ARN of Assume Role
     </info-popover>
@@ -47,7 +47,7 @@
   </div>
   <div class="gf-form">
     <label class="gf-form-label width-13">Custom Metrics</label>
-    <input type="text" class="gf-form-input max-width-18" ng-model='ctrl.current.jsonData.customMetricsNamespaces' placeholder="Namespace1,Namespace2"></input>
+    <input type="text" class="gf-form-input max-width-18 gf-form-input--has-help-icon" ng-model='ctrl.current.jsonData.customMetricsNamespaces' placeholder="Namespace1,Namespace2"></input>
     <info-popover mode="right-absolute">
       Namespaces of Custom Metrics
     </info-popover>

public/app/plugins/datasource/elasticsearch/partials/config.html

@@ -36,7 +36,7 @@
 	<div class="gf-form-inline">
 		<div class="gf-form">
 			<span class="gf-form-label width-9">Min time interval</span>
-			<input type="text" class="gf-form-input width-6" ng-model="ctrl.current.jsonData.timeInterval" spellcheck='false' placeholder="10s"></input>
+			<input type="text" class="gf-form-input width-6 gf-form-input--has-help-icon" ng-model="ctrl.current.jsonData.timeInterval" spellcheck='false' placeholder="10s"></input>
 			<info-popover mode="right-absolute">
 				A lower limit for the auto group by time interval. Recommended to be set to write frequency,
 				for example <code>1m</code> if your data is written every minute.

public/app/plugins/datasource/grafana-azure-monitor-datasource/partials/config.html

@@ -16,7 +16,7 @@
   <div class="gf-form-inline">
     <div class="gf-form">
       <span class="gf-form-label width-9">Subscription Id</span>
-      <input class="gf-form-input width-30" type="text" ng-model="ctrl.current.jsonData.subscriptionId" placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"></input>
+      <input class="gf-form-input width-30 gf-form-input--has-help-icon" type="text" ng-model="ctrl.current.jsonData.subscriptionId" placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"></input>
       <info-popover mode="right-absolute">
         <p>In the Azure Portal, navigate to Subscriptions -> Choose subscription -> Overview -> Subscription ID.</p>
         <a target="_blank" href="https://docs.microsoft.com/en-us/azure/azure-resource-manager/resource-group-create-service-principal-portal">**Click
@@ -27,7 +27,7 @@
   <div class="gf-form-inline">
     <div class="gf-form">
       <span class="gf-form-label width-9">Tenant Id</span>
-      <input class="gf-form-input width-30" type="text" ng-model="ctrl.current.jsonData.tenantId" placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"></input>
+      <input class="gf-form-input width-30 gf-form-input--has-help-icon" type="text" ng-model="ctrl.current.jsonData.tenantId" placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"></input>
       <info-popover mode="right-absolute">
         <p>In the Azure Portal, navigate to Azure Active Directory -> Properties -> Directory ID.</p>
         <a target="_blank" href="https://docs.microsoft.com/en-us/azure/azure-resource-manager/resource-group-create-service-principal-portal">**Click
@@ -38,7 +38,7 @@
   <div class="gf-form-inline">
     <div class="gf-form">
       <span class="gf-form-label width-9">Client Id</span>
-      <input class="gf-form-input width-30" type="text" ng-model="ctrl.current.jsonData.clientId" placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"></input>
+      <input class="gf-form-input width-30 gf-form-input--has-help-icon" type="text" ng-model="ctrl.current.jsonData.clientId" placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"></input>
       <info-popover mode="right-absolute">
         <p>In the Azure Portal, navigate to Azure Active Directory -> App Registrations -> Choose your app ->
           Application ID.</p>
@@ -50,7 +50,7 @@
   <div class="gf-form-inline" ng-if="!ctrl.current.secureJsonFields.clientSecret">
     <div class="gf-form">
       <span class="gf-form-label width-9">Client Secret</span>
-      <input class="gf-form-input width-30" type="text" ng-model="ctrl.current.secureJsonData.clientSecret" placeholder=""></input>
+      <input class="gf-form-input width-30 gf-form-input--has-help-icon" type="text" ng-model="ctrl.current.secureJsonData.clientSecret" placeholder=""></input>
       <info-popover mode="right-absolute">
         <p>To create a new key, log in to Azure Portal, navigate to Azure Active Directory -> App Registrations ->
           Choose your
@@ -83,7 +83,7 @@
   <div class="gf-form-inline">
     <div class="gf-form">
       <span class="gf-form-label width-9">Subscription Id</span>
-      <input class="gf-form-input width-30" type="text" ng-model="ctrl.current.jsonData.logAnalyticsSubscriptionId"
+      <input class="gf-form-input width-30 gf-form-input--has-help-icon" type="text" ng-model="ctrl.current.jsonData.logAnalyticsSubscriptionId"
         placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX" />
       <info-popover mode="right-absolute">
         <p>In the Azure Portal, navigate to Subscriptions -> Choose subscription -> Overview -> Subscription ID.</p>
@@ -95,7 +95,7 @@
   <div class="gf-form-inline">
     <div class="gf-form">
       <span class="gf-form-label width-9">Tenant Id</span>
-      <input class="gf-form-input width-30" type="text" ng-model="ctrl.current.jsonData.logAnalyticsTenantId"
+      <input class="gf-form-input width-30 gf-form-input--has-help-icon" type="text" ng-model="ctrl.current.jsonData.logAnalyticsTenantId"
         placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX" />
       <info-popover mode="right-absolute">
         <p>In the Azure Portal, navigate to Azure Active Directory -> Properties -> Directory ID.</p>
@@ -107,7 +107,7 @@
   <div class="gf-form-inline">
     <div class="gf-form">
       <span class="gf-form-label width-9">Client Id</span>
-      <input class="gf-form-input width-30" type="text" ng-model="ctrl.current.jsonData.logAnalyticsClientId"
+      <input class="gf-form-input width-30 gf-form-input--has-help-icon" type="text" ng-model="ctrl.current.jsonData.logAnalyticsClientId"
         placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"></input>
       <info-popover mode="right-absolute">
         <p>In the Azure Portal, navigate to Azure Active Directory -> App Registrations -> Choose your app ->
@@ -121,7 +121,7 @@
   <div class="gf-form-inline" ng-if="!ctrl.current.secureJsonFields.logAnalyticsClientSecret">
     <div class="gf-form">
       <span class="gf-form-label width-9">Client Secret</span>
-      <input class="gf-form-input width-30" type="text" ng-model="ctrl.current.secureJsonData.logAnalyticsClientSecret"
+      <input class="gf-form-input width-30 gf-form-input--has-help-icon" type="text" ng-model="ctrl.current.secureJsonData.logAnalyticsClientSecret"
         placeholder="" />
       <info-popover mode="right-absolute">
         <p>To create a new key, log in to Azure Portal, navigate to Azure Active Directory -> App Registrations ->
@@ -168,7 +168,7 @@
   <div class="gf-form-inline" ng-if="!ctrl.current.secureJsonFields.appInsightsApiKey">
     <div class="gf-form">
       <span class="gf-form-label width-9">API Key</span>
-      <input class="gf-form-input width-30" type="text" ng-model="ctrl.current.secureJsonData.appInsightsApiKey"
+      <input class="gf-form-input width-30 gf-form-input--has-help-icon" type="text" ng-model="ctrl.current.secureJsonData.appInsightsApiKey"
         placeholder="" />
       <info-popover mode="right-absolute">
         <p>Section 2 of the Quickstart guide shows where to find/create the API Key:</p>
@@ -185,7 +185,7 @@
   <div class="gf-form-inline">
     <div class="gf-form">
       <span class="gf-form-label width-9">Application Id</span>
-      <input class="gf-form-input width-30" type="text" ng-model="ctrl.current.jsonData.appInsightsAppId" placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"></input>
+      <input class="gf-form-input width-30 gf-form-input--has-help-icon" type="text" ng-model="ctrl.current.jsonData.appInsightsAppId" placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"></input>
       <info-popover mode="right-absolute">
         <p>Section 2 of the Quickstart guide shows where to find the Application ID:</p>
         <a target="_blank" href="https://dev.applicationinsights.io/quickstart/">**Click here to open the Application

public/app/plugins/datasource/influxdb/partials/config.html

@@ -41,7 +41,7 @@
 	<div class="gf-form-inline">
 		<div class="gf-form">
 			<span class="gf-form-label">Min time interval</span>
-			<input type="text" class="gf-form-input width-6" ng-model="ctrl.current.jsonData.timeInterval" spellcheck='false' placeholder="10s"></input>
+			<input type="text" class="gf-form-input width-6 gf-form-input--has-help-icon" ng-model="ctrl.current.jsonData.timeInterval" spellcheck='false' placeholder="10s"></input>
 			<info-popover mode="right-absolute">
 				A lower limit for the auto group by time interval. Recommended to be set to write frequency,
 				for example <code>1m</code> if your data is written every minute.

public/app/plugins/datasource/loki/partials/config.html

@@ -5,7 +5,7 @@
   <div class="gf-form-inline">
     <div class="gf-form">
       <span class="gf-form-label width-8">Maximum lines</span>
-      <input type="text" class="gf-form-input width-8" ng-model="ctrl.current.jsonData.maxLines" spellcheck='false' placeholder="1000"></input>
+      <input type="text" class="gf-form-input width-8 gf-form-input--has-help-icon" ng-model="ctrl.current.jsonData.maxLines" spellcheck='false' placeholder="1000"></input>
       <info-popover mode="right-absolute">
         Loki queries must contain a limit of the maximum number of lines returned (default: 1000).
         Increase this limit to have a bigger result set for ad-hoc analysis.

public/app/plugins/datasource/mssql/partials/config.html

@@ -50,7 +50,7 @@
 <div class="gf-form-group">
 	<div class="gf-form max-width-15">
 		<span class="gf-form-label width-7">Max open</span>
-		<input type="number" min="0" class="gf-form-input" ng-model="ctrl.current.jsonData.maxOpenConns" placeholder="unlimited"></input>
+		<input type="number" min="0" class="gf-form-input gf-form-input--has-help-icon" ng-model="ctrl.current.jsonData.maxOpenConns" placeholder="unlimited"></input>
 		<info-popover mode="right-absolute">
 			The maximum number of open connections to the database. If <i>Max idle connections</i> is greater than 0 and the
 			<i>Max open connections</i> is less than <i>Max idle connections</i>, then <i>Max idle connections</i> will be
@@ -60,7 +60,7 @@
 	</div>
 	<div class="gf-form max-width-15">
 		<span class="gf-form-label width-7">Max idle</span>
-		<input type="number" min="0" class="gf-form-input" ng-model="ctrl.current.jsonData.maxIdleConns" placeholder="2"></input>
+		<input type="number" min="0" class="gf-form-input gf-form-input--has-help-icon" ng-model="ctrl.current.jsonData.maxIdleConns" placeholder="2"></input>
 		<info-popover mode="right-absolute">
 			The maximum number of connections in the idle connection pool. If <i>Max open connections</i> is greater than 0 but
 			less than the <i>Max idle connections</i>, then the <i>Max idle connections</i> will be reduced to match the
@@ -69,7 +69,7 @@
 	</div>
 	<div class="gf-form max-width-15">
 		<span class="gf-form-label width-7">Max lifetime</span>
-		<input type="number" min="0" class="gf-form-input" ng-model="ctrl.current.jsonData.connMaxLifetime" placeholder="14400"></input>
+		<input type="number" min="0" class="gf-form-input gf-form-input--has-help-icon" ng-model="ctrl.current.jsonData.connMaxLifetime" placeholder="14400"></input>
 		<info-popover mode="right-absolute">
 			The maximum amount of time in seconds a connection may be reused. If set to 0, connections are reused forever.
 		</info-popover>
@@ -82,7 +82,7 @@
 	<div class="gf-form-inline">
 		<div class="gf-form">
 			<span class="gf-form-label width-9">Min time interval</span>
-			<input type="text" class="gf-form-input width-6" ng-model="ctrl.current.jsonData.timeInterval" spellcheck='false' placeholder="1m"></input>
+			<input type="text" class="gf-form-input width-6 gf-form-input--has-help-icon" ng-model="ctrl.current.jsonData.timeInterval" spellcheck='false' placeholder="1m"></input>
 			<info-popover mode="right-absolute">
 				A lower limit for the auto group by time interval. Recommended to be set to write frequency,
 				for example <code>1m</code> if your data is written every minute.

public/app/plugins/datasource/mysql/partials/config.html

@@ -44,7 +44,7 @@
 <div class="gf-form-group">
 	<div class="gf-form max-width-15">
 		<span class="gf-form-label width-7">Max open</span>
-		<input type="number" min="0" class="gf-form-input" ng-model="ctrl.current.jsonData.maxOpenConns" placeholder="unlimited"></input>
+		<input type="number" min="0" class="gf-form-input gf-form-input--has-help-icon" ng-model="ctrl.current.jsonData.maxOpenConns" placeholder="unlimited"></input>
 		<info-popover mode="right-absolute">
 			The maximum number of open connections to the database. If <i>Max idle connections</i> is greater than 0 and the
 			<i>Max open connections</i> is less than <i>Max idle connections</i>, then <i>Max idle connections</i> will be
@@ -54,7 +54,7 @@
 	</div>
 	<div class="gf-form max-width-15">
 		<span class="gf-form-label width-7">Max idle</span>
-		<input type="number" min="0" class="gf-form-input" ng-model="ctrl.current.jsonData.maxIdleConns" placeholder="2"></input>
+		<input type="number" min="0" class="gf-form-input gf-form-input--has-help-icon" ng-model="ctrl.current.jsonData.maxIdleConns" placeholder="2"></input>
 		<info-popover mode="right-absolute">
 			The maximum number of connections in the idle connection pool. If <i>Max open connections</i> is greater than 0 but
 			less than the <i>Max idle connections</i>, then the <i>Max idle connections</i> will be reduced to match the
@@ -63,7 +63,7 @@
 	</div>
 	<div class="gf-form max-width-15">
 		<span class="gf-form-label width-7">Max lifetime</span>
-		<input type="number" min="0" class="gf-form-input" ng-model="ctrl.current.jsonData.connMaxLifetime" placeholder="14400"></input>
+		<input type="number" min="0" class="gf-form-input gf-form-input--has-help-icon" ng-model="ctrl.current.jsonData.connMaxLifetime" placeholder="14400"></input>
 		<info-popover mode="right-absolute">
 			The maximum amount of time in seconds a connection may be reused. If set to 0, connections are reused forever.<br/><br/>
 			This should always be lower than configured <a href="https://dev.mysql.com/doc/refman/8.0/en/server-system-variables.html#sysvar_wait_timeout" target="_blank">wait_timeout</a> in MySQL.
@@ -77,7 +77,7 @@
 	<div class="gf-form-inline">
 		<div class="gf-form">
 			<span class="gf-form-label width-9">Min time interval</span>
-			<input type="text" class="gf-form-input width-6" ng-model="ctrl.current.jsonData.timeInterval" spellcheck='false' placeholder="1m"></input>
+			<input type="text" class="gf-form-input width-6 gf-form-input--has-help-icon" ng-model="ctrl.current.jsonData.timeInterval" spellcheck='false' placeholder="1m"></input>
 			<info-popover mode="right-absolute">
 				A lower limit for the auto group by time interval. Recommended to be set to write frequency,
 				for example <code>1m</code> if your data is written every minute.

public/app/plugins/datasource/opentsdb/partials/query.editor.html

@@ -49,7 +49,7 @@
 	<div class="gf-form-inline">
 		<div class="gf-form max-width-25">
 			<label class="gf-form-label query-keyword width-8">Down sample</label>
-			<input type="text" class="gf-form-input"
+			<input type="text" class="gf-form-input gf-form-input--has-help-icon"
 						 ng-model="ctrl.target.downsampleInterval"
 						 ng-model-onblur
 			       ng-change="ctrl.targetBlur()"
@@ -139,7 +139,7 @@
 			</div>
 
       <gf-form-switch class="gf-form"
-                    label="Group by" 
+                    label="Group by"
                     label-class="query-keyword"
                     checked="ctrl.target.currentFilterGroupBy"
                     on-change="ctrl.targetBlur()">

public/app/plugins/datasource/postgres/partials/config.html

@@ -43,7 +43,7 @@
 <div class="gf-form-group">
 	<div class="gf-form max-width-15">
 		<span class="gf-form-label width-7">Max open</span>
-		<input type="number" min="0" class="gf-form-input" ng-model="ctrl.current.jsonData.maxOpenConns" placeholder="unlimited"></input>
+		<input type="number" min="0" class="gf-form-input gf-form-input--has-help-icon" ng-model="ctrl.current.jsonData.maxOpenConns" placeholder="unlimited"></input>
 		<info-popover mode="right-absolute">
 			The maximum number of open connections to the database. If <i>Max idle connections</i> is greater than 0 and the
 			<i>Max open connections</i> is less than <i>Max idle connections</i>, then <i>Max idle connections</i> will be
@@ -53,7 +53,7 @@
 	</div>
 	<div class="gf-form max-width-15">
 		<span class="gf-form-label width-7">Max idle</span>
-		<input type="number" min="0" class="gf-form-input" ng-model="ctrl.current.jsonData.maxIdleConns" placeholder="2"></input>
+		<input type="number" min="0" class="gf-form-input gf-form-input--has-help-icon" ng-model="ctrl.current.jsonData.maxIdleConns" placeholder="2"></input>
 		<info-popover mode="right-absolute">
 			The maximum number of connections in the idle connection pool. If <i>Max open connections</i> is greater than 0 but
 			less than the <i>Max idle connections</i>, then the <i>Max idle connections</i> will be reduced to match the
@@ -62,7 +62,7 @@
 	</div>
 	<div class="gf-form max-width-15">
 		<span class="gf-form-label width-7">Max lifetime</span>
-		<input type="number" min="0" class="gf-form-input" ng-model="ctrl.current.jsonData.connMaxLifetime" placeholder="14400"></input>
+		<input type="number" min="0" class="gf-form-input gf-form-input--has-help-icon" ng-model="ctrl.current.jsonData.connMaxLifetime" placeholder="14400"></input>
 		<info-popover mode="right-absolute">
 			The maximum amount of time in seconds a connection may be reused. If set to 0, connections are reused forever.
 		</info-popover>
@@ -95,7 +95,7 @@
 	<div class="gf-form-inline">
 		<div class="gf-form">
 			<span class="gf-form-label width-9">Min time interval</span>
-			<input type="text" class="gf-form-input width-6" ng-model="ctrl.current.jsonData.timeInterval" spellcheck='false' placeholder="1m"></input>
+			<input type="text" class="gf-form-input width-6 gf-form-input--has-help-icon" ng-model="ctrl.current.jsonData.timeInterval" spellcheck='false' placeholder="1m"></input>
 			<info-popover mode="right-absolute">
 				A lower limit for the auto group by time interval. Recommended to be set to write frequency,
 				for example <code>1m</code> if your data is written every minute.

public/app/plugins/datasource/prometheus/partials/config.html

@@ -5,7 +5,7 @@
   <div class="gf-form-inline">
     <div class="gf-form">
       <span class="gf-form-label width-8">Scrape interval</span>
-      <input type="text" class="gf-form-input width-8" ng-model="ctrl.current.jsonData.timeInterval" spellcheck='false' placeholder="15s"></input>
+      <input type="text" class="gf-form-input width-8 gf-form-input--has-help-icon" ng-model="ctrl.current.jsonData.timeInterval" spellcheck='false' placeholder="15s"></input>
       <info-popover mode="right-absolute">
         Set this to your global scrape interval defined in your Prometheus config file. This will be used as a lower limit for the
         Prometheus step query parameter.
@@ -16,7 +16,7 @@
   <div class="gf-form-inline">
     <div class="gf-form">
       <span class="gf-form-label width-8">Query timeout</span>
-      <input type="text" class="gf-form-input width-8" ng-model="ctrl.current.jsonData.queryTimeout" spellcheck='false' placeholder="60s"></input>
+      <input type="text" class="gf-form-input width-8 gf-form-input--has-help-icon" ng-model="ctrl.current.jsonData.queryTimeout" spellcheck='false' placeholder="60s"></input>
       <info-popover mode="right-absolute">
         Set the Prometheus query timeout.
       </info-popover>

public/app/plugins/datasource/prometheus/partials/query.editor.html

@@ -10,7 +10,7 @@
   <div class="gf-form-inline">
     <div class="gf-form">
       <label class="gf-form-label">Legend</label>
-      <input type="text" class="gf-form-input" ng-model="ctrl.target.legendFormat" spellcheck='false' placeholder="legend format"
+      <input type="text" class="gf-form-input gf-form-input--has-help-icon" ng-model="ctrl.target.legendFormat" spellcheck='false' placeholder="legend format"
         data-min-length=0 data-items=1000 ng-model-onblur ng-change="ctrl.refreshMetricData()">
       </input>
       <info-popover mode="right-absolute">
@@ -21,7 +21,7 @@
 
     <div class="gf-form">
       <label class="gf-form-label width-6">Min step</label>
-      <input type="text" class="gf-form-input width-8" ng-model="ctrl.target.interval" data-placement="right" spellcheck='false'
+      <input type="text" class="gf-form-input width-8 gf-form-input--has-help-icon" ng-model="ctrl.target.interval" data-placement="right" spellcheck='false'
         placeholder="{{ctrl.panelCtrl.interval}}" data-min-length=0 data-items=100 ng-model-onblur ng-change="ctrl.refreshMetricData()"
       />
       <info-popover mode="right-absolute">

public/sass/components/_gf-form.scss

@@ -250,6 +250,10 @@ $input-border: 1px solid $input-border-color;
   &--plaintext {
     white-space: unset;
   }
+
+  &--has-help-icon {
+    padding-right: $input-padding-x * 3;
+  }
 }
 
 .gf-form-hint {

public/sass/components/_tagsinput.scss

@@ -15,6 +15,10 @@
     height: 100%;
     width: 5rem;
     box-sizing: border-box;
+
+    &.gf-form-input--has-help-icon {
+      padding-right: $input-padding-x * 3;
+    }
   }
 
   .tag {