Quote Padding Weird

[wall03]

Browser, version and OS: Windows 20H2, Firefox 82.0.3

 

Steps to reproduce/what were you doing before it happened?

Go to old thread, look at old quotes.

 

What happened?

see photos

 

What did you expect to happen?

something like this:

 

Link to a page where it happened, if applicable: 

All the old threads... IDK exactly what time but what I see is 2013 threads...

 

Screenshots of the issue, if applicable: 

 

 

Any other relevant details:

I started noticing this after forum update

[Nayr438]

If it's helpful in any way to the forum maintainers. It seems the old quotes are missing "div.ipsQuote_contents" so it doesn't get styled correctly.

 

Seems applying the margin size to the quote container and then overriding it in the citation section to maintain style fixes it.

 

    .ipsQuote > div {
        margin: var(--sp-4);
    }
    .ipsQuote_citation {
        margin: 0 !important;
        padding: var(--sp-3) var(--sp-4);
    }

 

For reference.

Current:

Spoiler

<blockquote class="ipsQuote" data-ipsquote="" data-ipsquote-contentapp="forums" data-ipsquote-contentclass="forums_Topic" data-ipsquote-contentcommentid="14209857" data-ipsquote-contentid="1268880" data-ipsquote-contenttype="forums" data-ipsquote-timestamp="1605316201" data-ipsquote-userid="727140" data-ipsquote-username="HelpfulTechWizard" id="ips_uid_5275_4">
    <div class="ipsQuote_citation ipsQuote_open"> <a href="#" data-action="toggleQuote">&nbsp;</a> <a class="ipsPos_right" href="//linustechtips.com/?app=core&amp;module=system&amp;controller=content&amp;do=find&amp;content_class=forums_Topic&amp;content_id=1268880&amp;content_commentid=14209857"><i class="fa fa-share" data-ipstooltip="" title="Jump to this post"></i></a> 10 hours ago, <a href="//linustechtips.com/?app=core&amp;module=members&amp;controller=profile&amp;id=727140" data-ipshover="" data-ipshover-target="//linustechtips.com/?app=core&amp;module=members&amp;controller=profile&amp;id=727140&amp;do=hovercard">HelpfulTechWizard</a> said: </div>

    <div class="ipsQuote_contents ipsClearfix" data-ipstruncate="true" data-ipstruncate-type="hide" data-ipstruncate-size="7 lines" data-ipstruncate-expandtext="Expand">
        <p>
            that was just a guestimation. Probably "There are over 20.000 items marked rtx 3070 on ebay" would be better.
        </p>

        <p>
            &nbsp;
        </p>
    </div>
</blockquote>

 

Old:

Spoiler

<blockquote data-ipsquote="" class="ipsQuote" data-ipsquote-username="skitz9417" data-cite="skitz9417" data-ipsquote-contentapp="forums" data-ipsquote-contenttype="forums" data-ipsquote-contentid="286" data-ipsquote-contentclass="forums_Topic" id="ips_uid_7268_2">
    <div class="ipsQuote_citation ipsQuote_open"> <a href="#" data-action="toggleQuote">&nbsp;</a> skitz9417 said: </div>
    <div>"I want Metro 2033</div>
</blockquote>

 

 

Before and after workaround.

Spoiler

 

Before

 

 

After

 

 

Edited November 14, 2020 by Nayr438

[colonel_mortis]

This should be fixed for quotes in the next update (old spoilers are similarly affected but cannot be fixed in the same way unfortunately).

[Nayr438]

3 hours ago, colonel_mortis said:

old spoilers are similarly affected but cannot be fixed in the same way unfortunately.

What about

 

    .ipsStyle_spoiler > p:first-of-type {
        margin-top: var(--sp-4);
    }
    .ipsStyle_spoiler > p {
        margin-left: var(--sp-4);
        margin-right: var(--sp-4);
    }
    .ipsStyle_spoiler > p:nth-last-child(2) {
        margin-bottom: var(--sp-4);
    }  
    .ipsStyle_spoiler > blockquote {
        margin: var(--sp-4);
    }

 

Spoiler

 

Before

 

 

 

After

 

 

 

 

Edited November 14, 2020 by Nayr438
fix margins when blockquote is in a old spoiler

[colonel_mortis]

On 11/14/2020 at 5:18 PM, Nayr438 said:

What about

 

    .ipsStyle_spoiler > p:first-of-type {
        margin-top: var(--sp-4);
    }
    .ipsStyle_spoiler > p {
        margin-left: var(--sp-4);
        margin-right: var(--sp-4);
    }
    .ipsStyle_spoiler > p:nth-last-child(2) {
        margin-bottom: var(--sp-4);
    }  
    .ipsStyle_spoiler > blockquote {
        margin: var(--sp-4);
    }

 

  Hide contents

 

Before

 

 

 

After

 

 

 

 

That example is slightly too specific, but I've used a similar approach now.