V6 - Tabs not clickable on mobile

[Magicalname]

Debug mode

• [X] I have enabled debug mode
• [X] I have read checked the Common Issues page

Describe the bug

If you view the Details of an Asset,

On Mobile (Iphone X) the Tabs on the Top are not clickable. Or better they are clickable but not non click on the Icon, only if you click the very top of the icon.

Ist there any Way to fix this...old Threds in this case are autoclosed :(

Reproduction steps

1.Login 2.Go To Assets 3.View Details of an Asset 4.Try to click the Buttons above

Expected behavior

It should be possible to click cleanly through the tabs on any mobile device.

Screenshots

These Tabs are the problem

Just In This Area the buttons are clickable, only at the very Top of the Icon

If the Icons are in the 2nd line they are not clickable, also when you select a button in the second line and want go back to a tab in the first line the first line is also not clickable

The Error Info which appers has no exit button and is overlaying all the buttons

Snipe-IT Version

Tested in 5.4.1 and also in V6 RC7

Operating System

Debian 10

Web Server

Apache

PHP Version

7.3 and 7.4

Operating System

No response

Browser

No response

Version

No response

Device

No response

Operating System

No response

Browser

No response

Version

No response

Error messages

No response

Additional context

No response

[welcome[bot]]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[snipe]

We will likely not be fixing this for v5, since v6 is on the way and the UI code is very different.

[Magicalname]

I tested the Wohle thing in RC7 the problem still persists...this will only be fixed in a later RC?

[snipe]

I haven’t been able to reproduce this on v6, but I’ll check into it.

[Magicalname]

i attached some more screenshots to describe the problem a little better, if you have any questions let me know

[snipe]

Thanks! That will definitely help.

[Duberry]

Just confirming the bug.

Snipe-IT versionv6.0.7 build 8351 (gacc2e12f1)

It works with a responsive window, but not on a mobile device or in the browser when emulating a mobile device. I suspect javascript touch sensing.

[Duberry]

The issue occurs below the 400px breakpoint.

The interface appears to be throwing the element with the tab-content class over the nav-tabs. Nav-tabs can be seen, but they cannot be clicked. Did a quick-and-dirty remove of the tab-content element in inspector and the nav-tabs can then be selected.

Above the 400px breakpoint the tabs it works fine.

[ugurveturan]

for earlier versions than 6, you can write custom CSS to the settings. This worked for us.

@media (max-width: 400px) { .navbar-left { margin: 2px; }

  .nav::after {
    clear: right !important;
  }
}

[MoralCode]

Can confirm this is happening to me as well when trying to click on the "Maintainences" tab (samsung S10E/android, with firefox as the browser)

some remote debugging seems to suggest that the tab-content div seems to be overflowing and sitting on top of the navigation, causing this behavior: