637 website isnt mobile friendly

[yamcodes]

Closes #637

Summary by CodeRabbit

• Style

  • Improved responsive layout and typography on the home page hero for better mobile/desktop balance.
  • Refined label visibility and alignment in compatibility components for small and larger screens.
  • Adjusted media block behavior and button group sizing to improve visual consistency.

• Documentation

  • Reformatted README for clearer presentation and updated quickstart links to ArkEnv-specific doc paths.

• Tests

  • Made a homepage test selector more specific to target the intended link.

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

[changeset-bot]

⚠️ No Changeset found

Latest commit: ab0f429

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
arkenv	Ready	Preview, Comment	Dec 26, 2025 9:29pm

[coderabbitai]

Walkthrough

Responsive layout and presentation updates across the website: the homepage hero was restructured into a flexible two-column layout with adjusted typography and button alignment; a compatibility component label was made hidden on small screens and resized on larger viewports; video-demo aspect-ratio handling moved to an outer element; documentation links and README formatting were updated; a test locator was narrowed.

Changes

Cohort / File(s)	Summary
Homepage hero layout apps/www/app/(home)/page.tsx	Reworked hero from a fixed-gap narrow column to a responsive two-column structure; reduced outer gap (lg:gap-20 → lg:gap-12), adjusted margins, tightened heading scale (responsive 4xl → sm:6xl), constrained widths, added lg:flex-[1.4] to emphasize text, and refined button group alignment.
Video demo layout apps/www/components/page/video-demo.tsx	Moved aspect-ratio handling to the outer button via inline style using getAspectRatio(WIDTH, HEIGHT); inner container changed to flex-1 and removed explicit aspect-ratio inline style.
Compatibility label responsiveness apps/www/components/page/compatibility-rails.tsx	Replaced always-visible label span with one hidden on small screens and visible at sm+; set fixed w-[85px], left-aligned text, and adjusted color classes (gray-500 / dark-gray-400).
Docs quickstart links apps/www/content/docs/arkenv/quickstart.mdx	Updated internal doc links to ArkEnv-specific paths (/docs/arkenv/...) across TIP/NOTE references, cards, and accordion links; no behavioral changes.
README formatting packages/arkenv/README.md	Presentation-only edits: converted sections to blockquotes, emphasis, and stylized bullets; no semantic changes.
Test locator tightening tooling/playwright-www/tests/homepage.test.ts	Narrowed ArkType link locator by appending .first() to the existing anchor locator to target the first matching element.

Sequence Diagram(s)

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

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• Update VideoDemo component dimensions and improve layout responsiveness #283: Related changes to VideoDemo layout and aspect-ratio handling.
• Change hero visual from 3D to 2.5D #621: Related homepage hero layout adjustments and media swaps.
• Refactor VideoDemo component for improved responsiveness and styling #276: Overlapping edits to VideoDemo aspect-ratio and container sizing.

Suggested labels

tests

Poem

🐇 I hopped through CSS and JSX with glee,
Tweaked headings, buttons — now they fit free.
Hidden labels peek at larger screens,
Videos snug in their new-sized scenes.
A joyful thump — the site looks tidy! 🎉

Pre-merge checks and finishing touches

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	Some changes appear tangential: documentation formatting in README.md, internal doc link updates, and video aspect ratio refactoring are not directly related to fixing mobile overflow issues.	Consider separating documentation and video aspect ratio changes into distinct PRs focused on issue #637's primary mobile layout constraints.
Docstring Coverage	⚠️ Warning	Docstring coverage is 33.33% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title directly relates to the main objective of fixing mobile-unfriendly layout issues on the website homepage.
Linked Issues check	✅ Passed	All code changes address the mobile friendliness requirements: hero layout responsiveness, button alignment constraints, and media visibility adjustments fix the stated overflow issues.

✨ 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 637-website-isnt-mobile-friendly

---

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 4589335 and ab0f429.

📒 Files selected for processing (4)

• apps/www/components/page/compatibility-rails.tsx
• apps/www/components/page/video-demo.tsx
• apps/www/content/docs/arkenv/quickstart.mdx
• tooling/playwright-www/tests/homepage.test.ts

🧰 Additional context used

📓 Path-based instructions (6)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/coding-guidelines.mdc)

**/*.{ts,tsx}: Prefer type over interface for type definitions in TypeScript
Use TypeScript 5.1+ features when appropriate
Leverage const type parameters for better inference in TypeScript
Use JSDoc comments for public APIs
Use tabs for indentation (configured in Biome)
Use double quotes for strings (configured in Biome)
Organize imports automatically (Biome handles this)
Avoid explicit types when TypeScript can infer them (noInferrableTypes error)
Use as const where appropriate for immutable values (useAsConstAssertion error)
Don't reassign function parameters (noParameterAssign error)
Place default parameters last in function signatures (useDefaultParameterLast error)
Always initialize enum values (useEnumInitializers error)
Declare one variable per statement (useSingleVarDeclarator error)
Avoid unnecessary template literals (noUnusedTemplateLiteral error)
Prefer Number.parseInt over global parseInt (useNumberNamespace error)
Use kebab-case for TypeScript filenames (e.g., create-env.ts)
Use camelCase for function names (e.g., createEnv)
Use PascalCase for type names (e.g., ArkEnvError)
Use UPPER_SNAKE_CASE for environment variables and constants
Include examples in JSDoc comments when helpful for public APIs
Document complex type logic with JSDoc comments
Use ArkEnvError for environment variable validation errors
Provide clear, actionable error messages that include the variable name and expected type

**/*.{ts,tsx}: Use createEnv(schema) function (or default import as arkenv) to create validated environment objects in TypeScript
Use built-in validators (host, port, url, email) from ArkEnv when available instead of custom ArkType schemas
Provide default values for optional environment variables using ArkType syntax (e.g., 'boolean = false')
Use ArkEnvError for environment variable errors instead of generic Error types
For environment schema definition, use ArkType string literal syntax for enumerated values (e.g., "'deve...

Files:

• tooling/playwright-www/tests/homepage.test.ts
• apps/www/components/page/compatibility-rails.tsx
• apps/www/components/page/video-demo.tsx

**/*.test.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/coding-guidelines.mdc)

Co-locate tests with components: Component.tsx next to Component.test.tsx

**/*.test.{ts,tsx}: Use Vitest for unit and integration tests
Test individual functions, components, and hooks in isolation with mocked dependencies in unit tests
Unit tests should focus on individual function logic and edge cases, component rendering and props, error handling and validation, and type checking
Unit tests should execute in less than 100ms per test
Mock external dependencies (clipboard, network, etc.) in unit tests
Co-locate unit test files with source files using naming convention: source file → test file (e.g., create-env.ts → create-env.test.ts)
Test component behavior, not aesthetics, and focus on what users can do and what the component guarantees through its API
Test component public API (props, events, and component contract), user behavior (clicks, typing, focus, keyboard, ARIA), state transitions, accessibility, and side effects in component tests
Do not test pure styling or CSS classes, library internals (Radix/shadcn), implementation details (hooks, setState, private variables), or visual variants in component tests
Use Testing Library with user-event for real user simulation in component tests
Query by role, name, label, and text (accessibility first) in component tests
Use beforeEach/afterEach for cleanup, not beforeAll/afterAll when possible
Keep tests fast, deterministic, and parallelizable
Mock at component boundaries (network, time, context)

Create unit tests with .test.ts or .test.tsx suffix located alongside source files, testing individual functions and components in isolation with mocked dependencies

Files:

• tooling/playwright-www/tests/homepage.test.ts

tooling/playwright-www/**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/test-patterns.mdc)

tooling/playwright-www/**/*.{ts,tsx}: Use Playwright for end-to-end tests to validate real browser behavior across Chromium, Firefox, and WebKit
End-to-end tests should focus on user-facing behavior, not implementation details

Files:

• tooling/playwright-www/tests/homepage.test.ts

**/*.{test,integration.test}.{ts,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

**/*.{test,integration.test}.{ts,tsx}: Use Vitest's describe/it structure for all test files
Test both success and failure cases in unit and integration tests
Mock process.env in unit tests to test different environment variable scenarios

Files:

• tooling/playwright-www/tests/homepage.test.ts

**/*.tsx

📄 CodeRabbit inference engine (.cursor/rules/coding-guidelines.mdc)

Use self-closing JSX elements (useSelfClosingElements error)

Files:

• apps/www/components/page/compatibility-rails.tsx
• apps/www/components/page/video-demo.tsx

apps/www/**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (apps/www/.cursor/rules/posthog-integration.mdc)

apps/www/**/*.{ts,tsx,js,jsx}: If using TypeScript, use an enum to store feature flag names. If using JavaScript, store feature flag names as strings to an object declared as a constant to simulate an enum. Use UPPERCASE_WITH_UNDERSCORE naming convention for enum/const object members.
If a custom property for a person or event is referenced in two or more files or two or more callsites in the same file, use an enum or const object with UPPERCASE_WITH_UNDERSCORE naming convention, similar to feature flags.

Files:

• apps/www/components/page/compatibility-rails.tsx
• apps/www/components/page/video-demo.tsx

🧠 Learnings (15)

📓 Common learnings

Learnt from: yamcodes
Repo: yamcodes/arkenv PR: 616
File: apps/www/app/(home)/page.tsx:18-18
Timestamp: 2025-12-25T21:14:15.510Z
Learning: In projects using fumadocs-ui's HomeLayout component, the HomeLayout itself renders a top-level <main> element with id="nd-home-layout", so page components should not include their own <main> wrapper to avoid duplicate main landmarks.

📚 Learning: 2025-12-12T13:20:01.954Z

Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .cursor/rules/test-patterns.mdc:0-0
Timestamp: 2025-12-12T13:20:01.954Z
Learning: Applies to tooling/playwright-www/**/*.{ts,tsx} : Use Playwright for end-to-end tests to validate real browser behavior across Chromium, Firefox, and WebKit

Applied to files:

• tooling/playwright-www/tests/homepage.test.ts

📚 Learning: 2025-12-12T13:20:01.954Z

Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .cursor/rules/test-patterns.mdc:0-0
Timestamp: 2025-12-12T13:20:01.954Z
Learning: Applies to tooling/playwright-www/**/*.{ts,tsx} : End-to-end tests should focus on user-facing behavior, not implementation details

Applied to files:

• tooling/playwright-www/tests/homepage.test.ts

📚 Learning: 2025-12-22T19:44:07.593Z

Learnt from: yamcodes
Repo: yamcodes/arkenv PR: 596
File: examples/basic/index.ts:4-5
Timestamp: 2025-12-22T19:44:07.593Z
Learning: In examples/basic/index.ts: Use explicit ArkType syntax (e.g., "string.ip | 'localhost'", "0 <= number.integer <= 65535") instead of built-in validators (string.host, number.port) to showcase ArkType's type system capabilities for educational purposes.

Applied to files:

• tooling/playwright-www/tests/homepage.test.ts
• apps/www/content/docs/arkenv/quickstart.mdx

📚 Learning: 2025-12-12T13:20:01.954Z

Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .cursor/rules/test-patterns.mdc:0-0
Timestamp: 2025-12-12T13:20:01.954Z
Learning: Applies to **/*.test.{ts,tsx} : Test component public API (props, events, and component contract), user behavior (clicks, typing, focus, keyboard, ARIA), state transitions, accessibility, and side effects in component tests

Applied to files:

• tooling/playwright-www/tests/homepage.test.ts
• apps/www/components/page/compatibility-rails.tsx

📚 Learning: 2025-09-09T17:37:19.650Z

Learnt from: yamcodes
Repo: yamcodes/arkenv PR: 132
File: packages/arkenv/README.md:13-14
Timestamp: 2025-09-09T17:37:19.650Z
Learning: For yamcodes/arkenv project: Runtime support documentation should link to specific examples: Node.js (examples/basic), Bun (examples/with-bun), Vite (examples/with-vite-react-ts).

Applied to files:

• apps/www/content/docs/arkenv/quickstart.mdx

📚 Learning: 2025-11-24T16:03:45.295Z

Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .cursor/rules/arktype.mdc:0-0
Timestamp: 2025-11-24T16:03:45.295Z
Learning: Applies to packages/arkenv/**/*.ts : Keep environment variable schemas readable and TypeScript-like using ArkType syntax

Applied to files:

• apps/www/content/docs/arkenv/quickstart.mdx

📚 Learning: 2025-11-24T16:03:45.295Z

Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .cursor/rules/arktype.mdc:0-0
Timestamp: 2025-11-24T16:03:45.295Z
Learning: Applies to packages/arkenv/**/*.ts : Use ArkType's `type()` function to define schemas in environment variable definitions

Applied to files:

• apps/www/content/docs/arkenv/quickstart.mdx

📚 Learning: 2025-12-23T07:09:57.082Z

Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-23T07:09:57.082Z
Learning: Applies to **/*.{ts,tsx} : For environment schema definition, use ArkType string literal syntax for enumerated values (e.g., "'development' | 'production' | 'test'")

Applied to files:

• apps/www/content/docs/arkenv/quickstart.mdx

📚 Learning: 2025-12-23T07:09:57.082Z

Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-23T07:09:57.082Z
Learning: Applies to **/*.{ts,tsx} : Use built-in validators (host, port, url, email) from ArkEnv when available instead of custom ArkType schemas

Applied to files:

• apps/www/content/docs/arkenv/quickstart.mdx

📚 Learning: 2025-12-23T07:09:57.082Z

Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-23T07:09:57.082Z
Learning: Applies to **/*.{ts,tsx} : Use `createEnv(schema)` function (or default import as `arkenv`) to create validated environment objects in TypeScript

Applied to files:

• apps/www/content/docs/arkenv/quickstart.mdx

📚 Learning: 2025-11-24T16:04:00.957Z

Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .cursor/rules/coding-guidelines.mdc:0-0
Timestamp: 2025-11-24T16:04:00.957Z
Learning: Applies to **/*.{ts,tsx} : Use `ArkEnvError` for environment variable validation errors

Applied to files:

• apps/www/content/docs/arkenv/quickstart.mdx

📚 Learning: 2025-11-24T16:03:45.295Z

Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .cursor/rules/arktype.mdc:0-0
Timestamp: 2025-11-24T16:03:45.295Z
Learning: Applies to packages/arkenv/**/*.ts : Leverage ArkType's built-in types (e.g., `string.host`, `number.port`) where possible in environment schemas

Applied to files:

• apps/www/content/docs/arkenv/quickstart.mdx

📚 Learning: 2025-12-05T20:33:10.676Z

Learnt from: yamcodes
Repo: yamcodes/arkenv PR: 498
File: apps/playgrounds/node/index.ts:2-2
Timestamp: 2025-12-05T20:33:10.676Z
Learning: ArkType 2.1.28+ supports Standard Schema specification, allowing interoperability with other Standard Schema-compliant validation libraries (e.g., Zod, Valibot) within the same schema definition

Applied to files:

• apps/www/content/docs/arkenv/quickstart.mdx

📚 Learning: 2025-11-24T16:03:45.295Z

Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .cursor/rules/arktype.mdc:0-0
Timestamp: 2025-11-24T16:03:45.295Z
Learning: ArkType validates environment variables at runtime and TypeScript types are inferred from the schema definition

Applied to files:

• apps/www/content/docs/arkenv/quickstart.mdx

🧬 Code graph analysis (1)

tooling/playwright-www/tests/homepage.test.ts (2)

tooling/playwright-www/tests/docs-navigation.test.ts (1)

• page (163-190)

tooling/playwright-www/tests/integrations.test.ts (1)

• page (18-41)

⏰ 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). (2)

