Equipment drawer scrolling is not working

[Alys]

From @ceran (aabe567b-aa55-42c1-b612-b7699a7ba9b7):

"On the equipment page (website) with the items currently equipped: not all of the items fit in the box at the bottom of the screen. The slot for the back item for example is so far off to the right that it is nearly completely off the page. I can't see what I have equipped there and need to unequip it by finding the item amongst all of them and deselecting it there."

Here's a screenshot from my own account:

I'm assuming it's meant to scroll like the drawer in the Stable and Market but I can't actually remember if that's how it used to work or if it's always been like this and I've never noticed. Pretty sure I would have noticed though so I think this is probably a recent breakage.

[Alys]

Not actualy recent. @ceran writes:

"It's actually not a new bug, it's been there for a few weeks at least, (I admit I was just too lazy to report XD), and I've been wondering why there is no slot for the back items for quite a while before that, until I noticed that it is there, just hidden. My back item slot is actually even further to the right than in your screenshot. The right side of the body accesory slot is nearly flush with the edge of the box, and only the very left edge of the back item slot is visible."

[jueast08]

@Alys This only happens when minimizing a bit the screen right ?
Maybe it would be nice to put the elements in a carousel ?

like

< 0 0 0 0 0 >

where < and > are arrows and 0 are the equipment squares ?

[Alys]

@jueast08 It happens for me with my browser fullscreen but I have a small laptop and a browser sidebar.

I think a carousel as on the Stable would be good. Would you like to work on it?

[jueast08]

@Alys Sure, I'll take it. It'll be a nice way to get me started.

BTW, what is the resolution of your PC ? And how do I associate my avatar with my git ?

[Alys]

Thanks! I've marked it as in progress for you.

You can replicate this bug on any computer by making your browser narrower until you notice it occuring. The resolution shouldn't matter.

See Using Your Local Install to Modify Habitica%27s Website and API for the process of submitting pull requests and getting contributor tier credit for any that are accepted (in brief, put your User ID in the PR; not your Username since that can change over time and we want the permanent record in GitHub to be accurate).

[jueast08]

@Alys So, I had a busy couple of weeks with school and work and what not, and I got to take a look at the code.

For the moment, I fixed the problem (nothing special, I just added a missing css attribute). It's technically fixes the problem with a scroll bar but if I want to do what I suggested, I'd need more time to understand all of the code because the changes I've tried so far (other than that css attribute) haven't had much effect.

Should I go ahead an push that one-liner ?

[Alys]

@jueast08 My personal feeling is that a scroll bar would definitely be an improvement over the current situation because right now on small screens or with larger zooms (e.g., for people with poor eyesight) the right-most equipment slots are partially or fully unusable / invisible. A quick-fix scroll bar would help the people who have this accessibility problem and a better fix could be done later.

However the staff might have a different opinion and would make any decision about whether the PR would be accepted, so you might want to wait until one of them has commented here.

[paglias]

Is this still in progress?

[shanaqui]

Since there's been no response here for so long, I was going to mark this as help wanted again. However, before I do, looks like there was an open question about implementation for this (re: adding a scroll bar or not)? Maybe a question for @Tressley as it's a design sort of thing?

[Tressley]

@shanaqui -- Let's put this one on hold for now. We have planned updates to the drawer that will introduce new designs. 👍