Skip to content

full width on the features in mobile#487

Merged
Kitenite merged 5 commits intomainfrom
update-features-section-mobile
Dec 23, 2025
Merged

full width on the features in mobile#487
Kitenite merged 5 commits intomainfrom
update-features-section-mobile

Conversation

@Kitenite
Copy link
Copy Markdown
Collaborator

@Kitenite Kitenite commented Dec 23, 2025

  • full width on the features in mobile

Summary by CodeRabbit

  • Style
    • Improved responsive layouts and visual tweaks for feature demos: adjusted content alignment and padding across breakpoints, added rounded overlay styling, and refined sizing behavior.
    • Prevented layout collapse by adding minimum width constraints to demo containers and improved horizontal spacing and button text wrapping.

✏️ Tip: You can customize this high-level summary in your review settings.

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Dec 23, 2025

Walkthrough

Updates responsive layout and spacing for three marketing demo components: FeatureDemo gains a min-height baseline and adjusted overlay alignment/rounding; IsolationDemo and ParallelExecutionDemo add a min-width constraint. No logic, exports, or runtime control flow changed.

Changes

Cohort / File(s) Summary
FeatureDemo responsive styling
apps/marketing/src/app/components/FeaturesSection/components/FeatureDemo/FeatureDemo.tsx
Replaced previous aspect-4/3 with min-h-[300px] lg:aspect-4/3; changed container rounding/overflow classes; MeshGradient background now receives rounded; adjusted overlay alignment from centered to justify-start on small and sm:justify-center on larger screens; reduced small-screen padding to p-4, increased to sm:p-6 on larger screens.
Demo min-width adjustments
apps/marketing/src/app/components/FeaturesSection/components/IsolationDemo/IsolationDemo.tsx, apps/marketing/src/app/components/FeaturesSection/components/ParallelExecutionDemo/ParallelExecutionDemo.tsx
Added min-w-[500px] to the outer motion.div in both components to prevent narrow rendering; added small spacing and whitespace-nowrap tweaks in IsolationDemo header actions. No functional or export changes.

Sequence Diagram(s)

(omitted — changes are styling/layout-only and do not introduce new multi-component control flow)

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

Pre-merge checks and finishing touches

