Skip to content

feat: update font#743

Merged
qdaxb merged 8 commits intowecode-ai:mainfrom
feifei325:feat/update-font
Mar 13, 2026
Merged

feat: update font#743
qdaxb merged 8 commits intowecode-ai:mainfrom
feifei325:feat/update-font

Conversation

@feifei325
Copy link
Copy Markdown
Contributor

@feifei325 feifei325 commented Mar 13, 2026

Summary by CodeRabbit

  • Style
    • Expanded global font stack to include Google Sans, Noto Sans variants, Inter, and others for broader typography support
    • Updated typography and weights across task sidebar, inline edit, and message components for clearer labels and titles
    • Standardized fonts and spacing for markdown, smart text lines, and chat prompts for more consistent message rendering

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Mar 13, 2026

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review
📝 Walkthrough

Walkthrough

Replaces the project's PingFang SC font entry with an expanded font stack (Google Sans Flex, Google Sans, Noto Sans variants, Inter, Noto Sans CJK SC, Microsoft YaHei) and applies consistent typography class additions/adjustments across markdown, chat, and sidebar components; several files receive non-functional formatting tweaks.

Changes

Cohort / File(s) Summary
Font configuration
frontend/src/app/globals.css, frontend/tailwind.config.js
Removed PingFang SC entry and inserted a longer sans stack starting with Google Sans Flex, Google Sans, Noto Sans Simplified Chinese, Noto Sans SC, Inter, Noto Sans CJK SC, Microsoft YaHei, then the existing system fonts.
Typography CSS
frontend/src/app/tasks/tasks.css
Added typography rules for wmde-markdown, markdown-content, enhanced-markdown, smart-text-line, chat-message-prompt (font stack, 16px size, 400 weight, 28px line-height, letter-spacing normal) and .smart-text-line min-height.
Chat / URL renderer updates
frontend/src/components/common/SmartUrlRenderer.tsx, frontend/src/features/tasks/components/message/MessageBubble.tsx
Wrapped rendered text segments with .smart-text-line and .chat-message-prompt wrapper classes; adjusted classNames on prompt/remaining content for typography only (no logic changes).
Sidebar / inline edit typography
frontend/src/features/tasks/components/sidebar/TaskInlineEdit.tsx, frontend/src/features/tasks/components/sidebar/TaskListSection.tsx, frontend/src/features/tasks/components/sidebar/TaskSidebar.tsx
Replaced several text-sm label classes with font-medium text-[#444746] leading-5 (and text-[14px] where applicable); mobile sidebar content wrapped in div.h-full.flex.flex-col.
Minor formatting / JSX tweaks
frontend/src/apis/skillMarket.ts, frontend/src/features/settings/components/SkillListWithScope.tsx, frontend/src/features/settings/components/skills/SkillSearchModal.tsx, frontend/src/features/tasks/components/chat/QuickAccessCards.tsx, frontend/src/features/tasks/components/params/DeviceParamSync.tsx, frontend/src/features/tasks/components/selector/UnifiedRepositorySelector.tsx
Non-functional formatting and minor syntactic edits: multiline JSX/attribute reflow, arrow param simplification, spacing/format changes—no behavioral changes.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

Suggested reviewers

  • Micro66
  • qdaxb

Poem

🐰
Fonts in a hop, fonts in a twirl,
New stacks align, a cleaner swirl.
Smart lines dressed in tidy class,
Sidebars hum as pixels pass.
I nibble joy — design's gentle whirl.

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The pull request title 'feat: update font' is directly related to the main changes in the changeset, which primarily involve updating font families across multiple files and CSS configurations.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
📝 Coding Plan
  • Generate coding plan for human review comments

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 3

🧹 Nitpick comments (2)
frontend/src/app/tasks/tasks.css (1)

56-56: Use complex :not() notation for better CSS compatibility.

Stylelint recommends using a single :not() with comma-separated selectors instead of chained :not() pseudo-classes.

Proposed fix
 .chat-typography .task-sidebar-typography,
-.chat-typography .task-sidebar-typography :not(.font-mono):not(code):not(pre) {
+.chat-typography .task-sidebar-typography :not(.font-mono, code, pre) {
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@frontend/src/app/tasks/tasks.css` at line 56, The selector ".chat-typography
.task-sidebar-typography :not(.font-mono):not(code):not(pre)" uses chained
:not() pseudo-classes which Stylelint flags; replace the chained :not() calls
with a single :not() that contains the comma-separated list of excluded
selectors (e.g., use :not(.font-mono, code, pre)) so the rule targets the same
elements but conforms to the recommended complex :not() notation; update the
selector in tasks.css where ".chat-typography .task-sidebar-typography
:not(.font-mono):not(code):not(pre)" appears.
frontend/src/components/common/SmartUrlRenderer.tsx (1)

272-276: Consider de-duplicating the SmartTextLine base class string.

The same class list is repeated in three return branches; extracting it once will reduce drift in future style tweaks.

♻️ Suggested refactor
 export function SmartTextLine({
   text,
   className = '',
   disabled = false,
   theme = 'light',
 }: SmartTextLineProps) {
+  const baseLineClass = `smart-text-line text-sm break-all min-h-[1.25em] ${className}`
+
   // If empty line, return non-breaking space to preserve line height
   if (!text) {
     return (
-      <div className={`smart-text-line text-sm break-all min-h-[1.25em] ${className}`}>
+      <div className={baseLineClass}>
         {'\u00A0'}
       </div>
     )
   }
@@
   if (detectedUrls.length === 0) {
     return (
-      <div className={`smart-text-line text-sm break-all min-h-[1.25em] ${className}`}>{text}</div>
+      <div className={baseLineClass}>{text}</div>
     )
   }
@@
   return (
-    <div className={`smart-text-line text-sm break-all min-h-[1.25em] ${className}`}>
+    <div className={baseLineClass}>
       {segments}
     </div>
   )
 }

As per coding guidelines: "Extract common logic from ALL code: when discovering logic that should be extracted into shared utilities, do it immediately."

Also applies to: 284-286, 339-343

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@frontend/src/components/common/SmartUrlRenderer.tsx` around lines 272 - 276,
The repeated class string in the SmartUrlRenderer component should be extracted
into a single variable and reused across all return branches to avoid
duplication and drift; create a const (e.g., baseClass = `smart-text-line
text-sm break-all min-h-[1.25em]`) inside the SmartUrlRenderer function and
replace the inline className concatenations (where currently using `className`
and template strings) with `${baseClass} ${className}` (or string concatenation)
in every return branch that renders the empty/placeholder line or other
smart-text lines.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@frontend/src/app/globals.css`:
- Line 81: Remove the unnecessary single quotes around the font name 'Inter' in
the font-family declaration (replace 'Inter' with Inter) so it conforms to
stylelint rules for single-word font names; locate the font-family list in
globals.css where "'Inter'," appears and update it to use Inter without quotes,
then run stylelint to confirm the warning is resolved.

In `@frontend/src/app/tasks/tasks.css`:
- Line 43: The font-family list in tasks.css includes unnecessary single quotes
around the single-word font name 'Inter'; update the font-family entries (the
string containing 'Google Sans Flex', 'Google Sans', 'Noto Sans SC', 'Inter',
...) by removing the quotes around Inter so it reads Inter without quotes, and
apply the same change to the other occurrence referenced (the similar font list
at line 58) to satisfy stylelint.
- Around line 70-74: The rule targeting .chat-typography
.task-sidebar-typography .text-text-primary, .chat-typography
.task-sidebar-typography .sidebar-conversation-title, and .chat-typography
.task-sidebar-typography .sidebar-nav-label uses a hardcoded rgb color and
!important which breaks dark mode; replace the hardcoded value with the
theme-aware CSS variable (e.g. var(--text-primary) or your app’s equivalent like
var(--color-text-primary)) and remove the !important so the theme system can
control text color, ensuring the selector still applies the intended text color
but via the theme variable.

---

Nitpick comments:
In `@frontend/src/app/tasks/tasks.css`:
- Line 56: The selector ".chat-typography .task-sidebar-typography
:not(.font-mono):not(code):not(pre)" uses chained :not() pseudo-classes which
Stylelint flags; replace the chained :not() calls with a single :not() that
contains the comma-separated list of excluded selectors (e.g., use
:not(.font-mono, code, pre)) so the rule targets the same elements but conforms
to the recommended complex :not() notation; update the selector in tasks.css
where ".chat-typography .task-sidebar-typography
:not(.font-mono):not(code):not(pre)" appears.

In `@frontend/src/components/common/SmartUrlRenderer.tsx`:
- Around line 272-276: The repeated class string in the SmartUrlRenderer
component should be extracted into a single variable and reused across all
return branches to avoid duplication and drift; create a const (e.g., baseClass
= `smart-text-line text-sm break-all min-h-[1.25em]`) inside the
SmartUrlRenderer function and replace the inline className concatenations (where
currently using `className` and template strings) with `${baseClass}
${className}` (or string concatenation) in every return branch that renders the
empty/placeholder line or other smart-text lines.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 1dc27d07-7bf0-4031-96dc-4438389e9c12

📥 Commits

Reviewing files that changed from the base of the PR and between 57562f0 and 4a74024.

📒 Files selected for processing (11)
  • frontend/src/app/(tasks)/chat/ChatPageDesktop.tsx
  • frontend/src/app/(tasks)/chat/ChatPageMobile.tsx
  • frontend/src/app/globals.css
  • frontend/src/app/layout.tsx
  • frontend/src/app/tasks/tasks.css
  • frontend/src/components/common/SmartUrlRenderer.tsx
  • frontend/src/features/tasks/components/message/MessageBubble.tsx
  • frontend/src/features/tasks/components/sidebar/TaskInlineEdit.tsx
  • frontend/src/features/tasks/components/sidebar/TaskListSection.tsx
  • frontend/src/features/tasks/components/sidebar/TaskSidebar.tsx
  • frontend/tailwind.config.js

Comment thread frontend/src/app/globals.css Outdated
Comment thread frontend/src/app/tasks/tasks.css Outdated
Comment thread frontend/src/app/tasks/tasks.css Outdated
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
frontend/src/features/tasks/components/chat/QuickAccessCards.tsx (1)

220-255: ⚠️ Potential issue | 🟠 Major

Convert the team card wrapper to a semantic button element for keyboard accessibility.

The quick access team cards are interactive primary elements rendered as clickable <div> elements, which blocks keyboard navigation. The renderMoreButton function (lines 282–398) demonstrates the correct pattern using role="button", tabIndex={0}, and onKeyDown handlers. For consistency and WCAG compliance, switch the renderTeamCard wrapper from <div> to <button type="button"> and add the text-left class to preserve text alignment.

Proposed fix
-      <div
-        onClick={() => !isClicked && handleTeamClick(team)}
+      <button
+        type="button"
+        onClick={() => !isClicked && handleTeamClick(team)}
         className={`
-          group relative flex flex-col justify-center
+          group relative flex flex-col justify-center text-left
           cursor-pointer transition-all duration-200
           ${
             isSelected
               ? 'border-l-[3px] border-l-primary border-y border-r border-border bg-primary/5'
               : 'border border-border bg-base'
           }
           ${isClicked ? 'clicking-card' : ''}
           ${isClicked ? 'pointer-events-none' : ''}
           ${!isSelected ? 'hover:shadow-[0_2px_12px_0_rgba(0,0,0,0.1)]' : ''}
         `}
         style={{
           width: CARD_WIDTH,
           height: 78,
           padding: '8px 12px',
           borderRadius: 20,
           flexShrink: 0,
           flexGrow: 0,
         }}
       >
         <div className="mb-1 w-full">
           <span
             className={`block text-[15px] font-semibold leading-5 truncate ${
               isSelected ? 'text-primary' : 'text-text-primary'
             }`}
           >
             {team.name}
           </span>
         </div>

         <p className="text-xs text-text-muted leading-[18px] line-clamp-1 w-full">{description}</p>
-      </div>
+      </button>
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@frontend/src/features/tasks/components/chat/QuickAccessCards.tsx` around
lines 220 - 255, The team card wrapper is an interactive element currently
rendered as a <div>; replace it with a semantic <button type="button"> in the
renderTeamCard function (keeping the existing onClick handler: onClick={() =>
!isClicked && handleTeamClick(team)}) to restore keyboard accessibility and
default focus behavior, add the text-left class to preserve alignment, and map
the existing visual states (isSelected/isClicked classes and inline styles) to
the button (use disabled={isClicked} instead of pointer-events-none). Ensure any
nested interactive children remain non-button elements to avoid nested
interactive controls.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@frontend/src/features/tasks/components/sidebar/TaskSidebar.tsx`:
- Around line 315-317: The `.sidebar-nav-label` styling depends on an ancestor
`.chat-typography` but TaskSidebar only applies `.task-sidebar-typography`, so
labels lose their 14px/500 styling on many mount points; fix by either wrapping
TaskSidebar's mount points with a `.chat-typography` container or (preferable)
change the CSS rule in frontend/src/app/tasks/tasks.css to target
`.task-sidebar-typography .sidebar-nav-label` (or simply `.sidebar-nav-label`)
instead of `.chat-typography .task-sidebar-typography .sidebar-nav-label`;
update the stylesheet and verify all usages of `.sidebar-nav-label` in
TaskSidebar (the spans using that class) receive the intended font-size and
weight.

---

Outside diff comments:
In `@frontend/src/features/tasks/components/chat/QuickAccessCards.tsx`:
- Around line 220-255: The team card wrapper is an interactive element currently
rendered as a <div>; replace it with a semantic <button type="button"> in the
renderTeamCard function (keeping the existing onClick handler: onClick={() =>
!isClicked && handleTeamClick(team)}) to restore keyboard accessibility and
default focus behavior, add the text-left class to preserve alignment, and map
the existing visual states (isSelected/isClicked classes and inline styles) to
the button (use disabled={isClicked} instead of pointer-events-none). Ensure any
nested interactive children remain non-button elements to avoid nested
interactive controls.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 62d13edb-f1a2-4ef5-a0d0-059ab4b8e246

📥 Commits

Reviewing files that changed from the base of the PR and between 4a74024 and aa8a08f.

📒 Files selected for processing (11)
  • frontend/src/apis/skillMarket.ts
  • frontend/src/app/(tasks)/chat/ChatPageDesktop.tsx
  • frontend/src/app/(tasks)/chat/ChatPageMobile.tsx
  • frontend/src/app/globals.css
  • frontend/src/features/settings/components/SkillListWithScope.tsx
  • frontend/src/features/settings/components/skills/SkillSearchModal.tsx
  • frontend/src/features/tasks/components/chat/QuickAccessCards.tsx
  • frontend/src/features/tasks/components/params/DeviceParamSync.tsx
  • frontend/src/features/tasks/components/selector/UnifiedRepositorySelector.tsx
  • frontend/src/features/tasks/components/sidebar/TaskSidebar.tsx
  • frontend/tailwind.config.js
✅ Files skipped from review due to trivial changes (4)
  • frontend/src/apis/skillMarket.ts
  • frontend/src/features/tasks/components/params/DeviceParamSync.tsx
  • frontend/src/features/settings/components/SkillListWithScope.tsx
  • frontend/src/features/settings/components/skills/SkillSearchModal.tsx
🚧 Files skipped from review as they are similar to previous changes (2)
  • frontend/tailwind.config.js
  • frontend/src/app/(tasks)/chat/ChatPageMobile.tsx

Comment thread frontend/src/features/tasks/components/sidebar/TaskSidebar.tsx Outdated
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

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

♻️ Duplicate comments (2)
frontend/src/app/globals.css (1)

86-86: ⚠️ Potential issue | 🟡 Minor

Fix quoted Inter in global font-family.

At Line 86, Inter should be unquoted to satisfy font-family-name-quotes.

Proposed fix
-    'Inter',
+    Inter,
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@frontend/src/app/globals.css` at line 86, The font-family entry currently
uses a quoted name "'Inter'" which violates the font-family-name-quotes rule;
update the globals.css font-family declaration to use Inter without quotes
(replace 'Inter' with Inter) so the font-family list contains an unquoted Inter
token and still preserves any fallback fonts or commas in the same declaration.
frontend/src/app/tasks/tasks.css (1)

43-43: ⚠️ Potential issue | 🟡 Minor

Remove quotes around Inter in the font stack.

At Line 43, quoting Inter violates your stylelint font-family-name-quotes rule for single-word family names.

Proposed fix
-    'Google Sans Flex', 'Google Sans', 'Noto Sans Simplified Chinese', 'Noto Sans SC', 'Inter',
+    'Google Sans Flex', 'Google Sans', 'Noto Sans Simplified Chinese', 'Noto Sans SC', Inter,
#!/bin/bash
# Verify there are no quoted Inter entries in the touched CSS files.
rg -nP "'Inter'" frontend/src/app/tasks/tasks.css frontend/src/app/globals.css
# Expected: no matches
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@frontend/src/app/tasks/tasks.css` at line 43, A quoted single-word font
family ("Inter") in the font-family declaration contains unnecessary quotes and
violates the stylelint rule; open the font-family line that lists 'Google Sans
Flex', 'Google Sans', 'Noto Sans Simplified Chinese', 'Noto Sans SC', 'Inter'
and remove the quotes around Inter so it reads ... , Noto Sans SC, Inter, ...;
save and re-run linting/verification (e.g., search for "'Inter'" in the updated
CSS) to ensure no quoted occurrences remain.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Duplicate comments:
In `@frontend/src/app/globals.css`:
- Line 86: The font-family entry currently uses a quoted name "'Inter'" which
violates the font-family-name-quotes rule; update the globals.css font-family
declaration to use Inter without quotes (replace 'Inter' with Inter) so the
font-family list contains an unquoted Inter token and still preserves any
fallback fonts or commas in the same declaration.

In `@frontend/src/app/tasks/tasks.css`:
- Line 43: A quoted single-word font family ("Inter") in the font-family
declaration contains unnecessary quotes and violates the stylelint rule; open
the font-family line that lists 'Google Sans Flex', 'Google Sans', 'Noto Sans
Simplified Chinese', 'Noto Sans SC', 'Inter' and remove the quotes around Inter
so it reads ... , Noto Sans SC, Inter, ...; save and re-run linting/verification
(e.g., search for "'Inter'" in the updated CSS) to ensure no quoted occurrences
remain.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 1f30c83b-12b6-476c-b979-e33ebf6fc81e

📥 Commits

Reviewing files that changed from the base of the PR and between aa8a08f and 8856344.

📒 Files selected for processing (6)
  • frontend/src/app/globals.css
  • frontend/src/app/tasks/tasks.css
  • frontend/src/features/tasks/components/sidebar/TaskInlineEdit.tsx
  • frontend/src/features/tasks/components/sidebar/TaskListSection.tsx
  • frontend/src/features/tasks/components/sidebar/TaskSidebar.tsx
  • frontend/tailwind.config.js
🚧 Files skipped from review as they are similar to previous changes (4)
  • frontend/src/features/tasks/components/sidebar/TaskInlineEdit.tsx
  • frontend/src/features/tasks/components/sidebar/TaskListSection.tsx
  • frontend/tailwind.config.js
  • frontend/src/features/tasks/components/sidebar/TaskSidebar.tsx

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

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

♻️ Duplicate comments (1)
frontend/src/app/tasks/tasks.css (1)

43-43: ⚠️ Potential issue | 🟡 Minor

Remove quotes around Inter in the font-family list.

Line 43 still quotes a single-word font family ('Inter'), which violates font-family-name-quotes.

Proposed fix
-    'Google Sans Flex', 'Google Sans', 'Noto Sans Simplified Chinese', 'Noto Sans SC', 'Inter',
+    'Google Sans Flex', 'Google Sans', 'Noto Sans Simplified Chinese', 'Noto Sans SC', Inter,
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@frontend/src/app/tasks/tasks.css` at line 43, The font-family declaration
contains a single-word font quoted as 'Inter' which violates the
font-family-name-quotes rule; edit the font-family list in the CSS rule that
includes 'Google Sans Flex', 'Google Sans', 'Noto Sans Simplified Chinese',
'Noto Sans SC', 'Inter' to remove the quotes around Inter so it becomes unquoted
(Inter) while keeping multi-word names quoted.
🧹 Nitpick comments (1)
frontend/src/app/tasks/tasks.css (1)

37-49: Scope markdown typography overrides to a task/chat wrapper.

This selector group is broad and can override global markdown typography wherever this stylesheet is loaded. Consider prefixing with an existing task/chat container class to avoid page-dependent typography differences.

Example refactor
-.wmde-markdown,
-.markdown-content,
-.enhanced-markdown,
-.smart-text-line,
-.chat-message-prompt {
+.chat-typography .wmde-markdown,
+.chat-typography .markdown-content,
+.chat-typography .enhanced-markdown,
+.chat-typography .smart-text-line,
+.chat-typography .chat-message-prompt {
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@frontend/src/app/tasks/tasks.css` around lines 37 - 49, The current broad
selector group (.wmde-markdown, .markdown-content, .enhanced-markdown,
.smart-text-line, .chat-message-prompt) is overriding global markdown
typography; scope these rules by prefixing them with the task/chat wrapper class
used in the UI (e.g., .task-wrapper or .chat-container) so they only apply
inside that component—update the selector to something like ".task-wrapper
.wmde-markdown, .task-wrapper .markdown-content, .task-wrapper
.enhanced-markdown, .task-wrapper .smart-text-line, .task-wrapper
.chat-message-prompt" (or use the actual wrapper class in the app) and keep the
same declarations to avoid page-wide typography changes and maintain
specificity.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Duplicate comments:
In `@frontend/src/app/tasks/tasks.css`:
- Line 43: The font-family declaration contains a single-word font quoted as
'Inter' which violates the font-family-name-quotes rule; edit the font-family
list in the CSS rule that includes 'Google Sans Flex', 'Google Sans', 'Noto Sans
Simplified Chinese', 'Noto Sans SC', 'Inter' to remove the quotes around Inter
so it becomes unquoted (Inter) while keeping multi-word names quoted.

---

Nitpick comments:
In `@frontend/src/app/tasks/tasks.css`:
- Around line 37-49: The current broad selector group (.wmde-markdown,
.markdown-content, .enhanced-markdown, .smart-text-line, .chat-message-prompt)
is overriding global markdown typography; scope these rules by prefixing them
with the task/chat wrapper class used in the UI (e.g., .task-wrapper or
.chat-container) so they only apply inside that component—update the selector to
something like ".task-wrapper .wmde-markdown, .task-wrapper .markdown-content,
.task-wrapper .enhanced-markdown, .task-wrapper .smart-text-line, .task-wrapper
.chat-message-prompt" (or use the actual wrapper class in the app) and keep the
same declarations to avoid page-wide typography changes and maintain
specificity.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 8c83f23c-14e7-4f86-a7dc-f61f45ace212

📥 Commits

Reviewing files that changed from the base of the PR and between 8856344 and 422218e.

📒 Files selected for processing (1)
  • frontend/src/app/tasks/tasks.css

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 1

♻️ Duplicate comments (2)
frontend/src/app/globals.css (1)

86-86: ⚠️ Potential issue | 🟡 Minor

Remove unnecessary quotes around Inter in the body font stack.

Line 86 still violates font-family-name-quotes for single-word Inter.

Proposed fix
-    'Inter',
+    Inter,
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@frontend/src/app/globals.css` at line 86, The body font-family stack contains
a quoted single-word font name "'Inter'" which violates the
font-family-name-quotes rule; update the font stack (look for the body selector
and the font-family declaration in globals.css, specifically the entry
"'Inter'") to remove the unnecessary quotes so it reads Inter (unquoted) in the
list.
frontend/src/app/tasks/tasks.css (1)

43-44: ⚠️ Potential issue | 🟡 Minor

Remove unnecessary quotes around Inter to satisfy stylelint.

Line 43 still quotes a single-word family name, which triggers font-family-name-quotes.

Proposed fix
-    'Google Sans Flex', 'Google Sans', 'Noto Sans Simplified Chinese', 'Noto Sans SC', 'Inter',
+    'Google Sans Flex', 'Google Sans', 'Noto Sans Simplified Chinese', 'Noto Sans SC', Inter,
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@frontend/src/app/tasks/tasks.css` around lines 43 - 44, In the font-family
declaration that lists 'Google Sans Flex', 'Google Sans', 'Noto Sans Simplified
Chinese', 'Noto Sans SC', 'Inter', 'Noto Sans CJK SC', 'Microsoft YaHei',
'Helvetica Neue', sans-serif, remove the unnecessary quotes around Inter so it
reads Inter (unquoted) to satisfy stylelint's font-family-name-quotes rule;
leave multi-word family names quoted and keep the rest of the list unchanged.
🧹 Nitpick comments (1)
frontend/src/app/tasks/tasks.css (1)

37-53: Unify typography source-of-truth for smart-text-line and chat-message-prompt.

Line 45-Line 53 overrides text-sm/min-h-[1.25em] used in frontend/src/components/common/SmartUrlRenderer.tsx and frontend/src/features/tasks/components/message/MessageBubble.tsx, which makes sizing behavior harder to reason about.

Refactor option (keep shared font stack, avoid utility-class override)
 .wmde-markdown,
 .markdown-content,
-.enhanced-markdown,
-.smart-text-line,
-.chat-message-prompt {
+.enhanced-markdown {
   font-family:
     'Google Sans Flex', 'Google Sans', 'Noto Sans Simplified Chinese', 'Noto Sans SC', Inter,
     'Noto Sans CJK SC', 'Microsoft YaHei', 'Helvetica Neue', sans-serif;
   font-size: 16px;
   font-weight: 400;
   line-height: 28px;
   letter-spacing: normal;
 }
 
 .smart-text-line {
-  min-height: 28px;
+  min-height: 1.25em;
 }
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@frontend/src/app/tasks/tasks.css` around lines 37 - 53, The CSS block sets
font-size/line-height/min-height for .smart-text-line and .chat-message-prompt,
overriding the utility classes (text-sm/min-h-[1.25em]) used by SmartUrlRenderer
and MessageBubble and making sizing inconsistent; fix it by extracting only the
shared font-family into the common selector (keep the Google Sans/Noto/Inter
stack) and remove font-size, font-weight, line-height, letter-spacing and the
min-height from .smart-text-line/.chat-message-prompt so those components can
rely on their utility classes (or explicitly set min-height to 1.25em if
needed); update the tasks.css selector to only declare font-family and ensure
SmartUrlRenderer and MessageBubble continue to use their utility classes for
sizing.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@frontend/src/app/globals.css`:
- Around line 82-88: The CSS lists 'Google Sans Flex', 'Google Sans', and
'Inter' in the font-family stack in globals.css but those fonts are not loaded;
add a loading mechanism so browsers can actually use them. Fix by importing the
fonts using next/font/google (preferred for Next.js) or by adding `@font-face`
rules that point to hosted font files, or by inserting the external CDN <link>
tags into the document head (e.g., in _app or document); ensure the names used
in globals.css exactly match the loaded font-family names ('Google Sans Flex',
'Google Sans', 'Inter') and remove or reorder them if you cannot host/load a
given font so fallbacks (Noto Sans SC, Microsoft YaHei) render as intended.

---

Duplicate comments:
In `@frontend/src/app/globals.css`:
- Line 86: The body font-family stack contains a quoted single-word font name
"'Inter'" which violates the font-family-name-quotes rule; update the font stack
(look for the body selector and the font-family declaration in globals.css,
specifically the entry "'Inter'") to remove the unnecessary quotes so it reads
Inter (unquoted) in the list.

In `@frontend/src/app/tasks/tasks.css`:
- Around line 43-44: In the font-family declaration that lists 'Google Sans
Flex', 'Google Sans', 'Noto Sans Simplified Chinese', 'Noto Sans SC', 'Inter',
'Noto Sans CJK SC', 'Microsoft YaHei', 'Helvetica Neue', sans-serif, remove the
unnecessary quotes around Inter so it reads Inter (unquoted) to satisfy
stylelint's font-family-name-quotes rule; leave multi-word family names quoted
and keep the rest of the list unchanged.

---

Nitpick comments:
In `@frontend/src/app/tasks/tasks.css`:
- Around line 37-53: The CSS block sets font-size/line-height/min-height for
.smart-text-line and .chat-message-prompt, overriding the utility classes
(text-sm/min-h-[1.25em]) used by SmartUrlRenderer and MessageBubble and making
sizing inconsistent; fix it by extracting only the shared font-family into the
common selector (keep the Google Sans/Noto/Inter stack) and remove font-size,
font-weight, line-height, letter-spacing and the min-height from
.smart-text-line/.chat-message-prompt so those components can rely on their
utility classes (or explicitly set min-height to 1.25em if needed); update the
tasks.css selector to only declare font-family and ensure SmartUrlRenderer and
MessageBubble continue to use their utility classes for sizing.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 4050ef41-b546-483f-aab2-8e0e0a24835a

📥 Commits

Reviewing files that changed from the base of the PR and between 422218e and 6839b79.

📒 Files selected for processing (3)
  • frontend/src/app/globals.css
  • frontend/src/app/tasks/tasks.css
  • frontend/tailwind.config.js
🚧 Files skipped from review as they are similar to previous changes (1)
  • frontend/tailwind.config.js

Comment thread frontend/src/app/globals.css Outdated
@qdaxb qdaxb merged commit 64c8013 into wecode-ai:main Mar 13, 2026
17 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants