Files
rohitg00__agentmemory/website/components/Compare.module.css
Rohit Ghumare 6f228bd8c0 fix(website): compare section polish (#427)
User caught the section looking bad on the live merge:

1. Title "AGENTMEMORY VS. THE FIELD." was redundant (eyebrow already
   reads VS.) and wrapped ugly with FIELD. dangling on its own line.
   Shortened to "VS. THE FIELD." Eyebrow + title now read together
   as "VS. · VS. THE FIELD." which is still on-brand and fits one
   line at every viewport above 480px.

2. Added `text-wrap: balance` to .section-title globally so titles
   that DO need to wrap break at a balanced point instead of leaving
   orphan words. Affects every section's heading; net win — already
   verified other titles (Features TWELVE THINGS, CommandCenter TWO
   UIs, Agents SIX FIRST-PARTY, etc) render correctly.

3. Comparison NATIVE PLUGINS cell value was "6 (Claude/Codex/
   OpenClaw/Hermes/pi/OpenHuman)" — that's 49 chars stuffed into a
   ~180px grid column, forcing multi-line wrap that looked cramped.
   Cell now reads just "6"; the agent names are already visible in
   the dedicated Agents grid two sections above.

4. Row grid: bumped agentmemory column from 1fr → 1.3fr at the
   expense of the label column (1.6fr → 1.4fr) so the longer cell
   values (95.2%, YES (APACHE-2.0), 2 (Qdrant, Neo4j)) have
   breathing room. Added `word-break: break-word` as a safety net
   for future entries. Padded the row 24px horizontally so cells
   don't kiss the section edge.

Build clean.
2026-05-16 10:43:30 +01:00

64 lines
1.1 KiB
CSS

.compare {
padding: 96px 0;
background: var(--iron);
border-top: 1px solid var(--charcoal);
border-bottom: 1px solid var(--charcoal);
}
.table {
max-width: 1100px;
margin: 0 auto;
padding: 0 40px;
}
.row {
display: grid;
grid-template-columns: 1.4fr 1.3fr 1fr 1fr 1fr;
gap: 16px;
padding: 20px 24px;
border-bottom: 1px solid var(--charcoal);
align-items: center;
font-size: 14px;
letter-spacing: 0.12px;
word-break: break-word;
}
.row > span {
color: var(--steel);
text-transform: uppercase;
}
.row > span:first-child {
color: var(--white);
font-weight: 700;
}
.head {
border-bottom-color: var(--gold);
}
.head span {
font-size: 11px;
letter-spacing: 0.96px;
color: var(--ash) !important;
font-weight: 400 !important;
}
.head .mine {
color: var(--gold) !important;
}
.mine {
color: var(--gold) !important;
font-weight: 700 !important;
}
@media (max-width: 1024px) {
.row {
grid-template-columns: 1.4fr 1fr;
gap: 8px 16px;
}
.row span:nth-child(n + 3) {
display: none;
}
.head span:nth-child(n + 3) {
display: none;
}
}
@media (max-width: 640px) {
.table {
padding: 0 20px;
}
}