The double quotation marks in quote blocks overlap the text on mobile devices

[MFYDev]

Describe the bug When using Bookstack 0.30.7, and setting default editor as mardown.

Then the quote block cannot display normally on mobile device, because the double quotation marks overlap the text.

Steps To Reproduce Steps to reproduce the behavior:

1. create a new page in the book.
2. using > to create a quote block and fill it with some characters.
3. viewing it on your mobile device. (Mine is Android Chrome)
4. See error

Expected behavior the double quotation marks should not overlap the text.

Screenshots

Your Configuration (please complete the following information):

• Exact BookStack Version (Found in settings):0.30.7
• PHP Version:7.4
• Hosting Method (Nginx/Apache/Docker): Nginx

[ssddanbrown]

Thanks for reporting @MFYDev.

I'm having trouble reproducing this, Can you confirm the following:

• What device is in use? Just so I can get details of the browser viewport size.
• Have you made any customizations to your BookStack instance? The quote mark looks different to what I see by default on chrome/firefox.

[MFYDev]

@ssddanbrown I am using Mi 10 Ultra and here is the parameters of my device.

I never do any customization on this thing. I just add mathjax to the header, but this has nothing to do with the quote marks. Maybe it is because of the Chinese characters?

[ssddanbrown]

Thanks for confirming @MFYDev, Yeah, May be due to the characters or maybe the default font active on the phone. I do have a xiomi device somewhere, might give it a test on that.

If possible, it would be ideal if you could let me know if you see the same thing on the BookStack demo site on your device. There's a quote block towards the bottom of this page: https://demo.bookstackapp.com/books/bookstack-user-guide/page/examples-of-different-content

[MFYDev]

Thank you so much for the efficient support @ssddanbrown, and I can confirm this issue happens on your demo site too, here is the screenshot in the following:

BTW, I found another problem at the same moment, the table appears incomplete on the mobile device and cannot be dragged, here is the screenshot:

I am using the lastest version Andorid Chrome which was downloaded from Google Play.

[MFYDev]

Honestly, I suggest to remove the quote marks. Because sometimes, we do not use quote blocks just to quote somebody's words. We also use this block to highlight something, then, displaying the quote mark will be a little bit weird.

I know you want this block more pretty, but this thing is not always the best in markdown editor.

Maybe one of the solutions is adding a switch to control the quote mark in the block displays or not?

I do not know, just wanna express my perspective.

[MFYDev]

@ssddanbrown Please do not forget this issue sir.

[tcsi-github]

I realize this is about a year old.... however I feel the same way. I would like to see the double quote go away. Rarely are we using it to denote an actual quote but more of sectioning something to be on it's own.

[ssddanbrown]

@tcsi-github I wouldn't really look to change the default style based on people using blockquotes against their intended purpose. You can override the styles on your instance if desired using the "Custom HTML Head Content" setting:

<style>
blockquote:before { content: none; }
</style>

[tcsi-github]

That is perfectly acceptable for me. Thank you for the workaround.