❌ Failed checks (2 warnings)
Check name Status Explanation Resolution
Description check ⚠️ Warning The description is minimal and incomplete, lacking required sections like Related Issues, Type of Change, Testing, and Additional Notes from the repository template. Complete the pull request description by filling in the required template sections including Type of Change (Refactor), Testing steps, and any relevant issue links to provide full context for reviewers.
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. You can run @coderabbitai generate docstrings to improve docstring coverage.
✅ Passed checks (1 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly summarizes the main change: making features display full width on mobile devices, which aligns with the layout modifications shown in the file changes.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch update-features-section-mobile

📜 Recent review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2874bf0 and 14418f0.

📒 Files selected for processing (2)
  • apps/marketing/src/app/components/FeaturesSection/components/FeatureDemo/FeatureDemo.tsx
  • apps/marketing/src/app/components/FeaturesSection/components/IsolationDemo/IsolationDemo.tsx
🚧 Files skipped from review as they are similar to previous changes (2)
  • apps/marketing/src/app/components/FeaturesSection/components/IsolationDemo/IsolationDemo.tsx
  • apps/marketing/src/app/components/FeaturesSection/components/FeatureDemo/FeatureDemo.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (7)
  • GitHub Check: Deploy API
  • GitHub Check: Deploy Docs
  • GitHub Check: Deploy Admin
  • GitHub Check: Deploy Marketing
  • GitHub Check: Deploy Web
  • GitHub Check: Test
  • GitHub Check: Build

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

🧹 Nitpick comments (1)
apps/marketing/src/app/components/FeaturesSection/components/FeatureDemo/FeatureDemo.tsx (1)

19-19: LGTM! Responsive behavior implemented correctly.

The change successfully achieves the PR objective by removing the fixed aspect ratio on mobile while maintaining it on larger screens. The min-h-[300px] provides a sensible baseline, and lg:aspect-4/3 preserves the desktop layout.

Optional: Consider using a className utility function

For better maintainability when dealing with conditional classes, consider using clsx or a cn() utility:

+import { cn } from "@/lib/utils"; // or import clsx
+
 export function FeatureDemo({
 	children,
 	colors,
 	className = "",
 }: FeatureDemoProps) {
 	return (
 		<div
-			className={`relative w-full min-h-[300px] lg:aspect-4/3 rounded-2xl overflow-hidden ${className}`}
+			className={cn(
+				"relative w-full min-h-[300px] lg:aspect-4/3 rounded-2xl overflow-hidden",
+				className
+			)}
 		>

This approach better handles edge cases like empty strings or duplicate classes.

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 65d6f97 and 0fda37a.

📒 Files selected for processing (1)
  • apps/marketing/src/app/components/FeaturesSection/components/FeatureDemo/FeatureDemo.tsx
🧰 Additional context used
📓 Path-based instructions (6)
**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Avoid using any type in TypeScript - maintain type safety unless absolutely necessary

Files:

  • apps/marketing/src/app/components/FeaturesSection/components/FeatureDemo/FeatureDemo.tsx
**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (AGENTS.md)

Run Biome for formatting, linting, import organization, and safe fixes at the root level using bun run lint:fix

Files:

  • apps/marketing/src/app/components/FeaturesSection/components/FeatureDemo/FeatureDemo.tsx
**/{components,features}/**/[!.]*.tsx

📄 CodeRabbit inference engine (AGENTS.md)

Organize project structure with one folder per component: ComponentName/ComponentName.tsx with index.ts barrel export

Files:

  • apps/marketing/src/app/components/FeaturesSection/components/FeatureDemo/FeatureDemo.tsx
**/{components,features}/**/*.{ts,tsx,test.ts,test.tsx,stories.tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Co-locate component dependencies (utils, hooks, constants, config, tests, stories) next to the file using them

Files:

  • apps/marketing/src/app/components/FeaturesSection/components/FeatureDemo/FeatureDemo.tsx
**/*.{tsx,css}

📄 CodeRabbit inference engine (AGENTS.md)

Use React + TailwindCSS v4 + shadcn/ui for UI development

Files:

  • apps/marketing/src/app/components/FeaturesSection/components/FeatureDemo/FeatureDemo.tsx
**/{components,features}/**/*.tsx

📄 CodeRabbit inference engine (AGENTS.md)

**/{components,features}/**/*.tsx: Nest components in parent's components/ folder if used only once, promote to highest shared parent's components/ if used 2+ times
Use one component per file - do not combine multiple components in a single file

Files:

  • apps/marketing/src/app/components/FeaturesSection/components/FeatureDemo/FeatureDemo.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)
  • GitHub Check: Deploy Marketing
  • GitHub Check: Deploy API
  • GitHub Check: Deploy Web
  • GitHub Check: Deploy Docs
  • GitHub Check: Deploy Admin
  • GitHub Check: Build

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Dec 23, 2025

🧹 Preview Cleanup Complete

The following preview resources have been cleaned up:

Service Status
Neon Database (Neon)

Thank you for your contribution! 🎉


Preview resources have been processed for cleanup

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

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 0fda37a and 2874bf0.

📒 Files selected for processing (3)
  • apps/marketing/src/app/components/FeaturesSection/components/FeatureDemo/FeatureDemo.tsx
  • apps/marketing/src/app/components/FeaturesSection/components/IsolationDemo/IsolationDemo.tsx
  • apps/marketing/src/app/components/FeaturesSection/components/ParallelExecutionDemo/ParallelExecutionDemo.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
  • apps/marketing/src/app/components/FeaturesSection/components/FeatureDemo/FeatureDemo.tsx
🧰 Additional context used
📓 Path-based instructions (6)
**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Avoid using any type in TypeScript - maintain type safety unless absolutely necessary

Files:

  • apps/marketing/src/app/components/FeaturesSection/components/ParallelExecutionDemo/ParallelExecutionDemo.tsx
  • apps/marketing/src/app/components/FeaturesSection/components/IsolationDemo/IsolationDemo.tsx
**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (AGENTS.md)

Run Biome for formatting, linting, import organization, and safe fixes at the root level using bun run lint:fix

Files:

  • apps/marketing/src/app/components/FeaturesSection/components/ParallelExecutionDemo/ParallelExecutionDemo.tsx
  • apps/marketing/src/app/components/FeaturesSection/components/IsolationDemo/IsolationDemo.tsx
**/{components,features}/**/[!.]*.tsx

📄 CodeRabbit inference engine (AGENTS.md)

Organize project structure with one folder per component: ComponentName/ComponentName.tsx with index.ts barrel export

Files:

  • apps/marketing/src/app/components/FeaturesSection/components/ParallelExecutionDemo/ParallelExecutionDemo.tsx
  • apps/marketing/src/app/components/FeaturesSection/components/IsolationDemo/IsolationDemo.tsx
**/{components,features}/**/*.{ts,tsx,test.ts,test.tsx,stories.tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Co-locate component dependencies (utils, hooks, constants, config, tests, stories) next to the file using them

Files:

  • apps/marketing/src/app/components/FeaturesSection/components/ParallelExecutionDemo/ParallelExecutionDemo.tsx
  • apps/marketing/src/app/components/FeaturesSection/components/IsolationDemo/IsolationDemo.tsx
**/*.{tsx,css}

📄 CodeRabbit inference engine (AGENTS.md)

Use React + TailwindCSS v4 + shadcn/ui for UI development

Files:

  • apps/marketing/src/app/components/FeaturesSection/components/ParallelExecutionDemo/ParallelExecutionDemo.tsx
  • apps/marketing/src/app/components/FeaturesSection/components/IsolationDemo/IsolationDemo.tsx
**/{components,features}/**/*.tsx

📄 CodeRabbit inference engine (AGENTS.md)

**/{components,features}/**/*.tsx: Nest components in parent's components/ folder if used only once, promote to highest shared parent's components/ if used 2+ times
Use one component per file - do not combine multiple components in a single file

Files:

  • apps/marketing/src/app/components/FeaturesSection/components/ParallelExecutionDemo/ParallelExecutionDemo.tsx
  • apps/marketing/src/app/components/FeaturesSection/components/IsolationDemo/IsolationDemo.tsx
🧠 Learnings (3)
📚 Learning: 2025-12-18T23:19:10.415Z
Learnt from: CR
Repo: superset-sh/superset PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-18T23:19:10.415Z
Learning: Applies to **/{components,features}/**/[!.]*.tsx : Organize project structure with one folder per component: ComponentName/ComponentName.tsx with index.ts barrel export

Applied to files:

  • apps/marketing/src/app/components/FeaturesSection/components/ParallelExecutionDemo/ParallelExecutionDemo.tsx
  • apps/marketing/src/app/components/FeaturesSection/components/IsolationDemo/IsolationDemo.tsx
📚 Learning: 2025-12-18T23:19:10.415Z
Learnt from: CR
Repo: superset-sh/superset PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-18T23:19:10.415Z
Learning: Applies to **/*.{tsx,css} : Use React + TailwindCSS v4 + shadcn/ui for UI development

Applied to files:

  • apps/marketing/src/app/components/FeaturesSection/components/ParallelExecutionDemo/ParallelExecutionDemo.tsx
📚 Learning: 2025-12-18T23:19:10.415Z
Learnt from: CR
Repo: superset-sh/superset PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-18T23:19:10.415Z
Learning: Applies to **/{components,features}/**/*.tsx : Use one component per file - do not combine multiple components in a single file

Applied to files:

  • apps/marketing/src/app/components/FeaturesSection/components/ParallelExecutionDemo/ParallelExecutionDemo.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)
  • GitHub Check: Deploy API
  • GitHub Check: Deploy Marketing
  • GitHub Check: Deploy Docs
  • GitHub Check: Deploy Admin
  • GitHub Check: Deploy Web
  • GitHub Check: Build

@Kitenite Kitenite merged commit 35a1a80 into main Dec 23, 2025
12 checks passed
@Kitenite Kitenite deleted the update-features-section-mobile branch December 23, 2025 06:23
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.

1 participant