Overscroll issue inline / inline block styles need to be fine-tuned for mobile devices

[realdennis]

Looks like we need to modify some style for mobile devices, to prevent the x-axis overscroll, You can also check this issue by this script:

[...document.all].filter(el=>el.getClientBoundingRect().width > window.innerWidth); 
// It will return the expand elements array

According this thread https://github.com/ptt/pttweb/issues/2 , I know the stylesheets are not in this repository, I'll comment some temp solution in this issue.

Issue 1:

If there are <iframe> element in article, it will make expand more than 100% width, cause iframe is a inline element, so we need to add box-sizing: border-box; or display: block; to prevent the unexpected expand.

Issue 2:

I figure out there is a similar issue on our board, it due to some inline-block are in the <a class"board"> tag, it also make the width expand over, I thought there are a short-code workaround is change the style of this tag from display: block to display: table.

Issue 3:

Also an expand issue in <span> tag which for ascii color in title / article / signature, it'll allow the children expand to more than screen width, but I do not think it could solve without breaking change...

If these are expected user experience, please tell me and close issue.