#199 resizable dashboard

[HershLalwani]

Overview

Completes #199

A way for the user to resize the RHS and LHS to improve readability of the compare tab and search list.

What Changed

Changes in dashboard/index.tsx swapped grid for react-resizable-panels to display the RHS & LHS. There are functions to show the correct UI when accessing from desktop or mobile.

Other Notes

Several Libraries were attempted, but react-resizable-panels worked best for our needs.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
utd-trends	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 12, 2024 1:57am

[TyHil]

@AbhiramTadepalli double check LHS getting too small and mobile issues
maybe also snapping back to 50/50?

[TyHil]

Mobile seems to work on chrome mobile for me but not firefox mobile, may just need to go back to the old Grid based on a useMediaQuery

[TyHil]

@AbhiramTadepalli this should be ready now except I can't seem to get the sticky RHS working when merging in develop

[TyHil]

@AbhiramTadepalli Ok figured it out. Apparently overflow hidden on any parents screws with position sticky. All ready now.

[AbhiramTadepalli]

Okay so every time you add to compare it makes the rhs's minimum width wider. imo minwidth should stay the same because we have horizontal scroll in compare

[TyHil]

Idk why setting min width fixes this but it does

[AbhiramTadepalli]

@TyHil one last question
The LHS locks at a min-width. In split-screen (when the browser window is half the size) the RHS keeps going until the edge of the name. Is that the intended behavior?

In full-screen, the RHS just stops at the LHS's min-width

[AbhiramTadepalli]

ah sorry. Bug:

1. Make LHS bigger,
2. open a card,
3. make LHS smaller,
4. the LHS does not get smaller, RHS just moves on top of it. Expected behavior is LHS resizes (including the contents of the card)

[TyHil]

@TyHil one last question The LHS locks at a min-width. In split-screen (when the browser window is half the size) the RHS keeps going until the edge of the name. Is that the intended behavior?

In full-screen, the RHS just stops at the LHS's min-width

i dont't quite get this, can you screenshot?

ah sorry. Bug:
1. Make LHS bigger,
2. open a card,
3. make LHS smaller,
4. the LHS does not get smaller, RHS just moves on top of it. Expected behavior is LHS resizes (including the contents of the card)

im getting this behavior like 1 in 10 times, but if you re expand the LHS and re collapse it behaves as intended. is that acceptable?

[AbhiramTadepalli]

@TyHil one last question The LHS locks at a min-width. In split-screen (when the browser window is half the size) the RHS keeps going until the edge of the name. Is that the intended behavior?
In full-screen, the RHS just stops at the LHS's min-width

i dont't quite get this, can you screenshot?

It covers the bubbles, does not make the row skinnier

[AbhiramTadepalli]

im getting this behavior like 1 in 10 times, but if you re expand the LHS and re collapse it behaves as intended. is that acceptable?

Do you know why it's inconsistent? Or the cause?

[TyHil]

I have no idea

[AbhiramTadepalli]

Since it mostly works, I'll merge it in

• [Bug]: Resizable dashboard does not shrink an expanded card on the LHS, sometimes #323

Will be fixed later

[AbhiramTadepalli]

Great work @HershLalwani