You’re injecting raw email HTML here:

{!! $latestMessage->body_html !!}


That’s the real reason your whole page “sticks to the left”.

Many emails include <style> rules like div { float:left }, table { margin:0 }, body { width:600px }, etc. Because you render that HTML directly into your page, those CSS rules leak out and override your site layout, breaking Tailwind’s centering (mx-auto) and widths.

✅ Fix = sandbox the email HTML so its CSS can’t affect your app UI.
Best approach: render email HTML inside an iframe using srcdoc.

Fix (recommended): Render email body in a sandboxed iframe

Replace this block:

@if($latestMessage->body_html)
  <div class="prose max-w-none text-sm text-left">
      {!! $latestMessage->body_html !!}
  </div>
@endif


with this:

@if($latestMessage->body_html)
    @php
        // Remove the stuff that commonly breaks your page layout
        $raw = $latestMessage->body_html;

        // Strip <script> and <style> completely
        $safe = preg_replace('/<(script|style)[\s\S]*?>[\s\S]*?<\/\1>/i', '', $raw);

        // Remove <head>...</head>
        $safe = preg_replace('/<head[\s\S]*?>[\s\S]*?<\/head>/i', '', $safe);

        // Remove outer html/body tags if present
        $safe = preg_replace('/<\/?(html|body)[^>]*>/i', '', $safe);

        // Wrap with basic font styling so it looks normal
        $safeWrapped = '<div style="font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-size:14px; color:#111827; line-height:1.4;">'
                        . $safe .
                       '</div>';
    @endphp

    <iframe
        class="w-full bg-white rounded border"
        sandbox=""
        scrolling="no"
        srcdoc="{{ e($safeWrapped) }}"
        onload="resizeEmailIframe(this)"
    ></iframe>
@endif


Then add this helper JS once (near your other scripts):

<script>
  function resizeEmailIframe(iframe) {
    try {
      const doc = iframe.contentDocument || iframe.contentWindow.document;
      // wait a tick for images/fonts
      setTimeout(() => {
        const height = doc.documentElement.scrollHeight || doc.body.scrollHeight;
        iframe.style.height = (height + 20) + 'px';
      }, 50);
    } catch (e) {
      // If sandbox blocks access in some browsers, fallback height
      iframe.style.height = '350px';
    }
  }
</script>


✅ After this, the email CSS can’t hijack your page anymore, and your mx-auto centering will start behaving again.

Optional (extra safety): Stop email HTML from being “full document”

Some emails have <!doctype>, <meta>, <title>, <link> etc. If you still see weird behavior, expand the cleaning:

$safe = preg_replace('/<(meta|link|title)[\s\S]*?>/i', '', $safe);

Why your page looks left-aligned right now

Even though you have:

<div class="max-w-[1600px] w-full mx-auto ...">


If an email injects something like:

div { float:left !important; }


then your container won’t center—because it’s no longer behaving like a normal block element.

====================================================================================================
second issue:
Yep — what you’re seeing is happening because your preview text is still being built from body_text / snippet that sometimes contains HTML (or even a full HTML document), so your “preview” ends up showing <!doctype html>... etc.

You need one consistent “clean text extractor” for previews that strips HTML no matter which field it came from.

And separately: your full-content viewer (iframe) must render HTML, while the preview must always be plain text.

✅ Fix 1: Always generate preview from CLEAN plain text

Inside your @foreach, replace your whole preview-building @php ... @endphp block with this:

@php
    function clean_email_text($value) {
        if (!$value) return '';

        // decode entities first (so &amp; becomes &)
        $text = html_entity_decode($value, ENT_QUOTES | ENT_HTML5, 'UTF-8');

        // remove scripts/styles (emails love dumping these)
        $text = preg_replace('/<(script|style)[\s\S]*?>[\s\S]*?<\/\1>/i', '', $text);

        // strip all tags
        $text = strip_tags($text);

        // normalize whitespace
        $text = preg_replace('/\s+/', ' ', $text);

        return trim($text);
    }

    // Choose the best available source, but ALWAYS clean it.
    // NOTE: some providers mistakenly put HTML into body_text, so we clean regardless.
    $source = $latestMessage->body_text
              ?: $latestMessage->snippet
              ?: ($latestMessage->body_html ? $latestMessage->body_html : '');

    $emailContent = clean_email_text($source);

    $isLongContent = strlen($emailContent) > 150;
@endphp


Then your preview line stays the same:

{{ $isLongContent ? substr($emailContent, 0, 150) . '...' : $emailContent }}


✅ Result: previews will never show raw HTML again.

✅ Fix 2: Full email view should render HTML (not show tags)

In your full content area you currently do:

@if($latestMessage->body_html)
  {!! $latestMessage->body_html !!}
...
@endif


If you already switched to the iframe approach, make sure you’re not accidentally showing the sanitized HTML string inside a <div>.

Use this exact pattern:

@if($latestMessage->body_html)
    @php
        $raw = $latestMessage->body_html;

        $safe = preg_replace('/<(script|style)[\s\S]*?>[\s\S]*?<\/\1>/i', '', $raw);
        $safe = preg_replace('/<head[\s\S]*?>[\s\S]*?<\/head>/i', '', $safe);
        $safe = preg_replace('/<\/?(html|body)[^>]*>/i', '', $safe);

        $safeWrapped = '<div style="font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-size:14px; color:#111827; line-height:1.5;">'
                        . $safe .
                       '</div>';

        // IMPORTANT: srcdoc needs quotes escaped, but keep tags intact
        $srcdoc = str_replace('"', '&quot;', $safeWrapped);
    @endphp

    <iframe
        class="w-full bg-white rounded border"
        sandbox=""
        scrolling="no"
        srcdoc="{!! $srcdoc !!}"
        onload="resizeEmailIframe(this)"
    ></iframe>
@elseif($latestMessage->body_text)
    <div class="whitespace-pre-wrap text-left">
        {{ $latestMessage->body_text }}
    </div>
@else
    <div class="text-left">{{ $latestMessage->snippet }}</div>
@endif


✅ This prevents the iframe from showing the HTML as literal text.

✅ Add/keep this JS once
<script>
  function resizeEmailIframe(iframe) {
    try {
      const doc = iframe.contentDocument || iframe.contentWindow.document;
      setTimeout(() => {
        const height = doc.documentElement.scrollHeight || doc.body.scrollHeight;
        iframe.style.height = (height + 20) + 'px';
      }, 50);
    } catch (e) {
      iframe.style.height = '350px';
    }
  }
</script>

Why this happened (in one line)

Some ingestors/providers store HTML in body_text or snippet, so unless you always sanitize previews, you’ll display raw markup.

