Feature/user interface cleanups

[Jixabon]

In this PR is a handful of visual clean ups of the UI.

• Rework Navbar for breakpoints and mobile
• Prevent wrap of Nav Tabs and make horizontal scroll instead (hide scrollbar visually for better look)
• Wrap buttons for mobile gracefully with horizontal and vertical spacing
• Vertically center items in page card headers with status indicators
• Stack footer text on small screens
• Fix page tabs hash management (set hash on click and navigate to tab content when page loaded with hash)
• Improve UX for DHCP page when saving an interface settings should bring page back to saved interface otherwise default to ap interface
• Rework DHCP/Static IP toggle on DHCP page

Changes needed for Insiders repo

Noticed that the sidebar open/closed state was persisted across pages. I'd suggest leaving that commented out.

all.css - Change values to the following
...
.topbar-avatar {
  width: 38.4px!important;
  height: 38.4px!important;
}
...

functions.php - make span classes match
...
$avatar = '<span class="text-muted small">' . $userId . '</span>';
...

The following files need the following change

• /templates/networking/devices.php
• /templates/networking/wlanrouting.php
• /templates/admin/general.php
• /plugins-available/Captive/templates/main.php
• /plugins-available/Tailscale/templates/main.php
• /plugins-available/Wireshark/templates/main.php

...
<div class="d-flex flex-wrap gap-2">
  <?php echo $buttons ?>
</div>
...

[billz]

@Jixabon you are on 🔥!

[Jixabon]

Dont merge yet! haha few more things coming

[Jixabon]

Okay that'll be all for now!

[billz]

Nice work! These UI fixes have needed attention for a long time. The toggle on the DHCP panel is much improved. The button wrapping fix also looks great.

A couple of observations:

1. The active tabs display a horizontal line beneath them, while the standard bootstrap tabs don't exhibit this. Probably a small style tweak?

2. This PR can probably be cleanly applied as a patch in a separate PR to the Insiders repo.

3. Good catch re: plugins. These changes can be applied in a separate PR to the plugins repo(s).

[Jixabon]

Thank you! I'll look into putting in PRs for the insiders repo. As for the horizontal tabs, I'm not sure. It was not necessarily intentional. I'll do some digging as to why that's the case. Could also be a slight difference between the default bootstrap and the bootstrap template (sb-admin) it seems the project is using.

[Jixabon]

Looks like the overflow-x: auto was messing up the negative bottom margin for the tabs. Went a different route. Should be back to normal now. Not sure what might need to be applied to insiders at the moment.

[billz]

Tested with the latest commits, looks good. Nice work