Fix mobile navbar and misc cleanups (#25134)

- Fix and improve mobile navbar layout
- Apply all cleanups suggested in
https://github.com/go-gitea/gitea/pull/25111
- Make media query breakpoints match Fomantic's exactly
- Clean up whitespace in class on navbar items

Mobile navbar before and after:
<img width="745" alt="Screenshot 2023-06-08 at 08 40 56"
src="ca84b239-b10f-41db-8c06-dcf2b6dd9d28">
<img width="739" alt="Screenshot 2023-06-08 at 08 41 23"
src="09133c54-eb7e-4110-858c-ead23c3b7521">

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: Giteabot <teabot@gitea.io>

web_src/js/modules/tippy.js

@@ -27,7 +27,8 @@ export function createTippy(target, opts = {}) {
       visibleInstances.add(instance);
     },
     arrow: `<svg width="16" height="7"><path d="m0 7 8-7 8 7Z" class="tippy-svg-arrow-outer"/><path d="m0 8 8-7 8 7Z" class="tippy-svg-arrow-inner"/></svg>`,
-    ...(opts?.role && {theme: opts.role}),
+    role: 'menu', // HTML role attribute, only tooltips should use "tooltip"
+    theme: opts.role || 'menu', // CSS theme, we support either "tooltip" or "menu"
     ...opts,
   });
 
@@ -68,6 +69,7 @@ function attachTooltip(target, content = null) {
     content,
     delay: 100,
     role: 'tooltip',
+    theme: 'tooltip',
     hideOnClick,
     placement: target.getAttribute('data-tooltip-placement') || 'top-start',
     ...(target.getAttribute('data-tooltip-interactive') === 'true' ? {interactive: true, aria: {content: 'describedby', expanded: false}} : {}),