feat: modify the style of the official website#123
Conversation
|
Warning Rate limit exceeded
Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 50 minutes and 16 seconds. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
WalkthroughStandardizes typography and spacing across multiple home view components by removing letter-spacing declarations, updating color from lighter grays to Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (5)
packages/home/src/views/next-sdks-home/common.less (1)
54-63:⚠️ Potential issue | 🟡 MinorAbsolute
line-height: 74pxwon't scale at responsive breakpoints.Same concern as in the sibling
common.lessfiles:.titlegets a hard 74px line-height, but the 1024px/768px/480px overrides only changefont-size(28px/22px), producing a disproportionate leading on small screens. Consider a relativeline-height(e.g.,1.4) or addingline-heightoverrides in each@mediablock.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/home/src/views/next-sdks-home/common.less` around lines 54 - 63, The .title rule sets a fixed line-height: 74px which won’t scale with the smaller font-size overrides for .title (and .title-us); change this to a relative line-height (e.g., 1.4) or add explicit line-height overrides in the existing media queries that target the 1024px/768px/480px breakpoints so the leading scales with the reduced font-sizes for .title and .title-us.packages/home/src/views/next-sdks-home/components/StepItem.vue (2)
244-253:⚠️ Potential issue | 🟡 MinorActive-state border/margin offset is off by 1px.
border-left: 3pxcombined withmargin-left: -2pxshifts content 2px left but adds a 3px border, so the right edge moves 1px compared with the non-active state, causing a subtle horizontal jiggle when a step becomes active. Usemargin-left: -3pxto fully absorb the border width.Proposed fix
&.step-active { border-left: 3px solid `#1476ff`; - margin-left: -2px; + margin-left: -3px;🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/home/src/views/next-sdks-home/components/StepItem.vue` around lines 244 - 253, The active-state styling for StepItem uses .step-active with border-left: 3px and margin-left: -2px which leaves a 1px offset; change the margin-left to -3px so the added 3px border is fully absorbed and prevents the 1px horizontal shift—update the .step-active rule (and keep .step-index and .step-title color/background adjustments) to use margin-left: -3px.
83-93:⚠️ Potential issue | 🔴 CriticalBroken
watchsource — watcher never fires onisActivechanges.
watch(props.isActive, cb)passes the plain boolean value of the prop, which is not a valid watch source in Vue 3. Watch sources must be refs, reactive objects, or getter functions. Passing a plain prop value directly will not trigger the watcher on prop changes, sostep.valueis never re-parsed andPrism.highlightAll()is never re-run when a step becomes active. Remove theconsole.logdebug line as well.Proposed fix
-watch(props.isActive, (newVal) => { - console.log(newVal); - if (newVal) { +watch( + () => props.isActive, + (newVal) => { + if (!newVal) return; step.value = parseMarkdown(); nextTick(() => { if (typeof window !== "undefined" && window.Prism) { window.Prism.highlightAll(); } }); - } -}); + } +);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/home/src/views/next-sdks-home/components/StepItem.vue` around lines 83 - 93, The watcher is using the plain prop value so it never fires; change the watch source to a ref or getter and remove the console.log. Replace watch(props.isActive, ...) with either watch(() => props.isActive, (newVal) => { ... }) or create a ref via const isActive = toRef(props, "isActive") and use watch(isActive, (newVal) => { ... }); keep the body that sets step.value = parseMarkdown() and the nextTick block that calls window.Prism.highlightAll(), and remove the console.log(newVal) line.packages/home/src/views/tiny-vue-home/common.less (1)
110-120:⚠️ Potential issue | 🟠 MajorDuplicate
line-heightmakes the new74pxvalue dead code.Stylelint flags this: the new
line-height: 74pxat line 111 is immediately overridden by the pre-existingline-height: 1.5at line 115, so the intended change takes no effect here while it does in the siblingai-extension-home/common.lessandnext-sdks-home/common.less(which set only74px). Decide which one is correct and drop the other — likely remove the1.5to match the other two files.Proposed fix (matching sibling files)
.title { line-height: 74px; font-size: 52px; font-weight: 600; color: `#191919`; - line-height: 1.5; padding-bottom: 32px;Also note that a fixed 74px line-height won't scale with the responsive
.titlefont-size (28px / 22px) set later in the file, so consider addingline-heightoverrides in those@mediablocks as well.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/home/src/views/tiny-vue-home/common.less` around lines 110 - 120, The .title block contains two conflicting line-height declarations: remove the duplicate relative line-height declaration (line-height: 1.5) from the .title rule so the fixed line-height: 74px takes effect (matching ai-extension-home and next-sdks-home), and if you want responsive scaling also add appropriate line-height overrides for .title in the existing `@media` queries that later adjust the font-size; reference the .title and .title-us selectors when making these changes.packages/home/src/views/ai-extension-home/common.less (1)
42-50:⚠️ Potential issue | 🟡 MinorFixed
line-height: 74pxdoesn't scale with responsive.titlesizes.At the 1024px/768px/480px breakpoints
.titleshrinks to 28px/22px, but the absoluteline-height: 74pxdeclared here is never overridden, yielding a ~2.6× line-height on small screens and visible extra vertical whitespace around titles. Consider a relative value or responsive overrides.Proposed fix
.title { - line-height: 74px; + line-height: 1.4; font-size: 52px;Or keep 74px only for the desktop size and add
line-heightoverrides inside each@mediablock alongside thefont-sizechanges.🤖 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/common.less` around lines 42 - 50, The fixed line-height: 74px on the .title block causes excessive vertical spacing when the title font-size is reduced at responsive breakpoints; update .title to use a relative/unitless line-height (e.g., 1.2–1.4) or add matching line-height overrides inside each existing `@media` block that reduces .title font-size, and also ensure .title-us inherits or overrides appropriately (update rules for .title and .title-us in common.less).
🧹 Nitpick comments (3)
packages/home/src/views/next-sdks-home/index.vue (1)
325-329: Redundant overrides duplicated fromcommon.less.
color:#595959`` andfont-size: 16pxare already defined for `.btn.secondary` in `next-sdks-home/common.less` (lines 122 & 124). You can drop these two declarations here and keep only the `padding` override.Proposed cleanup
.btn.secondary { - color: `#595959`; - font-size: 16px; padding: 12px 24px; }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/home/src/views/next-sdks-home/index.vue` around lines 325 - 329, The .btn.secondary rule duplicates properties already set in next-sdks-home/common.less; remove the redundant declarations "color: `#595959`" and "font-size: 16px" from the .btn.secondary block in index.vue and keep only the padding override so the rule only contains "padding: 12px 24px".packages/home/src/views/next-sdks-home/components/StepItem.vue (1)
344-344:rgba(245, 245, 245, 1)is equivalent to the previous#f5f5f5.With alpha
1this is the same color as the prior hex literal. If the intent was just a style refresh, consider reverting to#f5f5f5for readability; if alpha transparency was intended, use a value < 1.- background: rgba(245, 245, 245, 1); + background: `#f5f5f5`;🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/home/src/views/next-sdks-home/components/StepItem.vue` at line 344, In StepItem.vue locate the CSS rule that sets "background: rgba(245, 245, 245, 1);" and either revert it to the original hex literal "#f5f5f5" for readability or, if you intended transparency, change the alpha to a value < 1 (e.g., rgba(245,245,245,0.8)); update the background declaration in the StepItem.vue component accordingly.packages/home/src/views/next-sdks-home/common.less (1)
146-279:@keyframesand@mediablocks are nested inside.next-sdks-home.The closing brace for
.next-sdks-homeis at line 280, so@keyframes fadeInUp/bounce(146–171) and all@mediarules (176–279) live inside the root selector. LESS will hoist@keyframesto top-level and scope@mediarules under.next-sdks-home, so this is behaviorally fine, but it diverges from the structure used intiny-vue-home/common.less(media queries inside the root block, keyframes outside) andai-extension-home/common.less. Consider pulling@keyframesout of the scope block for consistency and to reduce the risk of accidental scope bugs if the selector is renamed later.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/home/src/views/next-sdks-home/common.less` around lines 146 - 279, The `@keyframes` rules (fadeInUp and bounce) are currently nested inside the .next-sdks-home block; move the `@keyframes` fadeInUp and `@keyframes` bounce declarations out of the .next-sdks-home scope to the top-level of the file (above or below the root selector) so they aren’t scoped/hoisted by LESS, while leaving the existing `@media` rules (the responsive blocks) where they are to preserve the current structure; ensure you remove the keyframes from inside .next-sdks-home and keep their exact names (fadeInUp, bounce) unchanged.
🤖 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/next-sdks-home/common.less`:
- Around line 14-16: The utility class .pad-t40 was changed to 50px creating a
name/value mismatch and inconsistency with .pad-b40 and other usages; revert
.pad-t40 to padding-top: 40px to restore consistency, and if additional top
spacing is required create a new class (e.g., .pad-t50) or add spacing at the
specific call sites; ensure any new .pad-t50 is added consistently wherever
.pad-t40 was intentionally intended to be larger and update usages accordingly.
In `@packages/home/src/views/next-sdks-home/components/FeatureSection.vue`:
- Around line 58-62: The .feature-text .title rule reduces font-size to 36px but
inherits an absolute line-height: 74px from common.less, causing excessive
vertical spacing; update the .feature-text .title selector (and any responsive
overrides that change font-size) to explicitly set an appropriate line-height
(e.g., matching visual scale such as 1.1–1.3 or a px value like 40px) to
override common.less and remove the extra whitespace.
---
Outside diff comments:
In `@packages/home/src/views/ai-extension-home/common.less`:
- Around line 42-50: The fixed line-height: 74px on the .title block causes
excessive vertical spacing when the title font-size is reduced at responsive
breakpoints; update .title to use a relative/unitless line-height (e.g.,
1.2–1.4) or add matching line-height overrides inside each existing `@media` block
that reduces .title font-size, and also ensure .title-us inherits or overrides
appropriately (update rules for .title and .title-us in common.less).
In `@packages/home/src/views/next-sdks-home/common.less`:
- Around line 54-63: The .title rule sets a fixed line-height: 74px which won’t
scale with the smaller font-size overrides for .title (and .title-us); change
this to a relative line-height (e.g., 1.4) or add explicit line-height overrides
in the existing media queries that target the 1024px/768px/480px breakpoints so
the leading scales with the reduced font-sizes for .title and .title-us.
In `@packages/home/src/views/next-sdks-home/components/StepItem.vue`:
- Around line 244-253: The active-state styling for StepItem uses .step-active
with border-left: 3px and margin-left: -2px which leaves a 1px offset; change
the margin-left to -3px so the added 3px border is fully absorbed and prevents
the 1px horizontal shift—update the .step-active rule (and keep .step-index and
.step-title color/background adjustments) to use margin-left: -3px.
- Around line 83-93: The watcher is using the plain prop value so it never
fires; change the watch source to a ref or getter and remove the console.log.
Replace watch(props.isActive, ...) with either watch(() => props.isActive,
(newVal) => { ... }) or create a ref via const isActive = toRef(props,
"isActive") and use watch(isActive, (newVal) => { ... }); keep the body that
sets step.value = parseMarkdown() and the nextTick block that calls
window.Prism.highlightAll(), and remove the console.log(newVal) line.
In `@packages/home/src/views/tiny-vue-home/common.less`:
- Around line 110-120: The .title block contains two conflicting line-height
declarations: remove the duplicate relative line-height declaration
(line-height: 1.5) from the .title rule so the fixed line-height: 74px takes
effect (matching ai-extension-home and next-sdks-home), and if you want
responsive scaling also add appropriate line-height overrides for .title in the
existing `@media` queries that later adjust the font-size; reference the .title
and .title-us selectors when making these changes.
---
Nitpick comments:
In `@packages/home/src/views/next-sdks-home/common.less`:
- Around line 146-279: The `@keyframes` rules (fadeInUp and bounce) are currently
nested inside the .next-sdks-home block; move the `@keyframes` fadeInUp and
`@keyframes` bounce declarations out of the .next-sdks-home scope to the top-level
of the file (above or below the root selector) so they aren’t scoped/hoisted by
LESS, while leaving the existing `@media` rules (the responsive blocks) where they
are to preserve the current structure; ensure you remove the keyframes from
inside .next-sdks-home and keep their exact names (fadeInUp, bounce) unchanged.
In `@packages/home/src/views/next-sdks-home/components/StepItem.vue`:
- Line 344: In StepItem.vue locate the CSS rule that sets "background: rgba(245,
245, 245, 1);" and either revert it to the original hex literal "#f5f5f5" for
readability or, if you intended transparency, change the alpha to a value < 1
(e.g., rgba(245,245,245,0.8)); update the background declaration in the
StepItem.vue component accordingly.
In `@packages/home/src/views/next-sdks-home/index.vue`:
- Around line 325-329: The .btn.secondary rule duplicates properties already set
in next-sdks-home/common.less; remove the redundant declarations "color:
`#595959`" and "font-size: 16px" from the .btn.secondary block in index.vue and
keep only the padding override so the rule only contains "padding: 12px 24px".
🪄 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: 15edf6c3-fc5e-4b3e-9ad7-09e7fa31db2b
📒 Files selected for processing (8)
packages/home/src/views/ai-extension-home/common.lesspackages/home/src/views/ai-extension-home/components/HeroSection.vuepackages/home/src/views/next-sdks-home/common.lesspackages/home/src/views/next-sdks-home/components/FeatureSection.vuepackages/home/src/views/next-sdks-home/components/HeroSection.vuepackages/home/src/views/next-sdks-home/components/StepItem.vuepackages/home/src/views/next-sdks-home/index.vuepackages/home/src/views/tiny-vue-home/common.less
💤 Files with no reviewable changes (2)
- packages/home/src/views/ai-extension-home/components/HeroSection.vue
- packages/home/src/views/next-sdks-home/components/HeroSection.vue
2 participants
Summary by CodeRabbit