ux(cert): redesign readme badge row

Made-with: Cursor

Author: dotsystemsdevs

src/app/globals.css

@@ -399,6 +399,44 @@ button {
   max-width: 100%;
 }
 
+/* Certificate view: README badge block (cleaner layout) */
+.cert-readme-badge-wrap {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.cert-readme-badge {
+  width: min(520px, 100%);
+  border: 2px solid var(--c-border);
+  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
+  padding: 14px 16px;
+}
+
+.cert-readme-badge-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.cert-readme-badge-preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1 1 240px;
+}
+
+.cert-readme-copy-btn {
+  flex: 0 0 auto;
+}
+
+.cert-readme-caption {
+  margin: 10px 0 0;
+  text-align: left;
+}
+
 .subpage-faq-cta {
   display: inline-flex;
   align-items: center;
@@ -717,6 +755,16 @@ a.subpage-inline-mail {
     width: 100%;
   }
 
+  /* Certificate badge: stack cleanly on mobile */
+  .cert-readme-badge-top {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 10px;
+  }
+  .cert-readme-badge-preview {
+    justify-content: flex-start;
+  }
+
 }
 
 .cert-mobile-hint {

src/components/CertificateCard.tsx

@@ -632,41 +632,36 @@ export default function CertificateCard({ cert, onReset }: Props) {
           const shieldsUrl = `https://img.shields.io/badge/%F0%9F%AA%A6%20declared%20dead-view%20certificate-555?style=for-the-badge&labelColor=cc0000`
           const badgeMd = `[![commitmentissues](${shieldsUrl})](${repoUrl})`
           return (
-            <div style={{ width: '100%', display: 'flex', justifyContent: 'center' }}>
-              <div className="readme-badge-block record-card" style={{ border: '2px solid #1a1a1a', boxShadow: '0 1px 4px rgba(0,0,0,0.05)', padding: '14px 16px', width: '100%' }}>
-                <div className="readme-badge-row">
-                  <div style={{ display: 'flex', justifyContent: 'center', flex: '1 1 260px' }}>
+            <div className="cert-readme-badge-wrap">
+              <div className="cert-readme-badge record-card">
+                <div className="cert-readme-badge-top">
+                  <div className="cert-readme-badge-preview">
                     {/* eslint-disable-next-line @next/next/no-img-element */}
                     <img
                       src={shieldsUrl}
                       alt="README badge preview"
                       loading="lazy"
                       decoding="async"
-                      style={{ height: '28px', width: 'auto', display: 'block', flexShrink: 0 }}
+                      style={{ height: '28px', width: 'auto', display: 'block' }}
                     />
                   </div>
                   <button
                     type="button"
-                    onClick={async () => { try { await navigator.clipboard.writeText(badgeMd); setBadgeCopied(true); setTimeout(() => setBadgeCopied(false), 2000) } catch { /* ignore */ } }}
-                    className="readme-copy-btn"
-                    style={{
-                      fontFamily: MONO, fontSize: '10px', fontWeight: 700, letterSpacing: '0.06em',
-                      padding: '8px 14px', minHeight: '36px',
-                      background: badgeCopied ? '#2d7a3c' : 'transparent',
-                      color: badgeCopied ? '#fff' : '#4a4440',
-                      border: `2px solid ${badgeCopied ? '#2d7a3c' : '#cec6bb'}`,
-                      cursor: 'pointer',
-                      transition: 'all 0.15s',
-                      whiteSpace: 'nowrap',
-                      flexShrink: 0,
+                    onClick={async () => {
+                      try {
+                        await navigator.clipboard.writeText(badgeMd)
+                        setBadgeCopied(true)
+                        setTimeout(() => setBadgeCopied(false), 2000)
+                      } catch {
+                        // ignore
+                      }
                     }}
-                    onMouseEnter={e => { if (!badgeCopied) { e.currentTarget.style.borderColor = '#1a1a1a'; e.currentTarget.style.color = '#1a1a1a' } }}
-                    onMouseLeave={e => { if (!badgeCopied) { e.currentTarget.style.borderColor = '#cec6bb'; e.currentTarget.style.color = '#4a4440' } }}
+                    className="readme-copy-btn cert-readme-copy-btn"
                   >
                     {badgeCopied ? '✓ copied!' : '⎘ copy to readme'}
                   </button>
                 </div>
-                <p className="readme-badge-caption" style={{ fontFamily: MONO, textAlign: 'left' }}>
+                <p className="readme-badge-caption cert-readme-caption" style={{ fontFamily: MONO }}>
                   ↻ paste once — updates automatically
                 </p>
               </div>