style: group README badge preview with unified block styling

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Author: dotsystemsdevs

src/app/globals.css

@@ -342,6 +342,27 @@ button {
   opacity: 0.88;
 }
 
+/* README badge preview block — shields badge + copy button grouped */
+.readme-badge-block {
+  margin-top: 8px;
+  padding: 14px;
+  border: 1px solid #e5dcc8;
+  background: rgba(255, 255, 255, 0.28);
+}
+.readme-badge-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.readme-badge-caption {
+  font-size: 10px;
+  color: #b0a89e;
+  letter-spacing: 0.04em;
+  margin: 10px 0 0;
+}
+
 .subpage-faq-cta {
   display: inline-flex;
   align-items: center;

src/components/CertificateCard.tsx

@@ -632,26 +632,23 @@ 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={{ marginTop: '6px' }}>
-              {/* 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', marginBottom: '10px' }}
-              />
-              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '12px' }}>
-                <p style={{ fontFamily: MONO, fontSize: '10px', color: '#b0a89e', margin: 0, letterSpacing: '0.04em' }}>
-                  ↻ paste once — updates automatically
-                </p>
+            <div className="readme-badge-block">
+              <div className="readme-badge-row">
+                {/* 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 }}
+                />
                 <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: '44px',
+                    padding: '8px 14px', minHeight: '36px',
                     background: badgeCopied ? '#2d7a3c' : 'transparent',
                     color: badgeCopied ? '#fff' : '#4a4440',
                     border: `2px solid ${badgeCopied ? '#2d7a3c' : '#cec6bb'}`,
@@ -666,6 +663,9 @@ export default function CertificateCard({ cert, onReset }: Props) {
                   {badgeCopied ? '✓ copied!' : '⎘ copy to readme'}
                 </button>
               </div>
+              <p className="readme-badge-caption" style={{ fontFamily: MONO }}>
+                ↻ paste once — updates automatically
+              </p>
             </div>
           )
         })()}

src/components/ReadmeBadge.tsx

@@ -40,8 +40,8 @@ export default function ReadmeBadge({ username }: Props) {
       </div>
 
       {/* Copy row */}
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '12px', marginTop: '10px' }}>
-        <p style={{ fontFamily: MONO, fontSize: '10px', color: '#b0a89e', margin: 0, letterSpacing: '0.04em' }}>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '12px', marginTop: '4px' }}>
+        <p className="readme-badge-caption" style={{ fontFamily: MONO, margin: 0, textAlign: 'left' }}>
           ↻ paste once — updates automatically
         </p>
         <button
@@ -53,7 +53,7 @@ export default function ReadmeBadge({ username }: Props) {
             fontWeight: 700,
             letterSpacing: '0.06em',
             padding: '8px 14px',
-            minHeight: '44px',
+            minHeight: '36px',
             background: copied ? '#2d7a3c' : 'transparent',
             color: copied ? '#fff' : '#4a4440',
             border: `2px solid ${copied ? '#2d7a3c' : '#cec6bb'}`,