Fixed Page 2 of article thread view totally screwed

[MattW]

This is one of them that I've found partially breaks it. There are 2 on there causing the extra padding and alignment issue.

<article class="message message--article message--articlePreview
        
        
        js-inlineModContainer js-threadListItem-1335" itemscope="" itemtype="https://schema.org/Article">
        <div class="articlePreview-main">
            
                <a href="/threads/squattheplanet-com.1335/" class="articlePreview-image" itemprop="image" itemscope="" itemtype="https://schema.org/ImageObject" style="background-image: url('https://dev.mattwservices.uk/attachments/upload_2014-10-19_4-56-41-png.1330/')">
                    <meta itemprop="url" content="https://dev.mattwservices.uk/attachments/upload_2014-10-19_4-56-41-png.1330/">
                </a>
            
            <div class="articlePreview-text">
                <div class="articlePreview-headline">
                    <h2 class="articlePreview-title" itemprop="headline">
                        
                        
                            
                                <a href="/forums/example-sites-configurations.12/?prefix_id=1" class="labelLink" rel="nofollow"><span class="label label--gray" dir="auto">VPS Configuration</span></a>
                                
                        
                        <a href="/threads/squattheplanet-com.1335/">squattheplanet.com</a>
                    </h2>
                </div>
                <div class="articlePreview-content">
                    <div class="message-content js-messageContent" data-xf-init="lightbox">
                        <div class="message-userContent lbContainer js-lbContainer" data-lb-id="post-5959" data-lb-caption-desc="Matt · Oct 19, 2014 at 4:58 AM">
                            <article class="message-body" itemprop="articleBody">
                                I was contacted by Matt to help set up his CentMinMod VPS from Linode after a couple of failed self installs.

https://community.centminmod.com/threads/place-to-hire-someone-to-set-up-my-website.1509/



It's running on a 2GB Linode VPS. Matt can now focus on the community without having to worry about the technical stuff.
                            </article>
                        </div>
                    </div>
                </div>
                <div class="articlePreview-links">
                    <a href="/threads/squattheplanet-com.1335/" itemprop="discussionUrl">View full article &gt;</a>
                </div>
            </div>
        </div>
        <footer class="articlePreview-footer">
            <ul class="articlePreview-meta listPlain">
                <li><a href="/members/matt.1/" class="avatar avatar--xxs" data-user-id="1" data-xf-init="member-tooltip" id="js-XFUniqueId42">
            <img src="/data/avatars/s/0/1.jpg?1591055883" alt="Matt" class="avatar-u1-s" width="48" height="48" loading="lazy" itemprop="image">
        </a></li>
                <li class="by" itemprop="author" itemscope="" itemtype="https://schema.org/Person">By <a href="/members/matt.1/" class="username  u-concealed" dir="auto" itemprop="name" data-user-id="1" data-xf-init="member-tooltip" id="js-XFUniqueId43"><span class="username--staff username--moderator username--admin">Matt</span></a></li>
                <li><a href="/threads/squattheplanet-com.1335/" class="u-concealed" rel="nofollow" itemprop="datePublished"><time class="u-dt" dir="auto" datetime="2014-10-19T04:58:46+0100" data-time="1413691126" data-date-string="Oct 19, 2014" data-time-string="4:58 AM" title="Oct 19, 2014 at 4:58 AM">Oct 19, 2014</time></a></li>
                <li class="u-flexStretch"><a href="/threads/squattheplanet-com.1335/post-5959" class="u-concealed" data-xf-init="share-tooltip" data-href="/posts/5959/share" rel="nofollow" id="js-XFUniqueId44">
                    <i class="fa--xf far fa-share-alt" aria-hidden="true"></i>
                </a></li>
                
                
                
                    <li><label class="iconic iconic--hiddenLabel" data-xf-init="tooltip" data-original-title="Select for moderation" id="js-XFUniqueId45"><input type="checkbox" value="1335" class="js-inlineModToggle"><i aria-hidden="true"></i><span class="iconic-label"><span class="u-srOnly">Select for moderation</span></span></label>
</li>
                
            </ul>
        </footer>
    </article>

It's the Squat The Planet block.

 

[Kier]

Thanks for that, @MattW

 

[Kier]

Looks to me like that URL is failing to wrap and busting the layout - here is your article preview @MattW inserted into my example output

 

[Kier]

(And now to work out how to fix it...)

 

[Kier]

Looks like adding word-break: break-word; to the CSS rules for the inner <article> might do the trick.

 

[Mr Lucky]

OK, I seem to have pinned one part of this (bug?) down to one specific thread.

If I removed that thread from page 2 of the article forum it solves the issue of breaking out across the sidebar. If I then move it into a different article forum, it causes the same issue.

So a fairly consistent diagnosis.

HOWEVER

Without that thread although it's fixed that issue, at the moment the columns are still different widths. I'll carry on moving threads one by one until I find if there is a specific thread causing that.

 

[Mr Lucky]

Looks like adding word-break: break-word; to the CSS rules for the inner <article> might do the trick.

Indeed


And this is the culprit thread with a long URL no break.

 

[Mr Lucky]

HOWEVER

Without that thread although it's fixed that issue, at the moment the columns are still different widths. I'll carry on moving threads one by one until I find if there is a specific thread causing that.

And now found the other thread with long URL deleted the URL, and this has fixed the whole issue!

So @Kier seems you nailed it with the CSS

 

[XF Bug Bot]

Thank you for reporting this issue, it has now been resolved. We are aiming to include any changes that have been made in a future XF release (2.2.0 Beta 4).

Change log:

Replace all instances of the deprecated `word-wrap: break-word` property with the replacement `overflow-wrap: anywhere` (and equivalents for `word-wrap: normal`). This fixes more issue than just the messed-up article preview column layout.

There may be a delay before changes are rolled out to the XenForo Community.