feat(devtools): enhance SERP preview layout with new styles

This commit introduces new styles for the SERP preview section, including a dedicated block for the preview and a label for better organization. The layout improvements enhance the visual presentation of the desktop preview, ensuring a clearer display of the site name, URL, title, and description.

Author: abedshaaban

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

@@ -231,6 +231,15 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       padding: 0 10px 8px 10px;
       font-size: 0.875rem;
     `,
+    serpPreviewBlock: css`
+      margin-bottom: 1.5rem;
+    `,
+    serpPreviewLabel: css`
+      font-size: 0.875rem;
+      font-weight: 600;
+      margin-bottom: 0.5rem;
+      color: ${t(colors.gray[700], colors.gray[300])};
+    `,
     serpSnippet: css`
       border: 1px solid ${t(colors.gray[200], colors.gray[800])};
       border-radius: 8px;

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

@@ -152,40 +152,43 @@ export function SerpPreviewSection() {
         See how your title tag and meta description may look in Google search
         results. Data is read from the current page.
       </SectionDescription>
-      <div class={styles().serpSnippet}>
-        <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 class={styles().serpPreviewBlock}>
+        <div class={styles().serpPreviewLabel}>Desktop preview</div>
+        <div class={styles().serpSnippet}>
+          <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
+            ref={setTitleMeasureEl}
+            class={`${styles().serpSnippetTitle} ${styles().serpMeasureHidden}`}
+            aria-hidden="true"
+          />
+          <div class={styles().serpSnippetDesc}>
+            {displayDescription() || data.description || 'No meta description.'}
+          </div>
+          <div
+            ref={setDescMeasureEl}
+            class={`${styles().serpSnippetDesc} ${styles().serpMeasureHidden}`}
+            aria-hidden="true"
+          />
         </div>
-        <div class={styles().serpSnippetTitle}>
-          {displayTitle() || data.title || 'No title'}
-        </div>
-        <div
-          ref={setTitleMeasureEl}
-          class={`${styles().serpSnippetTitle} ${styles().serpMeasureHidden}`}
-          aria-hidden="true"
-        />
-        <div class={styles().serpSnippetDesc}>
-          {displayDescription() || data.description || 'No meta description.'}
-        </div>
-        <div
-          ref={setDescMeasureEl}
-          class={`${styles().serpSnippetDesc} ${styles().serpMeasureHidden}`}
-          aria-hidden="true"
-        />
       </div>
       {reports().length > 0 ? (
         <div class={styles().seoMissingTagsSection}>