refactor(devtools): update SERP snippet styles and structure

This commit refactors the SERP snippet styles by renaming the `serpSnippetUrlRow` to `serpSnippetTopRow` and introduces new styles for site name and URL. The structure of the SERP preview is enhanced to better organize the display of site information, improving the overall layout and visual consistency.

Author: abedshaaban

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

@@ -239,21 +239,37 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       max-width: 600px;
       font-family: ${fontFamily.sans};
     `,
-    serpSnippetUrlRow: css`
+    serpSnippetTopRow: css`
       display: flex;
       align-items: center;
-      gap: 6px;
-      margin-bottom: 4px;
-      font-size: 0.875rem;
-      color: ${t(colors.gray[600], colors.gray[400])};
+      gap: 12px;
+      margin-bottom: 8px;
     `,
     serpSnippetFavicon: css`
-      width: 16px;
-      height: 16px;
-      border-radius: 2px;
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
       flex-shrink: 0;
       object-fit: contain;
     `,
+    serpSnippetSiteColumn: css`
+      display: flex;
+      flex-direction: column;
+      gap: 0;
+      min-width: 0;
+    `,
+    serpSnippetSiteName: css`
+      font-size: 0.875rem;
+      color: ${t(colors.gray[900], colors.gray[100])};
+      line-height: 1.4;
+      margin: 0;
+    `,
+    serpSnippetSiteUrl: css`
+      font-size: 0.75rem;
+      color: ${t(colors.gray[500], colors.gray[500])};
+      line-height: 1.4;
+      margin: 0;
+    `,
     serpSnippetTitle: css`
       font-size: 1.25rem;
       font-weight: 400;

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

@@ -65,15 +65,20 @@ export function SerpPreviewSection() {
         results. Data is read from the current page.
       </SectionDescription>
       <div class={styles().serpSnippet}>
-        <div class={styles().serpSnippetUrlRow}>
+        <div class={styles().serpSnippetTopRow}>
           {data.favicon ? (
             <img
               src={data.favicon}
               alt=""
               class={styles().serpSnippetFavicon}
             />
           ) : null}
-          <span>{data.siteName || data.url}</span>
+          <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}>
           {data.title || 'No title'}