network interfaces view hides copy button

[si458]

Describe the bug
when you click the interfaces option it shows the network interfaces and all its IP addresses
but when you scroll or hover over the copy buttons,
the stupid scroll bar is blocking access to them

To Reproduce

1. click interfaces
2. hover over a copy icon

Expected behavior
able to click the copy button, without the scrollbar intefering

Screenshots

Server Software (please complete the following information):

• OS: [e.g. Ubuntu] Alpine
• Virtualization: [e.g. Docker] Docker
• Network: [e.g. LAN/WAN, reverse proxy, cloudflare, ssl offload, etc...] WAN, Traefik Proxy, TLS Offload
• Version: [e.g. 1.0.43] 1.0.53
• Node: [e.g. 18.4.0] 18.5.0
• Browser: [e.g. Google Chrome] Firefox 102

Remote Device (please complete the following information):

• Device: [e.g. Laptop] Server
• OS: [e.g. Windows 10] Windows Server 2012 R2
• Version: [e.g. 21H2] N/A
• Current Core Version (if known): [HINT: Go to a device then console Tab then type info]

Additional context
i could copy the information from the details tab instead but the is no copy icons on the details tab

Your config.json file
N/A

[Ylianst]

Interesting, I don't see this on my browsers with my OS... Edge:

FireFox:

Chrome:

This must be an OS thing with the type of Scroll bar used.

[si458]

@Ylianst yeh just tried it here and its fine with Edge and Chrome, but not Firefox (my primary browser)

[PetieM]

I'm seeing this in all browsers on my Mac. It's related to scroll bar rendering - I have it set to show them only when scrolling which overlays them on the content when you scroll as in si458's screenshots (though for me at least, the buttons become clickable if you just wait for the scroll bar to fade first). If I set it to always show scroll bars, they behave as shown in Ylianst's screenshots.

[Ylianst]

Ok, I am seeing this issue on FireFox with Windows 11.

Let me see what I can do.

[Ylianst]

Not sure what I can do about this. If I change the Windows 11 setting to "Always Show Scrollbars", it works ok in FireFox, but I am not sure I have a way in HTML to override this when scroll bars are not shown. I could make an alternative way to copy the value, like a right click context menu?

[PetieM]

That sounds consistent with the behavior I was seeing. Just letting the scroll bar fade away seems to work fine on my end but if you wanted to fix it from the server side, the only way I can think of that would work would be to add right padding equal to the width of the scroll bar which would, in theory, push the buttons out of the path of the bar (at the cost of looking a little odd). Personally, I think it’s fine as is but figured I’d throw in a possible solution for once!

[Ylianst]

Another alternative is to put the "copy" icon left of the text instead of right, but it would not look as nice. I will hold off until @si458 gives some opinion of this.

[si458]

I just realised that In theory is the tab actually needed anymore?

All this information that is listed is actually listed in the Details tab
(with the exception of the last ip change)

If you just add the last ip change into the Details tab and then add some copy buttons to the Details tab

You can remove the network interfaces option!?

[NiceGuyIT]

You could create a UserStyle and add the padding using an extension like Stylus. The red color is to see the padding.

/* ==UserStyle==
@name           MeshCentral
@namespace      https://github.com/Ylianst/MeshCentral
@version        1.0.0
@description    MeshCentral UI changes
@author         You
==/UserStyle== */

@-moz-document domain("mesh.example.com") {
    #d2netinfo .dialogText {
        padding-right: 1.0em;
        background-color: red;
    }
}