blockquote and pre can overflow into the right sidebar region in the Olivero theme
See screenshot:
1. Create a site e.g. with http://simplytest.me/project/drupal/9.2.x, login admin/admin
2. Go to Appearance, and enable and set default Olivero.
3. Go to Structure > Block Layout and add different blocks in the sidebar region.
4. Create a new article "Test article" with body (click on "source" and copypaste)
<blockquote>
<p>This is a very long blockquote that will overlap, if using long words more often used in a non-English language, with the sidebar .</p>
</blockquote>
<blockquote>
<p>This is another blockquote confirming the issue.</p>
</blockquote>
TBD
TBD
The blockquote doesn't overlap with the sidebar.
None.
None.
None.
| Comment | File | Size | Author |
|---|---|---|---|
| #42 | 3210902-without-side-bar.png | 81.14 KB | indrajithkb |
| #42 | 3210902-with-side-bar.png | 88.14 KB | indrajithkb |
| #41 | width.png | 244.9 KB | marcusvsouza |
| #41 | mobile.png | 38.71 KB | marcusvsouza |
| #41 | after_patch-40.jpg | 121.81 KB | marcusvsouza |
Comments
Comment #2
tushar_sachdeva commentedComment #3
tushar_sachdeva commented@penyaskito not able to reproduce this issue. Please provide the necessary steps.Thanks
Comment #4
penyaskitoUpdated with steps to reproduce.
Attached a better screenshot.
Comment #5
penyaskitoComment #6
mherchelConfirmed that I'm able to reproduce the issue on https://tugboat-aqrmztryfqsezpvnghut1cszck2wwasr.tugboat.qa/node/31 by editing one of the
<p>tags to be<blockquote>.Comment #7
tushar_sachdeva commented@penyaskito thanks for providing steps, I'm able to reproduce this issue now.
Comment #8
tushar_sachdeva commentedIf i am not wrong this css
.layout--pass--content-narrow > * .text-content blockquote{width: 56.41071rem;}is causing the overflow issue , as its width is more than the parents div , for reference I have attached the video .Comment #9
tushar_sachdeva commentedQuick and easy patch applied with before and after screenshots, please review and let me know if setting up
width: auto;holds good here. ThanksComment #10
tushar_sachdeva commentedComment #11
sulfikar_s commentedHi, I've applied the patch and it applied cleanly. It does fix the overlapping issue!
I'm attaching the screenshots below,
Before,
After,
I think it's good to move to RTBC.
RTBC+1
Comment #12
mherchelThe design of Olivero has the
<blockquote>extending beyond the grid on purpose. We want to keep that... unless the sidebar is present.You can see this at https://git.drupalcode.org/project/drupal/-/blob/9.2.x/core/themes/olive...
Note that the same behavior will also happen with the
<pre>element, so we should fix that, too.There's a
.sidebar-gridCSS class that gets added at https://git.drupalcode.org/project/drupal/-/blob/9.2.x/core/themes/olive.... We can use this class to create a selector to reset the width.Comment #13
tushar_sachdeva commentedComment #14
tushar_sachdeva commentedQuick and easy patch applied. Please review and verify.
Comment #15
tushar_sachdeva commentedComment #16
tushar_sachdeva commentedQuick and easy patch applied with
<pre>width fix. Please review and verify.Comment #17
pragati_kanade commentedTLGM
Comment #18
kiran.kadam911@tushar_sachdeva Thanks for the patch #16, it's applied successfully. But there are some CI failure issues that need to fix https://www.drupal.org/pift-ci-job/2046265
So providing an updated patch, Kindly review.
Thanks!
Comment #20
tushar_sachdeva commented@kiran.kadam911 thanks for rerolling patch #16, CI failure issues were due to indentations, patch #18 works fine attaching screenshots again.Moving it to RTBC.
Comment #21
tushar_sachdeva commentedComment #24
renatog commentedThis comment here has unnecessary break-line
Considering that we can use 80 chars per line this comment should be
Comment #25
kostyashupenkoAdd more steps how to reproduce please, on my side it was:
1. Standard profile installation
2. Created Article node
3. Checkbox "Promoted to front page" was checked for this node
4. Go to "/node"
I have set margin-left for pre tag as 0, coz without 0 it looks like this:
Also i have removed
word-wrap: break-word;because it has no effect at all (maybe i'm wrong, but tested in chrome, safari and FF), because user agent styles for pre tag contains onlywhite-space: pre, means onlywhite-space: prewe have to override to its default value, which iswhite-space: normalComment #26
kostyashupenkoComment #27
kostyashupenkoWell, i figured out, that bug, illustrated in #25 (with negative left margin) happens only if pre tag is placed inside blockquote tag. I'm not sure if it can be the real client case, so i removed margin-left: 0;
Now it's ready for review
Comment #28
guilhermevp commentedTested patch #27 and it works as intended.
Before patch:
After patch:
Just took the steps to reproduce from the issue summary. Also tested as comment #25 suggested.
Seems good to RTBC.
Comment #29
renatog commentedFollow the new patch considering Line length and wrapping standards on comments / documentation
Comment #30
sakthivel m commentedFixed Custom Commands Failed issue. #30 Please review the patch
Comment #32
ajv009 commentedLooks good to me, applied and tested. The spacing looks fine, Couldn't find any overlapping content!
Comment #33
mherchelThis patch also affects the blockquotes on pages that do not have sidebars. We need to ensure that the patch only affects blockquotes when a sidebar grid is present.
Comment #34
rinku jacob 13 commentedpatch applied successfully for dupal 9.3.x-dev.patch working great .
Comment #35
renatog commentedSo moving to RTBC
Comment #36
mherchel@Rinku Jacob 13 - there is no need to let us know that the patch is able to be applied. Drupal CI will fail if it does not apply.
@RenatoG my concerns in #33 where not addressed. Please don't change the status unless work has been done.
Comment #37
mherchelHere is an updated patch. We needed to limit the selector to the
.sidebar-gridclass.Comment #38
mherchel#38 still had issues overflowing at mobile widths. This patch fixes that.
Comment #39
mherchelHad a typo in my comment.
Comment #40
mherchelDarnit, I forgot to compile the CSS! 🤦
Comment #41
marcusvsouza commentedThe patch in comment #40 solves the problem, including mobile and narrow screens.
Comment #42
indrajithkb commentedHi @mherchel thanks for the #40 patch, it's working as expected.
Attaching screenshots for refernce
1. Blockquote with side-bar
2. Blockquote without side-bar (which was the remaining task addressed in #33)
Blockquote without sidebar was the remaining task now it's also resolved by #40. So moving to RTBC
Comment #43
mherchelOpened followup issue #3221247: various elements (blockquote, pre, embeded media) can overflow into sidebar when vertical toolbar is present
Comment #46
lauriiiCommitted 9c41e6e and pushed to 9.3.x. Also cherry-picked to 9.2.x because Olivero is experimental. Thanks!