fix(website): compare section polish#427
Conversation
…in list 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.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughCSS styling for text wrapping and comparison table layout is refined. The comparison table section heading and native plugins row content are shortened. Generated metadata is updated with incremented test count and current timestamp. ChangesComparison Page Update
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint skipped: no ESLint configuration detected in root package.json. To enable, add Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@website/components/Compare.module.css`:
- Line 21: Replace the deprecated property usage in the .row rule: change the
word-break: break-word declaration to use overflow-wrap: anywhere and set
word-break: normal for the .row selector; locate the existing word-break:
break-word occurrence and update it so the .row grid container uses
overflow-wrap: anywhere (and word-break: normal) to achieve modern,
standards-compliant wrapping behavior.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 9bfcc6d1-b29a-405d-a5ff-a78287995dea
📒 Files selected for processing (4)
website/app/globals.csswebsite/components/Compare.module.csswebsite/components/Compare.tsxwebsite/lib/generated-meta.json
| align-items: center; | ||
| font-size: 14px; | ||
| letter-spacing: 0.12px; | ||
| word-break: break-word; |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Verify deprecated usage and inspect candidate replacements in CSS files
rg -n --type=css 'word-break:\s*break-word' -C2
rg -n --type=css 'overflow-wrap:\s*anywhere|word-break:\s*normal' -C2Repository: rohitg00/agentmemory
Length of output: 356
🏁 Script executed:
fd -type f -name '.stylelintrc*' -o -name 'stylelint.config.*'Repository: rohitg00/agentmemory
Length of output: 235
🏁 Script executed:
cat -n website/components/Compare.module.css | head -30Repository: rohitg00/agentmemory
Length of output: 875
🌐 Web query:
word-break break-word deprecated CSS modern replacement overflow-wrap
💡 Result:
The CSS value word-break: break-word is deprecated and should not be used in modern web development [1][2][3]. Modern Replacement The recommended modern replacement is overflow-wrap: anywhere [4][5][6]. Why the change? 1. Deprecation: The word-break: break-word value was a non-standard, browser-specific extension that was never part of the official CSS specification [4][1]. While it remains supported in many browsers for legacy compatibility, it is officially deprecated [1][2]. 2. Functionality: The overflow-wrap property (formerly known as word-wrap) is the standard way to control how text wraps when it would otherwise overflow its container [5][7][8]. 3. overflow-wrap: anywhere vs. break-word: - overflow-wrap: break-word: This is the standard approach for most use cases. It attempts to wrap text normally and only breaks a word if it is impossible to avoid an overflow [5][7][9]. - overflow-wrap: anywhere: This is a more modern and robust option. It behaves similarly to break-word but also considers the word-breaking opportunity when calculating the minimum intrinsic size of a container, which helps prevent layout issues in flex or grid containers [5][6]. Summary of Usage - For general text wrapping: Use overflow-wrap: break-word [7][9]. - For robust layout control (especially in flex/grid): Use overflow-wrap: anywhere [4][5][6]. - Avoid: word-break: break-all (unless you specifically want to break words at any character, even when it is not necessary) and the deprecated word-break: break-word [1][7][9].
Citations:
- 1: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/word-break
- 2: https://dev.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/word-break
- 3: https://www.scaler.com/topics/css-word-break-property/
- 4: https://stackoverflow.com/questions/47413677/alternative-for-word-break-break-word
- 5: https://runebook.dev/en/docs/css/word-break
- 6: https://stackoverflow.com/questions/17259916/difference-between-overflow-wrap-and-word-break
- 7: https://thelinuxcode.com/css-word-break-vs-overflow-wrap-word-wrap-the-real-difference-between-break-all-and-break-word/
- 8: https://blog.logrocket.com/guide-css-word-wrap-overflow-wrap-word-break/
- 9: https://www.geeksforgeeks.org/css/what-is-the-difference-between-word-break-break-all-versus-word-wrap-break-word-in-css/
🏁 Script executed:
find . -maxdepth 3 -type f \( -name '.stylelintrc*' -o -name 'stylelint.config.*' -o -name 'package.json' \) | head -20Repository: rohitg00/agentmemory
Length of output: 265
🏁 Script executed:
rg -l 'stylelint' --type json --max-count 5Repository: rohitg00/agentmemory
Length of output: 82
🏁 Script executed:
cat -n .stylelintrc.jsonRepository: rohitg00/agentmemory
Length of output: 1690
🏁 Script executed:
web_search
stylelint deprecated word-break property rules standard configRepository: rohitg00/agentmemory
Length of output: 408
🌐 Web query:
stylelint rule deprecated word-break break-word CSS property
💡 Result:
The CSS value word-break: break-word is deprecated [1][2]. While it remains supported in browsers for backward compatibility, it is no longer recommended for use in new projects [3][1][2]. To address this in your project: 1. Recommended Alternative: Use overflow-wrap: anywhere [4][1]. This property is the modern standard for controlling how words break when they would otherwise overflow their container [1]. 2. Stylelint Configuration: Stylelint does not have a specific built-in rule that exclusively targets the deprecation of the word-break: break-word value. However, you can manage this using the following approaches: - declaration-property-value-disallowed-list: You can explicitly disallow this specific value in your Stylelint configuration to prevent its use [5]. { "rules": { "declaration-property-value-disallowed-list": { "word-break": ["break-word"] } } } - stylelint-csstree-validator: For more comprehensive validation of CSS values against current specifications, it is recommended to use the stylelint-csstree-validator plugin [5]. This plugin can help identify deprecated or invalid values that core Stylelint rules might miss [5]. Note that the Stylelint rule property-no-deprecated is intended for deprecated CSS properties (e.g., word-wrap), not for deprecated values of valid properties [6]. Therefore, it will not flag word-break: break-word [6].
Citations:
- 1: https://rocketvalidator.com/html-validation/css-the-value-break-word-is-deprecated
- 2: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/word-break
- 3: https://stackoverflow.com/questions/47413677/alternative-for-word-break-break-word
- 4: https://stackoverflow.com/questions/61686645/what-is-an-alternative-to-word-break-break-word-in-css-since-its-deprecated
- 5: Stylelint did not report
word-break: break-wordas invalid value stylelint/stylelint#2907 - 6: https://stylelint.io/user-guide/rules/property-no-deprecated
Replace deprecated word-break: break-word with overflow-wrap: anywhere.
The word-break: break-word keyword at line 21 is deprecated (non-standard, browser-specific). Since .row is a grid container, use overflow-wrap: anywhere with word-break: normal for proper modern behavior.
💡 Suggested patch
.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;
+ overflow-wrap: anywhere;
+ word-break: normal;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| word-break: break-word; | |
| .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; | |
| overflow-wrap: anywhere; | |
| word-break: normal; | |
| } |
🧰 Tools
🪛 Stylelint (17.11.0)
[error] 21-21: Deprecated keyword "break-word" for property "word-break" (declaration-property-value-keyword-no-deprecated)
(declaration-property-value-keyword-no-deprecated)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@website/components/Compare.module.css` at line 21, Replace the deprecated
property usage in the .row rule: change the word-break: break-word declaration
to use overflow-wrap: anywhere and set word-break: normal for the .row selector;
locate the existing word-break: break-word occurrence and update it so the .row
grid container uses overflow-wrap: anywhere (and word-break: normal) to achieve
modern, standards-compliant wrapping behavior.
…lish (#432) Patch bump per the established rule: additive surface only. OpenAI provider is a new optional surface that activates only when OPENAI_API_KEY is set, gated by OPENAI_API_KEY_FOR_LLM. Telemetry project_name pin is pure observability metadata. Compare polish is docs/website only. PRs included since v0.9.16: #307 — OpenAI-compatible LLM provider (universal adapter for OpenAI, Azure OpenAI auto-detected by hostname, DeepSeek, SiliconFlow, vLLM, LM Studio, Ollama). Plus the maintainer- pushed Azure detection + fetch timeout + README scope hint follow-ups. Closes #185, #232, #312, supersedes #240. #426 — pin worker telemetry project_name #427 — Compare section polish (title + native plugins cell + grid) Files bumped (9): package.json, packages/mcp/package.json, plugin/.claude-plugin/plugin.json, plugin/.codex-plugin/plugin.json, src/version.ts, src/types.ts, src/functions/export-import.ts, test/export-import.test.ts, CHANGELOG.md
1 participant
Summary
Compare section was looking cramped after the v0.9.16 changes landed:
AGENTMEMORY VS. THE FIELD.title was redundant (eyebrow already readsVS.) and wrapped ugly — FIELD. dangled on its own line at most desktop widths. Shortened toVS. THE FIELD.Plus addedtext-wrap: balanceglobally to.section-titleso any wrapping title breaks at a balanced point.NATIVE PLUGINScell value was6 (Claude/Codex/OpenClaw/Hermes/pi/OpenHuman)— 49 chars stuffed into a ~180px grid column → forced multi-line wrap that looked cramped. The agent names are already visible in the Agents grid two sections above; cell now reads just6.Row grid: agentmemory column bumped from 1fr → 1.3fr (label trimmed 1.6fr → 1.4fr) so cells like
YES (APACHE-2.0)and2 (Qdrant, Neo4j)have breathing room. Addedword-break: break-wordas a safety net and 24px horizontal padding so cells don't kiss the section edge.Test plan
npm run buildcleanSummary by CodeRabbit
Style
Chores