Advaced forum area going off-page in firefox browser?

Question

I have installed advanced forum and facing the weird issue. When I hover on the configuration button gear the area covered by it shows off-page as in the image(dotted line which automatically shows in drupal modules). I did check on two sites, in case my one site has the css issue. And due to this in my one site the page border of the main-content page sifting all the way to left. You can see the dotted line in the image. For the complete views I have zoom out the browser and you can see the how entire layout gets sifted in the second image.

Edit-2:

I have created the sandbox link with a Username: admin and password: admin. If you hover on the configuration gear of the views forum tab, it shows dotted line, but the left side dotted line has no end (off the page). Why this issue matters because when I create the page-border, page border also gets off-page along with that. This happens with Firefox browser only as described in the Edit-1.

Edit-1:

I did check in all browsers, and this is happening in Firefox browser only. My current browser is 45.0.1 which is the latest one. I did check in chrome and safari also, but there is no issue.

Answer 1

The issue that a contextual link is causing your page to break. Please note that this issue only occurs for users that have permissions to modify panels, so your end users (visitors) should not see this.

The solution could be to disable the contextual link on the panel. Or disable the contextual links module entirely (what would remove the gear icon everywhere).

To disable contextual links only on some pages you might want to look at this question for how to disable a specific link: Is it possible to remove the contextual link for deleting a node?

Or you could try the Hide Contextual Links module.

UPDATE:

The main cause of this issue is a firefox bug, where outlines are drawn around descendant elements: https://bugzilla.mozilla.org/show_bug.cgi?id=687311

You can see it asked here on stackoverflow: https://stackoverflow.com/questions/10662902/css-outline-different-behavior-behavior-on-webkit-gecko, where the recommended action is to replace the outline with a box-shadow (no dashes), or the alternative to append overflow: hidden to the element. I tried with overflow: hidden and that worked so I'd try that first to keep the dashed line.

In Drupal, in you theme's css add:

.contextual-links-region-active {
  /* Override the old outline */
  outline: none !important; 

  box-shadow: 0px 0px 0px 1px #FFF;
  /* OR */
  overflow: hidden;
}

But once again, this is a firefox bug that is likely to influence only administrators who have permissions to modify panels (I have no idea about the company you are building this for, but that cannot be many users). So ask yourself if it is worth putting effort into this.

UPDATE-2: by@codenext,

As @Neograph734 has provided the very nice research on this issue in above UPDATE(basically it is FIREFOX BUG). Please follow the following comments and question details to understand the issue. I am just providing the final solution as final solution is just the extension of this answer.

SOLUTION: The main issue is, the outline(left part) of the contextual-link-region goes off the page as shown in the second image above(a dashed line area), and along with that it takes the page-border/outline css off the page too. Hence we can put the overflow:hidden; in the #page/#content-column selector(as in my case, I have put border: and outline: css in these selectors) instead of putting it in .contextual-links-region. Hence, this way you can prevent the displacement of page-border and outline which caused the .contextua-links-region(originally the firefox bug).