Improve responsive UI shell behavior

[sametcn99]

Summary

Improve the UI shell so navigation, connection errors, and scroll controls behave predictably across desktop, tablet, and mobile viewports.

The previous responsive layout allowed the permanent drawer to overlap main content at tablet widths, the temporary drawer required a dedicated close button, long connection errors could disturb header/content placement, and the scroll-to-top button could remain visible after returning to the top of the page.

Changes

Responsive navigation layout

• Keep the permanent navigation drawer fixed and give its list an independent scroll area.
• Reserve the drawer's 250px width for the main content at sm and larger breakpoints, preventing navigation from overlaying the page at tablet and desktop widths.
• Keep the full-width main-content layout on mobile, where the temporary drawer is used instead.
• Move primary route actions and account actions into the mobile drawer so the header stays compact at small widths.
• Add accessible labels and tooltips to compact header controls.

Mobile drawer interactions

• Remove the dedicated close icon from the temporary drawer.
• Close the drawer when users tap the backdrop, press Escape, press the menu button again, navigate to a route, open settings, sign out, or enable browser notifications.
• Maintain drawer list scrolling without moving the surrounding page.

Connection error layout

• Make the connection-error banner wrap safely on narrow screens.
• Apply banner-aware offsets to the header, drawer, and main content so a failed backend connection does not overlap or shift the shell inconsistently.

Scroll-to-top behavior

• Recalculate scroll-button visibility from the current window scroll position on mount and every scroll event.
• Ensure the button becomes hidden again after the user returns above the visibility threshold.

TypeScript configuration

• Include the Vite environment declaration in the TypeScript project so Vite runtime typings are available during builds.

Validation

• yarn --cwd ui lint
• yarn --cwd ui build

Both commands complete successfully. The production build still reports the existing MUI barrel-module and bundle-size warnings.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 74.53%. Comparing base (c27a381) to head (f0c163b).

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #1024   +/-   ##
=======================================
  Coverage   74.53%   74.53%           
=======================================
  Files          66       66           
  Lines        3483     3483           
=======================================
  Hits         2596     2596           
  Misses        688      688           
  Partials      199      199           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[sametcn99]

@jmattheis can you review the pr

[jmattheis]

Yeah, sorry for the delay, have still quite a big list of notifications to work through.

I'd prefer something like this, with the change from #1041 the profile button now opens a drop down with "Settings" and "Logout".

The hamburger menu should display the drawer as it's currently on master, with "All messages", the filtering of messages by application, and the "Enable Notification" button.

The Profile drop down should include everything else "Users", "Applications", "clients", "plugins", "settings", "logout"

[sametcn99]

Got it, thanks for the clarification. I’ll wait for #1041 to be merged, then update my branch on top of the latest master and adjust the navigation accordingly. If #1041 ends up addressing the responsive issues this PR was meant to fix as well, I can also close this PR if it’s no longer needed.