🐛 Fix: Can not see the list panel at 100% size

[hasyminh]

Screen at 100%

[alchemist-bounty]

@hasyminh 100% size is 100% height? can you elaborate this more please?

[hasyminh]

It was 100% size on Chrome. I (and many others) got this issue when using a desktop of 17" or smaller.

[alchemist-bounty]

Can you attach screenshot please? it is related screen resolution you mean?

[stephclarkga]

This is expected behavior based on screen resolution - Smaller screen resolutions do not show the search column and the chart at the same time (there's just not enough screen space- so when searching the chart is replaced with the search list temporarily). I think the break point is 1536px to switch to our "Large" display so a 17" display not showing it seems a little weird but @IYTEC can confirm this point and see if we need to adjust it.

[alchemist-bounty]

at least I would like to see the screenshot so I can reproduce this error.

[hasyminh]

Probaly the resolution issue. Above image was taken with my old desktop (not using it now). Please see the images. Had to use it at 90% to display the search list.

[alchemist-bounty]

I will check. Thanks

[create-issue-branch[bot]]

Branch issue-520-🐛_Fix_Can_not_see_the_list_panel_at_100%_size created!

[alchemist-bounty]

@hasyminh I check this ticket and I think it is not a bug. When it is in smaller width, it is hiding the search panel because the Asset List is taking the space. And it would be normal behavior in responsive design. I think the issue is when it hides the left Asset panel, it should also hide the search textbox as well. Looking for your thought.

[alchemist-bounty]

@hasyminh After checking on this, it is not hiding but it is overlapping and asset list section is below the Graph Section. I think we should decide what to do when we have small window size like this.

[atrefonas]

@stephclarkga do you have any comment?

@alchemist-bounty please discuss with Steph as she is our UIX designer.

[alchemist-bounty]

@stephclarkga Can you check these comments please?

[stephclarkga]

We can't get rid of the search bar even when the list isn't there since we need users to easily know how to switch between assets. This photo is an example of what I think we can do with smaller sizes (this is the small viewport - horizontal iPad size - 1194px wide). We can have the search bar condense and when users click on it, it expands to show the list and temporarily pushes O/H/L/C/Vol data off until the search is ended.

The medium viewport (1366px wide is the break point) can fit the full search bar alongside the ASA info and the list would appear below the search bar but nothing needs to be temporary condensed. It will just overlay the chart temporarily.

@alchemist-bounty I have this Figma file that has these screenshots in it - these different screen sizes are worked out at the top of this file. https://www.figma.com/file/AnckPL76NcZCJAuzOiWCNX/Algodex-Interface-Guide?node-id=635%3A10173

[alchemist-bounty]

@stephclarkga I haven't seen this comment before. I think this issue is not bug.

[alchemist-bounty]

@stephclarkga @hasyminh can you confirm this please? I noticed that the Assett Panel is showing in LG Desktop Display (min-width: 992px) For available breakpoints: https://getbootstrap.com/docs/5.0/layout/breakpoints/

[alchemist-bounty]

@IYTEC do we use custom window breakpoints?

[IYTEC]

Yes @alchemist-bounty

We not using any breakpoint from a Themeing system at the moment, it will be available when we have the Next build.

[IYTEC]

I think its the expected behavior for that layout (keep the search panel hidden on some certain viewports), what I think we can do is change the layout, if we want a different behavior.

Also I think what we can fix is the Wallet Panel scroll section on such computers, so users don't use mouse to scroll to see the cancel button hidden at the end of the component.

@alchemist-bounty @stephclarkga @hasyminh

[alchemist-bounty]

@IYTEC I agree on that. Right now if the width is less than1536px Asset Panel will be hidden. I manually tried to change this minimum width to 1200px but it looks awful. We need to adjust other components as well. This is how it looks when I show the Asset Panel if greater than 1200px.

[alchemist-bounty]

@stephclarkga @hasyminh @IYTEC when we have smaller size window we can't see cancel button (X button) in Open Orders Tab. Do we need additional design change or short key in that case? Any opinion?

[atrefonas]

Nice find @alchemist-bounty

[alchemist-bounty]

Nice find @alchemist-bounty

@IYTEC found it :)

[IYTEC]

:) @PhearZero actually did, when we were briefly looking through the issue.

[alchemist-bounty]

Related to

• https://github.com/algodex/algodex-react/issues/518

[alchemist-bounty]

@PhearZero @IYTEC @atrefonas @stephclarkga Appreciate if you have any ideas how to optimize the bottom panel when we have smaller width browser. Maybe we could hide some columns or show horizontal bar. Right now it doesn't even show horizontal bar

[IYTEC]

I think, showing the horizontal scroll on that viewport size will be good for now, but @stephclarkga will have a better suggestion.

If we decide to hide some rows, what column will we decide to hide? Also if we will do that with current table we will need a design that allow the user choose the column to hide when we implement the hiding feature.

We can as well transition to using MUI for the table and MUI for the hiding of columns feature (which is something we plan to do), think that will be easier, but the problem now is MUI is not really working for our current build. Works perfectly on our next build.

Again, @stephclarkga will have a better suggestion.

@alchemist-bounty @PhearZero @stephclarkga @atrefonas

[alchemist-bounty]

@IYTEC I mean to hide the columns not rows.

[IYTEC]

Yes, sorry, I meant columns not row. Thanks.