fix(devtools): adjust max-width values in use-styles and enhance SERP preview text handling

This commit updates the max-width values for certain styles in the use-styles.ts file, increasing the desktop max-width to 620px and decreasing the mobile max-width to 328px. Additionally, it introduces new functions in serp-preview.tsx for measuring text width and truncating text based on width and line limits, improving the handling of SERP previews for better SEO representation.

Author: abedshaaban

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

@@ -281,7 +281,7 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       border-radius: 8px;
       padding: 1rem 1.25rem;
       background: ${t(colors.white, colors.darkGray[900])};
-      max-width: 600px;
+      max-width: 620px;
       font-family: ${fontFamily.sans};
       box-shadow: 0 1px 2px ${t('rgba(0,0,0,0.04)', 'rgba(0,0,0,0.08)')};
     `,
@@ -290,7 +290,7 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       border-radius: 8px;
       padding: 1rem 1.25rem;
       background: ${t(colors.white, colors.darkGray[900])};
-      max-width: 380px;
+      max-width: 328px;
       font-family: ${fontFamily.sans};
       box-shadow: 0 1px 2px ${t('rgba(0,0,0,0.04)', 'rgba(0,0,0,0.08)')};
     `,