Open-Assistant
Open-Assistant copied to clipboard
LAION-AI
Answer preview bug
It is impossible to see some of the answers when rating the assistant responses. I tested on Chrome and Opera browser. Moving the UI are caused by the second scroll bar appearing on the right side.
https://user-images.githubusercontent.com/98437003/216843457-7d37dc53-793a-478a-a2bd-7174f21eaae1.mp4
In almost every task. I do not know if something has been changed, but now when the cursor is on the answer button other answers move and it is possible to see it.
I don't have this problem in Firefox, but I think a better UX is to make the whole card clickable.
@XavierRex one thing that confuses me is that you have two scroll bars, can you tell me your screen zoom scaling? is it 200%?
I don't have this problem in Firefox, but I think a better UX is to make the whole card clickable.
@mehdi-zibout we considered this, but you still have to be able to drag and drop the card without the window openning.
@AbdBarho yes it's possible in dnd-kit by modifying some of the sensors options.
IMO there are multiple problems with the current ranking UI, e.g. the popup poorly uses the available screen space:
In the image it looks as if I could scroll .. but as soon as I move my mouse after scrolling the popup disappears.
The better option is to move the [...] next to the drag icon. Problem solved, with an added benefit of not needing to move the mouse a lot to see the expanded message.
I was trying to investigate what is wrong with the layout and scrollbars. It looks like Chakra UI's portals (tooltips) have too much freedom and menus in the hidden state go all over the place sometimes. I'm not very confident, but my suggestion is to disable horizontal scrolling at the top level. Maybe to add overflow-x-hidden here:
https://github.com/LAION-AI/Open-Assistant/blob/0ef36e81be657fdb144057600ae1cdf5fbec27ee/website/src/pages/_document.tsx#L5
and to change sm:overflow-hidden to overflow-x-hidden here:
https://github.com/LAION-AI/Open-Assistant/blob/0ef36e81be657fdb144057600ae1cdf5fbec27ee/website/src/components/SideMenuLayout.tsx#L14
and to remove overflow-y-auto from here:
https://github.com/LAION-AI/Open-Assistant/blob/0ef36e81be657fdb144057600ae1cdf5fbec27ee/website/src/components/SideMenuLayout.tsx#L19
It does not fix dashboard responsiveness at small widths, though, and may be problematic in some other ways. But at least this approach is pretty low effort. 🙂
