fix: rebalance mobile certificate scale and spacing

Tune viewport-based scaling to a readable premium preview size on phones, and clean up old CSS scale overrides to prevent conflicting behavior.

Made-with: Cursor

Author: dotsystemsdevs

src/app/globals.css

@@ -596,26 +596,18 @@ a.subpage-inline-mail {
 }
 
 
-/* ── Certificate UI scale (fixed 794x1123 render scaled visually) ── */
-:root { --cert-ui-scale: 0.604; }
-
-@media (max-width: 640px) {
-  /* Scale only the fixed canvas visually; layout stays pixel-locked. */
-  :root { --cert-ui-scale: clamp(0.20, calc((100vw - 148px) / 794), 0.30); }
-}
-
 /* ── Mobile ── */
 
 @media (max-width: 640px) {
   /* Page padding */
   main { padding-left: 16px !important; padding-right: 16px !important; }
   .page-shell-main { padding-top: calc(env(safe-area-inset-top) + 28px); }
 
-  /* Certificate: handled by CSS var --cert-ui-scale */
+  /* Certificate wrapper spacing only; scale is handled in CertificateCard.tsx */
   .certificate-scroll-zone {
     width: 100%;
     margin-left: 0;
-    padding: 14px 28px 0;
+    padding: 12px 20px 0;
     box-sizing: border-box;
     overflow-x: hidden;
   }

src/components/CertificateCard.tsx

@@ -21,7 +21,12 @@ function clamp(value: number, min: number, max: number) {
 
 function getCertificateUiScale(viewportWidth: number) {
   if (viewportWidth > 900) return DESKTOP_CERT_UI_SCALE
-  return clamp((viewportWidth - 170) / CERT_RENDER_WIDTH, 0.18, 0.32)
+  if (viewportWidth <= 640) {
+    // Mobile: keep certificate intentionally smaller but still comfortably readable.
+    return clamp((viewportWidth * 0.76) / CERT_RENDER_WIDTH, 0.30, 0.40)
+  }
+  // Tablet / small desktop: gradual ramp to desktop size.
+  return clamp((viewportWidth * 0.72) / CERT_RENDER_WIDTH, 0.42, DESKTOP_CERT_UI_SCALE)
 }
 
 const SOCIAL_BG = '#E8E8E8'