feat(devtools): enhance SERP preview for mobile with new styles and overflow reporting

This commit introduces new styles for the mobile SERP preview, including a dedicated snippet layout and improved overflow reporting for the title and description. It adds functionality to handle mobile-specific text truncation and displays warnings for descriptions exceeding a three-line limit, enhancing user feedback and visual consistency across devices.

Author: abedshaaban

packages/devtools/src/styles/use-styles.ts

@@ -233,6 +233,9 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
     `,
     serpPreviewBlock: css`
       margin-bottom: 1.5rem;
+      border: 1px solid ${t(colors.gray[200], colors.gray[700])};
+      border-radius: 10px;
+      padding: 1rem;
     `,
     serpPreviewLabel: css`
       font-size: 0.875rem;
@@ -241,12 +244,32 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       color: ${t(colors.gray[700], colors.gray[300])};
     `,
     serpSnippet: css`
-      border: 1px solid ${t(colors.gray[200], colors.gray[800])};
+      border: 1px solid ${t(colors.gray[100], colors.gray[800])};
       border-radius: 8px;
       padding: 1rem 1.25rem;
       background: ${t(colors.white, colors.darkGray[900])};
       max-width: 600px;
       font-family: ${fontFamily.sans};
+      box-shadow: 0 1px 2px ${t('rgba(0,0,0,0.04)', 'rgba(0,0,0,0.08)')};
+    `,
+    serpSnippetMobile: css`
+      border: 1px solid ${t(colors.gray[100], colors.gray[800])};
+      border-radius: 8px;
+      padding: 1rem 1.25rem;
+      background: ${t(colors.white, colors.darkGray[900])};
+      max-width: 380px;
+      font-family: ${fontFamily.sans};
+      box-shadow: 0 1px 2px ${t('rgba(0,0,0,0.04)', 'rgba(0,0,0,0.08)')};
+    `,
+    serpSnippetDescMobile: css`
+      font-size: 0.875rem;
+      color: ${t(colors.gray[700], colors.gray[300])};
+      margin: 0;
+      line-height: 1.5;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 3;
+      overflow: hidden;
     `,
     serpSnippetTopRow: css`
       display: flex;
@@ -316,6 +339,16 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       visibility: hidden;
       pointer-events: none;
     `,
+    serpMeasureHiddenMobile: css`
+      position: absolute;
+      left: -9999px;
+      top: 0;
+      width: 340px;
+      visibility: hidden;
+      pointer-events: none;
+      font-size: 0.875rem;
+      line-height: 1.5;
+    `,
     serpReportSection: css`
       margin-top: 1rem;
       font-size: 0.875rem;

packages/devtools/src/tabs/seo-tab/serp-preview.tsx

@@ -5,6 +5,7 @@ import { Section, SectionDescription } from '@tanstack/devtools-ui'
 
 const TITLE_MAX_WIDTH_PX = 600
 const DESCRIPTION_MAX_WIDTH_PX = 960
