JavaScript fix for stacked gear icons?

Problem/Motivation

When using the Panels module within Drupal, I often end up with multiple gear icons stacked on top of each other, inaccessible to the Drupal admin.

For example, take a Panels page with this structure:

1. MyCustomContentPaneTop
2. A Drupal View
3. MyCustomContentPaneBottom

When logged in as a Drupal admin, I can access the gear icon for MyCustomContentPaneBottom easily.

However, when I try to edit MyCustomContentPaneTop, I can only see an "Edit Panel" gear icon, and the content icon seems to live in a z-index below the panel's gear icon.

Proposed resolution

Would the Panels maintainers consider a JavaScript (jQuery) solution like the following?

jQuery(function($) {
  // Declare Arrays
  left_array = new Array();
  top_array = new Array();
    
  // Get all the contexual link containers and iterate through them
  $('.contextual-links-wrapper').each(function(index){
    var this_left = $(this).offset().left;  // Set a convenience variable for the x-coord of the gear
    var this_top = $(this).offset().top;    // Set a convenience variable for the y-coord of the gear
    
    // If a previous link container had identical x&y coords, add 50 pixels to the current container y-coord
    if($.inArray(this_left,left_array) > -1 && $.inArray(this_top,top_array) > -1) { 
      this_top += 50;
      $(this).offset({top: this_top});
    }      
    
    left_array.push(this_left);  // Add the current container x-coord to the list of containers
    top_array.push(this_top);    // Add the current container y-coord to the list of containers
  });
});

I originally asked this question on Stack Exchange, but someone said I should post to the issue queue on D.O.