Inspect Element (dev tools) broken in responsive mode

[mmj]

Description of the issue:

When doing Inspect Element (developer tools) in responsive mode, the blue overlay for showing what is being inspected, is wrongly placed. I’ve added a screenshot to illustrate.

Steps to Reproduce (add as many as necessary):

Visit any website (https://brave.com will do fine) and View -> Developer -> Inspect Element. Enter responsive mode, and hover an element. The blue box that should illustrate what element it is, is not correctly places.

Expected result: I would expect it to illustrate the right element. Try it out in Chrome for instance.

Reproduces how often: Every time.

Operating System and Brave Version(See the About Brave page in the main menu):

MacOS X 10.14.4, Brave version 0.63.55 Chromium: 74.0.3729.131 (Official Build) (64-bit)

[eljuno]

cc @Mattches @sriram for assistance

[sriram]

Seems to work fine on Linux when browser is in maximized state and set to responsive.
Works same on all channels.

@mmj is the browser set to restore state or maximized state?

cc: @LaurenWags could you try this on macOS?

[LaurenWags]

It worked fine until I started manually messing with the height and width. Then it stopped working.

@mmj did you manually adjust height/width?

Initial try:

After manually adjusting width and height to match screenshot from initial post:

[mmj]

Initially, yes. But once it broke, I couldn’t get it right again.

[LaurenWags]

Hi @mmj

Apologies for the late reply. Looks like there’s an issue logged, I have added a +1 for you: https://github.com/brave/brave-browser/issues/4384

Best,
Lauren

[mmj]

Thanks a bunch Lauren!