ux: Fix color picker positioning when scrolled down to the bottom of a page (#10258) (#10271)

public/app/core/services/popover_srv.ts

@@ -57,7 +57,7 @@ function popoverSrv($compile, $rootScope, $timeout) {
         openOn: options.openOn,
         openOn: options.openOn,
         hoverCloseDelay: 200,
         hoverCloseDelay: 200,
         tetherOptions: {
         tetherOptions: {
-          constraints: [{to: 'scrollParent', attachment: "none both"}]
+          constraints: [{to: 'scrollParent', attachment: 'together'}]
         }
         }
       });
       });
 
 
@@ -79,3 +79,4 @@ function popoverSrv($compile, $rootScope, $timeout) {
 }
 }
 
 
 coreModule.service('popoverSrv', popoverSrv);
 coreModule.service('popoverSrv', popoverSrv);
+

public/app/plugins/panel/graph/legend.ts

@@ -53,7 +53,8 @@ module.directive('graphLegend', function(popoverSrv, $timeout) {
         $timeout(function() {
         $timeout(function() {
           popoverSrv.show({
           popoverSrv.show({
             element: el[0],
             element: el[0],
-            position: 'bottom center',
+            position: 'bottom left',
+            targetAttachment: 'top left',
             template: '<series-color-picker series="series" onToggleAxis="toggleAxis" onColorChange="colorSelected">' +
             template: '<series-color-picker series="series" onToggleAxis="toggleAxis" onColorChange="colorSelected">' +
               '</series-color-picker>',
               '</series-color-picker>',
             openOn: 'hover',
             openOn: 'hover',