Skip to content

feat(ui): Responsive Design Audit - Phase 3#213

Merged
dgarson merged 1 commit intofeat/horizon-ui-phase1-cleanupfrom
horizon-ui/phase3-responsive-audit
Mar 3, 2026
Merged

feat(ui): Responsive Design Audit - Phase 3#213
dgarson merged 1 commit intofeat/horizon-ui-phase1-cleanupfrom
horizon-ui/phase3-responsive-audit

Conversation

@dgarson
Copy link
Owner

@dgarson dgarson commented Mar 3, 2026

Summary

This PR adds responsive breakpoints to 10 high-priority views as part of Horizon UI Phase 3.

Breakpoints Used

  • sm:640px — Large phones / small tablets
  • md:768px — Tablets
  • lg:1024px — Small laptops
  • xl:1280px — Desktops

Files Changed

File Changes
MissionControlDashboard.tsx grid-cols-4grid-cols-2 lg:grid-cols-4, responsive padding, header stacking
WorkqueueDashboard.tsx grid-cols-6grid-cols-2 sm:grid-cols-3 lg:grid-cols-6, main layout stacking
AccessControlMatrix.tsx Responsive toolbar, role detail grid-cols-3grid-cols-1 sm:grid-cols-3
GatewayMetricsDashboard.tsx Fleet/metrics grids responsive, trend charts stacking
SupportTicketDashboard.tsx Queue tab list/detail stacking, analytics grids responsive
PermissionsMatrix.tsx Roles tab grid responsive, compare summary stacking
CostAllocationDashboard.tsx Summary stats grid-cols-4grid-cols-2 lg:grid-cols-4
ModelHealthDashboard.tsx Summary bar grid-cols-5grid-cols-2 sm:grid-cols-3 lg:grid-cols-5
ApiKeysManager.tsx Header stacking, responsive padding
FeatureFlags.tsx Header stacking, responsive padding

Documentation

See RESPONSIVE_AUDIT.md for full audit details and remaining work.

Testing

Test at breakpoints: 375px, 768px, 1024px, 1280px

Related

  • Part of Horizon UI Phase 3
  • Base branch: feat/horizon-ui-phase1-cleanup

- MissionControlDashboard: grid-cols-4 → grid-cols-2 lg:grid-cols-4, responsive padding
- WorkqueueDashboard: grid-cols-6 → grid-cols-2 sm:grid-cols-3 lg:grid-cols-6, main layout stacking
- AccessControlMatrix: responsive toolbar, role detail grid stacking
- GatewayMetricsDashboard: fleet/metrics grids responsive, trend charts stacking
- SupportTicketDashboard: queue tab stacking, analytics grids responsive
- PermissionsMatrix: roles tab grid responsive, compare summary stacking
- CostAllocationDashboard: summary stats responsive grid
- ModelHealthDashboard: summary bar responsive grid
- ApiKeysManager: header stacking, responsive padding
- FeatureFlags: header stacking, responsive padding

Added RESPONSIVE_AUDIT.md documenting all changes and remaining work.

Part of Horizon UI Phase 3 - Responsive Audit
@dgarson dgarson merged commit 59010a2 into feat/horizon-ui-phase1-cleanup Mar 3, 2026
2 of 6 checks passed
@dgarson dgarson deleted the horizon-ui/phase3-responsive-audit branch March 3, 2026 20:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant