Fixations

Author: voltsparx

docs/website/css/components/development.css

@@ -133,8 +133,8 @@
   color: var(--txt);
   font-size: 0.92rem;
   line-height: 1.55;
-  overflow-wrap: anywhere;
-  word-break: break-word;
+  overflow-wrap: break-word;
+  word-break: normal;
 }
 
 .dev-snapshot-value {
@@ -160,7 +160,7 @@
   font-family: var(--mono);
   font-size: 0.68rem;
   line-height: 1.55;
-  overflow-wrap: anywhere;
+  overflow-wrap: break-word;
 }
 
 .dev-meta-list strong,
@@ -169,12 +169,50 @@
   color: var(--txt);
   font-size: 13px;
   text-align: right;
-  overflow-wrap: anywhere;
-  word-break: break-word;
+  overflow-wrap: break-word;
+  word-break: normal;
   min-width: 0;
   max-width: 100%;
 }
 
+.dev-radar-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.dev-radar-card {
+  min-width: 0;
+  border: 1px solid var(--border2);
+  border-radius: 12px;
+  background: rgba(255, 26, 26, 0.04);
+  padding: 13px 14px;
+}
+
+.dev-radar-card-wide {
+  grid-column: 1 / -1;
+}
+
+.dev-radar-label {
+  display: block;
+  color: var(--txt3);
+  font-family: var(--mono);
+  font-size: 0.66rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin-bottom: 8px;
+}
+
+.dev-radar-value {
+  display: block;
+  color: var(--txt);
+  font-size: 0.88rem;
+  line-height: 1.55;
+  overflow-wrap: break-word;
+  word-break: normal;
+}
+
 .dev-profile-head {
   display: grid;
   grid-template-columns: 64px 1fr;
@@ -390,13 +428,6 @@
   font-size: 0.7rem;
 }
 
-.dev-pill-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin-bottom: 16px;
-}
-
 .raw-link-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
@@ -649,6 +680,10 @@ body.raw-viewer-open {
     grid-template-columns: 1fr;
   }
 
+  .dev-radar-grid {
+    grid-template-columns: 1fr;
+  }
+
   .raw-viewer-window {
     width: min(94vw, 94vw);
     max-height: 84vh;

docs/website/js/features/development-feed.js

@@ -218,10 +218,19 @@ const DevelopmentFeed = (() => {
     const latestTag = Array.isArray(tags) && tags[0] ? tags[0].name : "No tags yet";
 
     node.innerHTML = `
-      <div class="dev-pill-row">
-        <span class="flag-pill">Default Branch: ${DocsHelpers.escapeHtml(repo.default_branch || "main")}</span>
-        <span class="flag-pill">Latest Tag: ${DocsHelpers.escapeHtml(latestTag)}</span>
-        <span class="flag-pill">Release: ${DocsHelpers.escapeHtml(latestRelease)}</span>
+      <div class="dev-radar-grid">
+        <div class="dev-radar-card">
+          <span class="dev-radar-label">Default Branch</span>
+          <strong class="dev-radar-value">${DocsHelpers.escapeHtml(repo.default_branch || "main")}</strong>
+        </div>
+        <div class="dev-radar-card">
+          <span class="dev-radar-label">Latest Tag</span>
+          <strong class="dev-radar-value">${DocsHelpers.escapeHtml(latestTag)}</strong>
+        </div>
+        <div class="dev-radar-card dev-radar-card-wide">
+          <span class="dev-radar-label">Release</span>
+          <strong class="dev-radar-value">${DocsHelpers.escapeHtml(latestRelease)}</strong>
+        </div>
       </div>
       <div class="dev-meta-list">
         <div><span>CI</span><strong><a href="${DocsData.github.repoUrl}/actions/workflows/ci.yml" target="_blank" rel="noopener noreferrer">Workflow</a></strong></div>