Legend for Live Traffic is Buggy

Update:

Concerning Item (2) above, we were able to identify the issue and come up with a fix.

The “break” occurs when the legend box goes into “sticky” mode. Upon inspecting the legend box, we noticed the width and height of the element changes from “auto” to a predetermined value in sticky mode.

So to fix the “break”, perform the following:

(1) Open the file: /wp-content/plugins/wordfence/css/main.1629122067.css
(2) Search for the term: “#wf-live-traffic-legend”
(3) Change the width from “320px” to “auto!important”
(4) Change the height from “17px” to “auto!important”

Hoping Team Wordfence will agree with the above and incorporate the above fix at earliest opportunity.

Cheers!

Hi @jetxpert, thanks for your observations about the live traffic legend and I’m really pleased to hear you’re enjoying Wordfence.

As we support a large number of WordPress use-cases in terms of device size, browser versions and server configurations, I am not ruling out the fixed size being a result of testing on smaller screen sizes with an older browser where auto may have posed problems. However, we do have internal channels to discuss features and bugs so I’ll submit this now and see what the development team think.

We can’t comment on delivery times on the forums, but when I get feedback I will let you know here.

Thanks,

Peter.

@wfpeter,

Thanks for the quick reply and assistance.

To help you further and based on your comment, we looked into this a bit more and learned the following:

At 1330 pixels or above, the legend is displayed. Below 1330 pixels, the legend is hidden and all entries displayed in the Live Traffic dashboard are automatically opened.

In short, the fix we provided will not negatively impact old browsers nor small devices.

Would be great if you guys can fix this. This is probably an “old CSS carryover” that needs to be cleaned up.

If we’re wrong, please provide more details.

Thank you!

——————-

At 1330 Pixels (or above):

At 1329 Pixels (or below):

Hi @jetxpert,

Thanks for your extra feedback, I have passed it on to the development team. We will be working on an upcoming redesign of Live Traffic and will keep this in mind.

We’ve only previously seen the legend wrap incorrectly when the text size is scaled by the browser’s settings. That may not be the case here, though.

The Wordfence SVG icon appears to be missing next to the tabs. Is it possible that your server isn’t registering SVGs or our choice of Roboto as font? If the font isn’t loading, even though it looks similar to the default, the spacing difference might contribute to this issue.

If either of those observations are incorrect, it’s just to help me get a better understanding of the overall picture so let me know.

Peter.

Hi @wfpeter,

Thank you for your input. We look forward to your redesign of the Live Traffic module – including the legend.

Good point on the browser settings! The issue we identified, however, happens using Chrome and Opera at a Zoom Level of 100%. With so many browsers in the market, constant updates, and settings offerings, we would not be surprised if your developers previously considered this condition as isolated.

Concerning the logo, must say you have a very keen eye for details. Eagle vision! We inspected the tab area and, yes, it appears the image “wordfence-logo.svg” is used in both the tab area and for the admin menu.

When we changed the logo (temporarily) as described in this forum post, it was not picked up by the tab area. The reason, most likely, is because our SVG coverter did not carryover the Base64 code from Wordfence’s original logo.

So, we “repaired” what we did and the logo is back ?? (see below)

Hope this helps a bit. Thank you so much for your support!

Cheers!

Update:

We can confirm that the above is caused by the CSS code contained in this file:

/wp-content/plugins/wordfence/css/main.1629122067.css

For example, within the above file, the following CSS codes were found:

@media (max-width: 1330px){.wf-live-traffic-show-expanded{display:none}}

@media (max-width: 1330px){#wf-live-traffic-legend{display:none}}

@media (max-width: 1330px){#wf-live-traffic .wf-summary-row{display:none}#wf-live-traffic .wf-live-traffic-activity-detail h2{display:none}#wf-live-traffic .wf-striped-table thead{display:none}#wf-live-traffic .wf-details-hidden .wf-live-traffic-details{padding:0.8rem 0.6rem}#wf-live-traffic .wf-details-hidden .wf-live-traffic-details{border-top:1px solid #e2e2e2}#wf-live-traffic .wf-details-hidden .wf-live-traffic-activity-detail-wrapper{opacity:1;max-height:300px}#wf-live-traffic-no-group-by .wf-striped-table{table-layout:fixed}}

So, the CSS file needs a revisit and adjustment.

“That’s all, folks!”

Thanks again for the extra digging into the source of this CSS. I have passed on the information to our team, although the Live Traffic redesign work may mean this kind of issue is addressed and tested at that time.

Peter.