feat(frontend): implement responsive layout improvements across dashboard

[djdembeck]

Work in Progress

This PR is currently a work in progress and may undergo changes. Please do not merge until marked as ready for review.

Overview

This PR implements comprehensive responsive layout improvements across the frontend dashboard to ensure optimal display across different screen sizes, viewport widths, and sidebar states.

Goals

• Improve responsive behavior for dashboard widgets and layouts
• Ensure proper column sizing for widget grids on various screen widths
• Account for sidebar width variations when calculating breakpoints
• Provide better user experience across mobile, tablet, and desktop viewports

Changes

Dashboard Widget Grid Responsiveness

File: packages/frontend/src/components/dashboard/tabs/LiveTab.tsx

Adjusted grid breakpoints to account for sidebar width (up to 200px when open) and available content area:

• < 1024px: 1 column (full width for mobile/small tablets)
• 1024px+ (lg): 2 columns (~824px content with sidebar open)
• 1280px+ (xl): 3 columns (~1080px content)
• 1536px+ (2xl): 4 columns (~1336px content)

Before: md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 with md:gap-6
After: lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 with lg:gap-5 xl:gap-6

The previous md:grid-cols-2 breakpoint (768px+) caused cramped widgets when the sidebar was open, as the available content width was insufficient for 2 columns.

Testing Checklist

• Grid displays correctly on various viewport widths (320px to 4K)
• Widgets are properly sized with sidebar open and closed
• No content clipping occurs at intermediate breakpoints
• Drag-and-drop functionality works correctly across all sizes
• Layout is usable on mobile devices
• Tables and data display properly on smaller screens

Notes

This change improves the overall responsive behavior of the dashboard by using larger breakpoints (lg, xl, 2xl) instead of md to account for the reduced available width when the sidebar is expanded. The grid now dynamically adjusts column count based on actual available content width rather than just viewport width.

[mcowger]

Before you go too far down with this...

My intent in the short term is to eliminate most of the dashboard graphs altogether, and simply expose the metrics from Plexus as a Prometheus endpoint.

I dont think extensive analytics etc are the right place in this tool, and are better served by the dozens of other OTEL/Prometheus tools out there.

But beyond those, I think this is a great path.

[djdembeck]

Before you go too far down with this...

My intent in the short term is to eliminate most of the dashboard graphs altogether, and simply expose the metrics from Plexus as a Prometheus endpoint.

I dont think extensive analytics etc are the right place in this tool, and are better served by the dozens of other OTEL/Prometheus tools out there.

But beyond those, I think this is a great path.

Understood! A lot of the front end lacks proper responsive layouts from my brief exposure, which is across the entire front end. So my goal is mostly to get things formatted as they should, so I can have a good experience on any screen in my workflow!

Won't take too much work, mostly simple breakpoint fixes.

[mcowger]

Sounds good - my abilities with frontend are really poor, so I'm grateful for the help