feat: update font#743
Conversation
|
Note Reviews pausedIt 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 Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughReplaces 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
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
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 |
There was a problem hiding this comment.
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
📒 Files selected for processing (11)
frontend/src/app/(tasks)/chat/ChatPageDesktop.tsxfrontend/src/app/(tasks)/chat/ChatPageMobile.tsxfrontend/src/app/globals.cssfrontend/src/app/layout.tsxfrontend/src/app/tasks/tasks.cssfrontend/src/components/common/SmartUrlRenderer.tsxfrontend/src/features/tasks/components/message/MessageBubble.tsxfrontend/src/features/tasks/components/sidebar/TaskInlineEdit.tsxfrontend/src/features/tasks/components/sidebar/TaskListSection.tsxfrontend/src/features/tasks/components/sidebar/TaskSidebar.tsxfrontend/tailwind.config.js
There was a problem hiding this comment.
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 | 🟠 MajorConvert 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. TherenderMoreButtonfunction (lines 282–398) demonstrates the correct pattern usingrole="button",tabIndex={0}, andonKeyDownhandlers. For consistency and WCAG compliance, switch therenderTeamCardwrapper from<div>to<button type="button">and add thetext-leftclass 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
📒 Files selected for processing (11)
frontend/src/apis/skillMarket.tsfrontend/src/app/(tasks)/chat/ChatPageDesktop.tsxfrontend/src/app/(tasks)/chat/ChatPageMobile.tsxfrontend/src/app/globals.cssfrontend/src/features/settings/components/SkillListWithScope.tsxfrontend/src/features/settings/components/skills/SkillSearchModal.tsxfrontend/src/features/tasks/components/chat/QuickAccessCards.tsxfrontend/src/features/tasks/components/params/DeviceParamSync.tsxfrontend/src/features/tasks/components/selector/UnifiedRepositorySelector.tsxfrontend/src/features/tasks/components/sidebar/TaskSidebar.tsxfrontend/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
There was a problem hiding this comment.
♻️ Duplicate comments (2)
frontend/src/app/globals.css (1)
86-86:⚠️ Potential issue | 🟡 MinorFix quoted
Interin global font-family.At Line 86,
Intershould be unquoted to satisfyfont-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 | 🟡 MinorRemove quotes around
Interin the font stack.At Line 43, quoting
Interviolates your stylelintfont-family-name-quotesrule 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
📒 Files selected for processing (6)
frontend/src/app/globals.cssfrontend/src/app/tasks/tasks.cssfrontend/src/features/tasks/components/sidebar/TaskInlineEdit.tsxfrontend/src/features/tasks/components/sidebar/TaskListSection.tsxfrontend/src/features/tasks/components/sidebar/TaskSidebar.tsxfrontend/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
There was a problem hiding this comment.
♻️ Duplicate comments (1)
frontend/src/app/tasks/tasks.css (1)
43-43:⚠️ Potential issue | 🟡 MinorRemove quotes around
Interin the font-family list.Line 43 still quotes a single-word font family (
'Inter'), which violatesfont-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
📒 Files selected for processing (1)
frontend/src/app/tasks/tasks.css
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (2)
frontend/src/app/globals.css (1)
86-86:⚠️ Potential issue | 🟡 MinorRemove unnecessary quotes around
Interin the body font stack.Line 86 still violates
font-family-name-quotesfor single-wordInter.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 | 🟡 MinorRemove unnecessary quotes around
Interto 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 forsmart-text-lineandchat-message-prompt.Line 45-Line 53 overrides
text-sm/min-h-[1.25em]used infrontend/src/components/common/SmartUrlRenderer.tsxandfrontend/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
📒 Files selected for processing (3)
frontend/src/app/globals.cssfrontend/src/app/tasks/tasks.cssfrontend/tailwind.config.js
🚧 Files skipped from review as they are similar to previous changes (1)
- frontend/tailwind.config.js
Summary by CodeRabbit