+const DESCRIPTION_MOBILE_MAX_LINES = 3
 const ELLIPSIS = '...'
 
 function truncateToWidth(
@@ -64,12 +65,10 @@ function getSerpFromHead(): SerpData {
   return { title, description, siteName, favicon, url }
 }
 
-type SerpOverflow = {
-  titleOverflow: boolean
-  descriptionOverflow: boolean
-}
-
-function getSerpReports(data: SerpData, overflow: SerpOverflow): string[] {
+function getSerpReportsDesktop(
+  data: SerpData,
+  overflow: { titleOverflow: boolean; descriptionOverflow: boolean },
+): string[] {
   const issues: string[] = []
   if (!data.title?.trim()) {
     issues.push('No title tag set on the page.')
@@ -93,10 +92,42 @@ function getSerpReports(data: SerpData, overflow: SerpOverflow): string[] {
   return issues
 }
 
+function getSerpReportsMobile(
+  data: SerpData,
+  overflow: {
+    titleOverflow: boolean
+    descriptionOverflowMobile: boolean
+  },
+): string[] {
+  const issues: string[] = []
+  if (!data.title?.trim()) {
+    issues.push('No title tag set on the page.')
+  }
+  if (!data.description?.trim()) {
+    issues.push('No meta description set on the page.')
+  }
+  if (!data.favicon) {
+    issues.push('No favicon or icon set on the page.')
+  }
+  if (overflow.titleOverflow) {
+    issues.push(
+      'The title is wider than 600px and it may not be displayed in full length.',
+    )
+  }
+  if (overflow.descriptionOverflowMobile) {
+    issues.push(
+      'Description exceeds the 3-line limit for mobile view. Please shorten your text to fit within 3 lines.',
+    )
+  }
+  return issues
+}
+
 export function SerpPreviewSection() {
   const [serp, setSerp] = createSignal<SerpData>(getSerpFromHead())
   const [titleOverflow, setTitleOverflow] = createSignal(false)
   const [descriptionOverflow, setDescriptionOverflow] = createSignal(false)
+  const [descriptionOverflowMobile, setDescriptionOverflowMobile] =
+    createSignal(false)
   const [displayTitle, setDisplayTitle] = createSignal('')
   const [displayDescription, setDisplayDescription] = createSignal('')
   const [titleMeasureEl, setTitleMeasureEl] = createSignal<
@@ -105,6 +136,9 @@ export function SerpPreviewSection() {
   const [descMeasureEl, setDescMeasureEl] = createSignal<
     HTMLDivElement | undefined
   >(undefined)
+  const [descMeasureMobileEl, setDescMeasureMobileEl] = createSignal<
+    HTMLDivElement | undefined
+  >(undefined)
   const styles = useStyles()
 
   useHeadChanges(() => {
@@ -114,6 +148,7 @@ export function SerpPreviewSection() {
   createEffect(() => {
     const titleEl = titleMeasureEl()
     const descEl = descMeasureEl()
+    const descMobileEl = descMeasureMobileEl()
     const data = serp()
     if (!titleEl || !descEl) return
 
@@ -135,15 +170,33 @@ export function SerpPreviewSection() {
     )
     setDisplayDescription(truncatedDesc)
     setDescriptionOverflow(truncatedDesc !== descText)
+
+    if (descMobileEl && descText) {
+      descMobileEl.textContent = descText
+      const lineHeight = parseFloat(
+        getComputedStyle(descMobileEl).lineHeight,
+      ) || 20
+      const lines = Math.ceil(descMobileEl.scrollHeight / lineHeight)
+      setDescriptionOverflowMobile(lines > DESCRIPTION_MOBILE_MAX_LINES)
+    } else {
+      setDescriptionOverflowMobile(false)
+    }
   })
 
-  const reports = createMemo(() =>
-    getSerpReports(serp(), {
+  const reportsDesktop = createMemo(() =>
+    getSerpReportsDesktop(serp(), {
       titleOverflow: titleOverflow(),
       descriptionOverflow: descriptionOverflow(),
     }),
   )
 
+  const reportsMobile = createMemo(() =>
+    getSerpReportsMobile(serp(), {
+      titleOverflow: titleOverflow(),
+      descriptionOverflowMobile: descriptionOverflowMobile(),
+    }),
+  )
+
   const data = serp()
 
   return (
@@ -189,17 +242,64 @@ export function SerpPreviewSection() {
             aria-hidden="true"
           />
         </div>
+        {reportsDesktop().length > 0 ? (
+          <div class={styles().seoMissingTagsSection}>
+            <strong>Missing issues for Desktop preview:</strong>
+            <ul class={styles().serpErrorList}>
+              <For each={reportsDesktop()}>
+                {(issue) => (
+                  <li class={styles().serpReportItem}>{issue}</li>
+                )}
+              </For>
+            </ul>
+          </div>
+        ) : null}
       </div>
-      {reports().length > 0 ? (
-        <div class={styles().seoMissingTagsSection}>
-          <strong>SERP preview issues:</strong>
-          <ul class={styles().serpErrorList}>
-            <For each={reports()}>
-              {(issue) => <li class={styles().serpReportItem}>{issue}</li>}
-            </For>
-          </ul>
+      <div class={styles().serpPreviewBlock}>
+        <div class={styles().serpPreviewLabel}>Mobile preview</div>
+        <div class={styles().serpSnippetMobile}>
+          <div class={styles().serpSnippetTopRow}>
+            {data.favicon ? (
+              <img
+                src={data.favicon}
+                alt=""
+                class={styles().serpSnippetFavicon}
+              />
+            ) : (
+              <div class={styles().serpSnippetDefaultFavicon} />
+            )}
+            <div class={styles().serpSnippetSiteColumn}>
+              <span class={styles().serpSnippetSiteName}>
+                {data.siteName || data.url}
+              </span>
+              <span class={styles().serpSnippetSiteUrl}>{data.url}</span>
+            </div>
+          </div>
+          <div class={styles().serpSnippetTitle}>
+            {displayTitle() || data.title || 'No title'}
+          </div>
+          <div class={styles().serpSnippetDescMobile}>
+            {displayDescription() || data.description || 'No meta description.'}
+          </div>
+          <div
+            ref={setDescMeasureMobileEl}
+            class={`${styles().serpSnippetDesc} ${styles().serpMeasureHiddenMobile}`}
+            aria-hidden="true"
+          />
         </div>
-      ) : null}
+        {reportsMobile().length > 0 ? (
+          <div class={styles().seoMissingTagsSection}>
+            <strong>Missing issues for Mobile preview:</strong>
+            <ul class={styles().serpErrorList}>
+              <For each={reportsMobile()}>
+                {(issue) => (
+                  <li class={styles().serpReportItem}>{issue}</li>
+                )}
+              </For>
+            </ul>
+          </div>
+        ) : null}
+      </div>
     </Section>
   )
 }