Skip to content

fix(website): compare section polish #427

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rohitg00 merged 1 commit into from
May 16, 2026
Merged

fix(website): compare section polish #427

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions website/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,7 @@ button {
letter-spacing: -0.01em;
margin: 0 0 24px;
text-transform: uppercase;
text-wrap: balance;
}
.section-lede {
max-width: 680px;
Expand Down
5 changes: 3 additions & 2 deletions website/components/Compare.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,14 @@
}
.row {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
grid-template-columns: 1.4fr 1.3fr 1fr 1fr 1fr;
gap: 16px;
padding: 20px 0;
padding: 20px 24px;
border-bottom: 1px solid var(--charcoal);
align-items: center;
font-size: 14px;
letter-spacing: 0.12px;
word-break: break-word;
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot May 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

🧩 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' -C2

Repository: 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 -30

Repository: 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:

🏁 Script executed:

find . -maxdepth 3 -type f \( -name '.stylelintrc*' -o -name 'stylelint.config.*' -o -name 'package.json' \) | head -20

Repository: rohitg00/agentmemory

Length of output: 265

🏁 Script executed:

rg -l 'stylelint' --type json --max-count 5

Repository: rohitg00/agentmemory

Length of output: 82

🏁 Script executed:

cat -n .stylelintrc.json

Repository: rohitg00/agentmemory

Length of output: 1690

🏁 Script executed:

web_search
stylelint deprecated word-break property rules standard config

Repository: 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:

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.

Suggested change
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.

}
.row > span {
color: var(--steel);
Expand Down
4 changes: 2 additions & 2 deletions website/components/Compare.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const ROWS = [
["REST ENDPOINTS", "121", "—", "—", "—"],
["MCP TOOLS", "51", "12", "18", "9"],
["AUTO-HOOKS", "12", "0", "0", "0"],
["NATIVE PLUGINS", "6 (Claude/Codex/OpenClaw/Hermes/pi/OpenHuman)", "—", "—", "—"],
["NATIVE PLUGINS", "6", "—", "—", "—"],
["OPEN SOURCE", "YES (APACHE-2.0)", "YES", "YES", "YES"],
];

Expand All @@ -16,7 +16,7 @@ export function Compare() {
<header className="section-head">
<span className="section-eyebrow">VS.</span>
<h2 id="cmp-title" className="section-title">
AGENTMEMORY VS. THE FIELD.
VS. THE FIELD.
</h2>
<p className="section-lede">
NUMBERS STRAIGHT FROM THE LONGMEMEVAL-S BENCHMARK AND EACH PROJECT&apos;S
Expand Down
4 changes: 2 additions & 2 deletions website/lib/generated-meta.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,6 @@
"mcpTools": 51,
"hooks": 12,
"restEndpoints": 121,
"testsPassing": 975,
"generatedAt": "2026-05-16T09:00:42.889Z"
"testsPassing": 977,
"generatedAt": "2026-05-16T09:33:03.891Z"
}