Icons on device details page part-covered by left-hand toolbar

[EDIflyer]

Describe the bug
When on the details page for a device the icons down the left are partially covered by the menu bar (See screenshot)

To Reproduce

1. Use MeshCentral in default layout mode
2. Note not an issue if change to menu across the top

Expected behavior
Icons to be shifted to the right so they're not covered by the menu bar

Screenshots

Server Software (please complete the following information):

• OS: Debian
• Virtualization: Docker
• Network: WAN
• Version: 1.1.1
• Node: 18.12.1

Client Device (please complete the following information):

• Device: PC
• OS: Windows 10 or Windows 11
• Network: Remote over WAN
• Browser: Google Chrome
• MeshCentralRouter Version: N/A

Remote Device (please complete the following information):

• Device: PC
• OS: Windows 10 22H2
• Network: Remote over WAN
• Current Core Version (if known): Dec 9 2022, 143332014

Additional context
Nil

Your config.json file
Standard (so have left default below, I only changed server name)

{
  "$schema": "https://raw.githubusercontent.com/Ylianst/MeshCentral/master/meshcentral-config-schema.json",
  "__comment1__": "This is a simple configuration file, all values and sections that start with underscore (_) are ignored. Edit a section and remove the _ in front of the name. Refer to the user's guide for details.",
  "__comment2__": "See node_modules/meshcentral/sample-config-advanced.json for a more advanced example.",
  "settings": {
    "_cert": "myserver.mydomain.com",
    "_WANonly": true,
    "_LANonly": true,
    "_sessionKey": "MyReallySecretPassword1",
    "_port": 443,
    "_aliasPort": 443,
    "_redirPort": 80,
    "_redirAliasPort": 80
  },
  "domains": {
    "": {
      "_title": "MyServer",
      "_title2": "Servername",
      "_minify": true,
      "_newAccounts": true,
      "_userNameIsEmail": true
    }
  },
  "_letsencrypt": {
    "__comment__": "Requires NodeJS 8.x or better, Go to https://letsdebug.net/ first before trying Let's Encrypt.",
    "email": "myemail@mydomain.com",
    "names": "myserver.mydomain.com",
    "production": false
  }
}

[mbsouth]

This isn´t a bug!
This behavior is exactly how it is implemented in source code (HTML).

[EDIflyer]

Doesn't the source code need changed then? I don't understand why you'd want the icons partially covered like this?

[si458]

It's meant to be like that as it's the style

[EDIflyer]

I don't understand though, every other page doesn't have anything 'underneath' the menu apart from this one. Given you can't hide the menu (unless you move it to the top) then why is it overlying the icons like this?

Not covered ✔

Not covered ✔

Not covered ✔

Not covered ✔

Covered ❌

[si458]

I think this is just an OCD thing as it's been like this for years...

If its bugging you submit a PR with the fix and I'm sure @Ylianst will accept it

[EDIflyer]

OK at least it's confirmed that others are seeing it too. I'll try and look at the code and work out how to fix later.

PS note also truncated when menu at the top...

[EDIflyer]

Thanks @si458 🙂

[si458]

i meant to close it as wontfix sorry,
the icons have been this way for years and the is no reason to change them,
you can actually customise them yourself,
i will find docs/link and post back on HOW to do it yourself

[si458]

#5496 (comment) #5496 (comment)
create a folder called meshcentral-web next to meshcentral-data then inside it create public then inside it create images
then inside images, copy all the default images from node_modules/meshcentral/public/images to it, then custom them!
once customised, restart your meshcentral server and away you go!

[EDIflyer]

Ah OK, no problem - as mentioned it just seemed to stick out compared to the other pages but it's not a biggie. If it annoys me more I'll eventually look at customising (although don't have an issue with the icons themselves, just the alignment) but have a few other things keeping me too busy just now anyway. Thanks though 🙂

[si458]

the icons are actually cut off themselves if you check the PNG, i have no idea why @Ylianst did it this way but he did haha
and if you check the website url in the other issue, there example.zip actually replaces those icons for you so you could see how they look!