• GitHub Check: test-e2e (e2e)
• GitHub Check: test-e2e (a11y)

🔇 Additional comments (4)

tooling/playwright-www/tests/homepage.test.ts (1)

165-165: LGTM! Consistent with existing test patterns.

Adding .first() ensures deterministic element selection when multiple ArkType links exist on the page, following the same pattern used in docs-navigation.test.ts and integrations.test.ts.

apps/www/components/page/video-demo.tsx (1)

38-55: LGTM! Improved aspect ratio handling.

Moving the aspect ratio styling to the outer button element (Line 38) while making the inner container flexible (Line 55) improves layout stability. The aspect ratio is now enforced at the container level, allowing inner content to adapt more naturally.

apps/www/components/page/compatibility-rails.tsx (1)

107-109: Good mobile-friendly improvement; verify color scheme change.

Hiding the label on small screens (hidden sm:block) directly addresses the mobile overflow issue. The fixed width and left alignment provide consistent spacing on larger viewports.

However, the text color scheme was inverted: text-gray-400 dark:text-gray-500 → text-gray-500 dark:text-gray-400. Please verify this change maintains the intended visual hierarchy in both light and dark modes.

apps/www/content/docs/arkenv/quickstart.mdx (1)

68-68: LGTM! Consistent documentation path updates.

All documentation links now correctly include the /docs/arkenv prefix, ensuring proper navigation within the docs structure. The updates are consistent across TIP/NOTE blocks and Card components.

Also applies to: 71-71, 104-104, 146-167

---

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.}

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/arkenv@639

npm i https://pkg.pr.new/@arkenv/bun-plugin@639

npm i https://pkg.pr.new/@arkenv/vite-plugin@639

commit: ab0f429

[arkenv-bot]

📦 Bundle Size Report

Package	Size	Limit	Diff	Status
arkenv	1.41 kB	2 kB	0.0%	✅

✅ All size limits passed!