Habitica: excessive whitespace from multiple modals

[Alys]

_From citrusella, the serving wench (2d6ef231-50b4-4a22-90e7-45eb97147a2c) in the Report a Bug guild:_

_From about a day or two ago:_

"Sometimes when I've just gotten on, multiple modals have been popping up (or maybe it's the same modal multiple times? I don't know). When that happens, the body portion of the page shifts over into a smaller width a couple times (perhaps for each time an extra scrollbar would have popped up with the modal? there's whitespace where the page has moved away from the right side of the screen), and it doesn't un-shift-over when the modal is closed. It also might not be related to modals; it happened once while I was zooming in and out to test something, but I can't reproduce it that way..."

_From 12 hours ago:_

"Tumblr draft with five images and a brief blurb of what they're about

"... something changed and highly exacerbated the problem... (Mostly the culprit making the problem this bad was the Bailey modal, which has switched from occasionally appearing on sync to appearing on every sync if it was only "tell me later"-ed and not simply dismissed.)

"It used to be that the whitespace issue would only happen on my first getting onto the site or so (and only shift over a half inch or so) and a refresh would fix it, but today it persisted through every refresh and got worse with further use of the site. Telling Bailey to fully dismiss instead of wait for later slows the problem (because she's not coming up every sync and adding more whitespace), but some other modals that seem to otherwise be acting completely normally/not inappropriately appearing seem to cause this behavior as well, like the gifting modal. I'll be on the lookout to see if this stops with any modal fixes."

_From 10 minutes ago after being asked if extensions or themes were enabled:_

"Vivaldi (where I did the 'hit sync button repeatedly' to get the most extreme screenshot) doesn't have any extensions of any kind installed. I disabled my single user style running on the site right now in Firefox at some point during testing last night with no change. I didn't think to disable my adblocker last night, but I did it just now and it doesn't seem to do anything to change the outcome, if the whitespace added from going through the motions of sending gems is any indication. (... I now can't get Bailey to respect 'tell me later' when I make her show again ... so I can't test with that modal.)"

[TheHollidayInn]

Which browser is being used in the screen shots?

[citrusella]

It says it in text below the screenshots on my link, but the first four are over a 10-20 minute span (it started at standard width and I finagled with it for about five minutes before thinking to take screenshots) in Firefox 52.5.0 ESR (that's up-to-date for the ESR channel, but I can't switch over to the "standard" update channel right now, so I don't know if browser version makes a difference in whether or not it happens).

The last one (the one with the most whitespace where I more-or-less spammed the sync button to see just how far left the page would go before it stopped) is Vivaldi (the latest version, I think, but I might be wrong).

And just for OS reference in case that makes any difference, I'm on Windows 7 Professional SP1.

[citrusella]

Just wanna say that for the sake of completeness, I hopped onto a different computer (Windows 10) and tried in Edge and the latest version of Firefox (57 or whatever). I got the same basic results.

[TheHollidayInn]

So currently:

1. The sync button is creating white space
2. The bailey is showing multiple times for you?

[citrusella]

1. The Bailey modal (and some other modals, probably, though the only other one I've noticed in specific is the gifting modal) creates whitespace that usually doesn't go away.
2. Bailey is appearing on every sync if she's not completely dismissed (sometimes she appears multiple times, particularly if I've done multiple actions before she can show up (like I've noticed doing two dailies might cause her modal to pop up once, and then another time on top of itself)). I think it's the modal itself that's the problem in some way, not the syncing, though it appearing so often due to syncing exacerbates the issue.
   
   
   
   • Dismissing the Bailey modal keeps most of the whitespace problem at bay (since repeated Baileys aren't exacerbating the issue), but not all of it, as far as I can tell.
   
   
   • (My usual choice is to click "tell me later" on Bailey because I like continuing to see her when I first get into the site, even if she doesn't have new news. Currently on my non-testing account, I dismissed her out of necessity in order to slow/prevent this bug.)
   
   
3. The sync button by itself has not been causing this problem, but it can force the problem to happen if syncing brings up a modal (as it does if Bailey has only been "tell me later"ed and not full-on dismissed). My testing account did and still does have Bailey not-dismissed, so clicking the sync button repeatedly is an easy way to trigger the issue in that situation since it forces the site to sync and display Bailey again.

[mandyzhou]

I'm getting this too -- another way to replicate this is by opening up a user's profile, then clicking on their avatar, which triggers the modal re-opening.

[Alys]

This is probably the same bug as https://github.com/HabitRPG/habitica/issues/9532 which is being worked on by @thefridge111 so I'm marking this in progress.

[Alys]

Another example of this from PaulchenPanther ( cde2d07f-ef9a-4e3e-8b19-3e678f7cf27b ) in the Report a Bug guild:

"the notification that all equipment from the armoire has been received is mostly not in the notification window and not readable link"

[Alys]

9532 was closed without a fix because I couldn't replicate it on Firefox and we didn't see any recent reports of it.

I can't replicate this bug, but that doesn't mean it's fixed since it depended on multiple modals opening which is hard to replicate. I'm closing this but I'm about to post to Aspiring Socialites to ask them to keep an eye out for it.

[shanaqui]

From citrusella in Report a Bug:

@Alys mentioned closing the excessive whitespace from modals issue (where a modal adds whitespace and doesn't take it away when closed, which makes it worsen with every modal that opens that does that) this morning and I wanted to bring up the fact it's still happening with the report modal at the very least: https://www.youtube.com/watch?v=rtiPqjQ0g7M (unrelated aside: getting this video up was an exercise in futility for a bit DX). I started recording after I'd already triggered the issue once, which is why it starts with whitespace already present.

I thought this issue with the report modal still doing it was known, which was why I didn't report it myself, but I guess not? :P (For reference, it was happening before the modal was redesigned, too.) It happens whether you click "cancel" or "report" (I clicked cancel in the video because... that's not a reportable post XD). Should be easily replicable because you can open and cancel the modal as many times in succession as you want.

[citrusella]

Also happens with the Copy as To-Do modal, I've just noticed.

[beffymaroo]

@Alys Should I change the status on this one to Help Wanted?

[Alys]

Ah, sorry, I should have changed the status to help wanted when I reopened it. I've changed the label now.

[Tressley]

Is this still an ongoing issue? I've reviewed both the Copy as To-Do and Report modals and both look to be displaying properly.

[citrusella]

I haven't personally seen it recently (either the armoire modal flavor above or the "when the modal closes the site has made its overall width smaller" flavor that I reported initially). I feel like I would have noticed it if it were still happening, though I'm not sure about that...

[Alys]

I've closed this but we can reopen if it's noticed again!

Thanks @citrusella