UI moves slightly when card is clicked on Desktop UI due to Scroll Bar popping in and out

 avatar
MelffyBunilla avatarMelffyBunilla 2 months
{"ops":[{"insert":"Dear Archidekt support\n\nIt's a minor issue, but it's annoying to look at. It happens when you click a card, then the back of the page moves to the left.\n>> You can fix that fairly easily by adding to \"body.context-menu-open, body.no-scrolling\" a \"padding-right: 8px\" (might need to check the amount for different screen sizes to ensure it works fine still).\n\nAdditionally when you click away from the detail menu, then the detail menu moves to the left before it vanishes. You can solve this issue by only taking that class away after unload of the detail menu happens (so with a await >> success rather than await and then further down remove the class).\n\nKind regards\n"}]}
0
 avatar
{"ops":[{"insert":"The padding solution for this problem doesn't really work cross browser. Scrollbars have a different width depending on what browser is being used. So attempting that solution only results in exasperating the issue (trust me, I've tried). The horizontal shifting issue is only an issue in chromium browsers that aren't chrome (edge, brave, etc). \n\nThe reason for this is becuase the actual solution to this problem uses scrollbar-gutter: stable. But there is a bug in chromium that causes the scrollbars of fixed divs to disappear completely when the body has scrollbar-gutter: stable. "},{"attributes":{"link":"https://issues.chromium.org/issues/40835364"},"insert":"Here's the bug report"},{"insert":" if you're interested. \n\nChrome got around this by fixing the bug themselves, but either didn't upstream it, or couldn't, not sure. Either way, the CSS property is broken in chromium based browsers that aren't chrome, and there isn't really a good fix until this bug is taken care of. Since that happens to be a pretty small portion of the userbase (< 2%), and this amounts to an asthetic change, I've just elected to leave it as is. The bug is not present in chrome, safarai, or firefox since all three do not have the scrollbar-gutter issue.\n\nIf there was a solution that worked cross browser and solved this for everyone, I would be happy to implement that. But I've looked into this quite a bit, and I don't think that solution exists (the solution is scrollbar-gutters: stable, but yada-yada).\n"}]}
1
 avatar
MelffyBunilla avatarMelffyBunilla 2 months
{"ops":[{"insert":"Hi michael\n\nThank you for the detailed response. Makes a lot of sense, and TIL. :)\n\nKind regards\n"}]}
0