fix(ai-extension): modify ui style

[James-9696]

Summary by CodeRabbit

• Refactor
  • Reorganized styling for Feature Section and Highlights Section components by consolidating inline styles into dedicated external stylesheets and updating internal CSS class naming conventions for improved code maintainability and organization.

[coderabbitai]

Walkthrough

Two Vue components had their inline LESS styles extracted into separate stylesheet files. Template class names were updated to be more descriptive (e.g., title → feature-title, description → feature-desc). New feature-section.less and highlights-section.less files were created containing the extracted styling rules.

Changes

Cohort / File(s)	Summary
Style Extraction from Components packages/home/src/views/ai-extension-home/components/FeatureSection.vue, packages/home/src/views/ai-extension-home/components/HighlightsSection.vue	Removed inline <style scoped> blocks and replaced with imports of external LESS files. Updated template class names: title → feature-title, description → feature-desc, and removed duplicate description class from highlights section. Preserved responsive media queries and adjusted selectors accordingly.
New Style Sheets packages/home/src/views/ai-extension-home/components/feature-section.less, packages/home/src/views/ai-extension-home/components/highlights-section.less	Created two new LESS files containing extracted styling rules for feature section layout, typography, cards, icons, animations, and responsive overrides previously defined inline in Vue components.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Poem

🐰 Hop, hop, the styles now flow,
From components to files below,
Class names gleam with clarity bright,
Feature-titled, feature-described right! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Title check	❓ Inconclusive	The title 'fix(ai-extension): modify ui style' is vague and generic, using non-descriptive terms like 'modify ui style' that don't convey meaningful information about the specific changes.	Consider using a more descriptive title that specifies the actual changes, such as 'fix(ai-extension): extract component styles to separate LESS files' or 'refactor(ai-extension): move inline styles to external stylesheets'.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix-ai-extension-ui

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (2)

packages/home/src/views/ai-extension-home/components/HighlightsSection.vue (1)

83-83: Simplify the import path.

This file lives in components/, so ../components/highlights-section.less redundantly walks up and back down. Use a sibling-relative path for clarity:

-@import "../components/highlights-section.less";
+@import "./highlights-section.less";

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/home/src/views/ai-extension-home/components/HighlightsSection.vue`
at line 83, The import in HighlightsSection.vue is using a redundant parent
traversal; replace the stylesheet import string "@import
\"../components/highlights-section.less\";" with a sibling-relative path such as
"@import \"./highlights-section.less\";" so the HighlightsSection component
imports its local less file directly.

packages/home/src/views/ai-extension-home/components/highlights-section.less (1)

1-72: Inconsistent indentation; no top-level wrapper selector.

The file uses leading whitespace on every rule (as if nested under a parent) but defines top-level selectors. This is valid LESS but misleading to readers and inconsistent (e.g., Line 34 .highlight-card has 3 leading spaces while others have 2). Consider dedenting to column 0 for clarity, or wrapping everything under a single scope selector (e.g., .highlights-section { ... }) to avoid leaking generic class names like .section-container, .card-icon, and .highlights-grid into other components that import or inherit these styles.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/home/src/views/ai-extension-home/components/highlights-section.less`
around lines 1 - 72, The file has inconsistent leading indentation and top-level
selectors that can leak styles; choose one fix: either dedent all rules to
column 0 (remove the leading spaces before .section-container,
.highlights-section, .highlights-grid, .highlight-card, .card-icon,
.highlights-title, .section-description) to make them clearly top-level, or wrap
every rule inside a single scope selector (e.g., place all current rules as
children of .highlights-section { ... }) so they are namespaced and cannot leak;
ensure consistent indentation and alignment for nested rules like h3 and p
inside .highlight-card and keep the same nesting style across the file.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/home/src/views/ai-extension-home/components/FeatureSection.vue`:
- Line 49: The extracted styles lowered selector specificity so the standalone
.feature-desc rules (used at the rules around the current Line 73 and Line 102)
don't override the base font-size; update those rules to match the original
specificity by changing the selectors to .feature-content .feature-desc (or
otherwise increase specificity to match .feature-content .feature-desc) so their
font-size and responsive overrides take effect, ensuring you modify the rules
that reference .feature-desc in feature-section.less and any corresponding
scoped styles in FeatureSection.vue.

In
`@packages/home/src/views/ai-extension-home/components/highlights-section.less`:
- Around line 34-41: Replace the fixed dimensions on .highlight-card: remove or
replace width: 330px with width: 100% (or omit width entirely so the grid/1fr
can size the card) and replace height: 283px with a min-height (e.g.,
min-height: 283px) so content can grow without clipping; keep
padding/border-radius/transition as-is and ensure .highlight-card sits naturally
inside the grid defined in HighlightsSection.vue so responsive breakpoints can
size cards correctly.

---

Nitpick comments:
In
`@packages/home/src/views/ai-extension-home/components/highlights-section.less`:
- Around line 1-72: The file has inconsistent leading indentation and top-level
selectors that can leak styles; choose one fix: either dedent all rules to
column 0 (remove the leading spaces before .section-container,
.highlights-section, .highlights-grid, .highlight-card, .card-icon,
.highlights-title, .section-description) to make them clearly top-level, or wrap
every rule inside a single scope selector (e.g., place all current rules as
children of .highlights-section { ... }) so they are namespaced and cannot leak;
ensure consistent indentation and alignment for nested rules like h3 and p
inside .highlight-card and keep the same nesting style across the file.

In `@packages/home/src/views/ai-extension-home/components/HighlightsSection.vue`:
- Line 83: The import in HighlightsSection.vue is using a redundant parent
traversal; replace the stylesheet import string "@import
\"../components/highlights-section.less\";" with a sibling-relative path such as
"@import \"./highlights-section.less\";" so the HighlightsSection component
imports its local less file directly.

🪄 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: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: c7bbe4a7-b17b-4472-820c-7b62220cd648

📥 Commits

Reviewing files that changed from the base of the PR and between b87298d and a2d5bc5.

📒 Files selected for processing (4)

• packages/home/src/views/ai-extension-home/components/FeatureSection.vue
• packages/home/src/views/ai-extension-home/components/HighlightsSection.vue
• packages/home/src/views/ai-extension-home/components/feature-section.less
• packages/home/src/views/ai-extension-home/components/highlights-section.less