Mutants & Masterminds 3rd : Problem with sheet and translation proposition

Hello I have noticed a problem recently appeared with the styling in the sheet : some buttons are too big (the ones for the unnamed skills) and in overall nothing is aligned. That was not the case before and I have tried to modify the CSS but I can't find the cause. However, I have made a translation in french (that's explain my bad english) and I can submit it to roll20. So is there somebody interrested, and how to submit it ? Thanks everyone ^^ Nimlas

Nobody ?

I have the same issue, I think. However, not everyone has the issue it seems, so I don't know what causes it. Here's what it looks like to me:

It wasn't always like this, by the way, it started some time ago, I'd like to say something like a year ago maybe? I was sort of hoping it would get fixed eventually, but whatever update broke it has not been undone or changed so I don't know...

So far it seems to be affecting me on both Firefox and Microsoft Edge.

I think it's been like that for a good while, seeing this again makes me remember having looked at it quickly some half a year ago, but then just giving up.

If you have time to take a look again, it would be wonderful ^^

Yeah, the sheet is nearly unusable as it is now :S. I don't even know what's causing it, since SOME people apparently see it fine...

Ok, new info: Using Google Chrome shows the sheet properly. While I don't like that browser, this might provide a clue as to how it broke.

I wonder if its because of elements like inputs being nested inside buttons. It has been mentioned a couple of times that a change in firefox caused this layout approach to stop working. I don't know the specifics, I just remember reading comments about it.

Can confirm, tried out the sheet on Linux with both Chrome and Firefox, and the visual bug was only on firefox, while the sheet looked fine on chrome.

Looks like my button guess isnt the issue, after having a quick look att he code. It looks like the last edit for the sheet was back in april. Has this issue been around that long? If not, it might be a user edit. If it has though, it might still be a change in firefox that some CSS in the sheet doesnt work properly anymore. I'd raise an issue on the github to call attention to it, and maybe link to this thread.

I started working on a fix, let's see where it goes. The main issue seems to be that in some instances Firefox: makes a different assumption about the default display mode, and goes for something like "block" where block-inline or flex shows completely fine Labels that have "width:fit-content" doesn't seem to mesh well with firefox, and either manually defining with or set it to "auto" seems to fix it. MDN says it's still a experimental value and doesn't recommend using it in production code

Fix submitted , tested Linux( Firefox and Chrome) and seems to fix all major issues. It got merged minutes after submitting the fix, so fixes should be live sometime tomorrow. If someone want to test it, HTML and CSS of my fixed version

Well, I just looked at the sheets using Firefox and they seem all fixed now! Thank you so much! Now I can run all my campaigns using my normal browser ^^.

It's perfect! Thanks a lot!!!

I also did some minor cleanup on the CSS file to make it more readable while I made the fixes. Added comments, grouped related classes together, moved some things around, and double-checked on both Chrome & Firefox that it didn't create any problems. The code should now be somewhat easier for others to improve in the future.

That does look pretty neat. My CSS is never that clean, haha.

GiGs said: That does look pretty neat. My CSS is never that clean, haha. Have you seen my CSS when I make a sheet by myself? I've read way too many HTML/CSS Style Guides :D Could have done more cleanup on the M&M sheet code, but left most for later to keep the commit within a manageable size. Might still do more refactoring on M&M sheet later.