chore: improve sponsor list responsive

[dinwwwh]

Summary by CodeRabbit

• Refactor

  • Sponsor displays migrated from table layouts to a responsive CSS grid with tier-aware sizing and column counts.

• Documentation

  • Sponsor showcase visuals updated across READMEs: larger avatar images, adjusted sizing and alignment, and reordered/refreshed sponsor/backer entries.

[gemini-code-assist]

Summary of Changes

Hello, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request enhances the user experience by making the sponsor lists in the project's documentation fully responsive. The changes involve refactoring the display mechanism to leverage CSS Grid for flexible layouts and dynamically adjusting image sizes, resulting in a visually consistent and adaptive presentation on any device.

Highlights

• Responsive Sponsor List Layout: Implemented a responsive CSS Grid layout for displaying sponsor lists within the documentation.
• Dynamic Image Sizing: Introduced dynamic calculation of sponsor image widths and column counts based on sponsor tiers to ensure optimal display across various screen sizes.
• README Updates: Updated sponsor image widths in numerous README.md files across different packages to align with the new responsive design.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

[pkg-pr-new]

More templates

• @orpc/astro-playground
• @orpc/browser-extension-playground
• @orpc/bun-websocket-otel-playground
• @orpc/cloudflare-worker-playground
• @orpc/contract-first-playground
• @orpc/electron-playground
• @orpc/nest-playground
• @orpc/next-playground
• @orpc/nuxt-playground
• @orpc/solid-start-playground
• @orpc/svelte-kit-playground
• @orpc/tanstack-start-playground

@orpc/ai-sdk

npm i https://pkg.pr.new/@orpc/ai-sdk@1485

@orpc/arktype

npm i https://pkg.pr.new/@orpc/arktype@1485

@orpc/client

npm i https://pkg.pr.new/@orpc/client@1485

@orpc/contract

npm i https://pkg.pr.new/@orpc/contract@1485

@orpc/experimental-durable-iterator

npm i https://pkg.pr.new/@orpc/experimental-durable-iterator@1485

@orpc/hey-api

npm i https://pkg.pr.new/@orpc/hey-api@1485

@orpc/interop

npm i https://pkg.pr.new/@orpc/interop@1485

@orpc/json-schema

npm i https://pkg.pr.new/@orpc/json-schema@1485

@orpc/nest

npm i https://pkg.pr.new/@orpc/nest@1485

@orpc/openapi

npm i https://pkg.pr.new/@orpc/openapi@1485

@orpc/openapi-client

npm i https://pkg.pr.new/@orpc/openapi-client@1485

@orpc/otel

npm i https://pkg.pr.new/@orpc/otel@1485

@orpc/experimental-pino

npm i https://pkg.pr.new/@orpc/experimental-pino@1485

@orpc/experimental-publisher

npm i https://pkg.pr.new/@orpc/experimental-publisher@1485

@orpc/experimental-publisher-durable-object

npm i https://pkg.pr.new/@orpc/experimental-publisher-durable-object@1485

@orpc/experimental-ratelimit

npm i https://pkg.pr.new/@orpc/experimental-ratelimit@1485

@orpc/react

npm i https://pkg.pr.new/@orpc/react@1485

@orpc/react-query

npm i https://pkg.pr.new/@orpc/react-query@1485

@orpc/experimental-react-swr

npm i https://pkg.pr.new/@orpc/experimental-react-swr@1485

@orpc/server

npm i https://pkg.pr.new/@orpc/server@1485

@orpc/shared

npm i https://pkg.pr.new/@orpc/shared@1485

@orpc/solid-query

npm i https://pkg.pr.new/@orpc/solid-query@1485

@orpc/standard-server

npm i https://pkg.pr.new/@orpc/standard-server@1485

@orpc/standard-server-aws-lambda

npm i https://pkg.pr.new/@orpc/standard-server-aws-lambda@1485

@orpc/standard-server-fastify

npm i https://pkg.pr.new/@orpc/standard-server-fastify@1485

@orpc/standard-server-fetch

npm i https://pkg.pr.new/@orpc/standard-server-fetch@1485

@orpc/standard-server-node

npm i https://pkg.pr.new/@orpc/standard-server-node@1485

@orpc/standard-server-peer

npm i https://pkg.pr.new/@orpc/standard-server-peer@1485

@orpc/svelte-query

npm i https://pkg.pr.new/@orpc/svelte-query@1485

@orpc/tanstack-query

npm i https://pkg.pr.new/@orpc/tanstack-query@1485

@orpc/trpc

npm i https://pkg.pr.new/@orpc/trpc@1485

@orpc/valibot

npm i https://pkg.pr.new/@orpc/valibot@1485

@orpc/vue-colada

npm i https://pkg.pr.new/@orpc/vue-colada@1485

@orpc/vue-query

npm i https://pkg.pr.new/@orpc/vue-query@1485

@orpc/zod

npm i https://pkg.pr.new/@orpc/zod@1485

commit: b5ac9cd

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 115acf98-37b0-49e6-9ffc-f9242613e79d

📥 Commits

Reviewing files that changed from the base of the PR and between 7f48d12 and 52529f4.

📒 Files selected for processing (1)

• apps/content/.vitepress/theme/components/FullSponsors.vue

---

📝 Walkthrough

Walkthrough

Refactors sponsor rendering from table layout to a responsive CSS grid in FullSponsors.vue, updates sync script to return [columns, imageSize], and increases sponsor avatar sizes across many README files. Changes are presentation and layout-focused; no public API or runtime logic outside sizing/layout was introduced.

Changes

Cohort / File(s)	Summary
Sponsor component apps/content/.vitepress/theme/components/FullSponsors.vue	Replaced table-based sponsor markup with a responsive CSS grid driven by tier.cols; consolidated image rendering to single , removed legacy table sizing, added responsive grid CSS and adjusted avatar styling.
Sync script scripts/sync-sponsor.ts	Replaced getTierImageSize(...) with getTierImageSizeAndColumns(...) returning [columns, imageSize]; columns now derived from rank mapping instead of a fixed 6, and callers destructure both values.
README sponsor galleries README.md, apps/content/..., packages/*/README.md, playgrounds/*/README.md, playgrounds/...	Updated sponsor/avatar image widths and many avatar URLs across ~40+ README files (Platinum 220→279, Gold 170→209, Silver 120→167, Generous 88→139, Sponsors 76→119, Backers 54→104) — presentation-only edits and some reordering of entries.

Sequence Diagram(s)

(Skipped — changes are primarily UI refactor and README content adjustments that don't introduce a multi-actor sequential flow requiring visualization.)

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• chore: improve sponsor list responsive #1485 — Similar refactor of FullSponsors.vue and the sync script to use tier.cols and a grid layout; high overlap in code-level changes.
• chore: update sponsor rel/ref link attributes #1483 — Modifies FullSponsors.vue sponsor rendering (anchor/rel adjustments) and touches the same UI component.
• chore: auto sync sponsors #1481 — Adjusts scripts/sync-sponsor.ts and FullSponsors.vue with overlapping image sizing/column calculation changes.

Suggested labels

documentation, javascript, size:L

Poem

🐰 I hopped through rows of tiny pics,
Swapped tables for grids and clever tricks,
Columns stretched wide, avatars gleam,
Sponsors bloom in a brighter theme —
Hooray! I nudged each logo’s beams ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'chore: improve sponsor list responsive' directly describes the main change—improving sponsor list responsiveness through CSS grid layout, responsive columns, and larger avatar sizing.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

📝 Coding Plan

• Generate coding plan for human review comments

---

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

[gemini-code-assist]

Code Review

This pull request improves the responsiveness of the sponsor list across the project. It refactors the sponsor display on the website from using tables to a more flexible and modern CSS Grid layout. It also updates the sponsor sections in all README files with a new, more organized grid layout. The script for generating these sections has been updated accordingly. I've pointed out a minor inconsistency in the layout configuration between the website component and the README generation script and suggested a fix for better consistency.

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

apps/content/.vitepress/theme/components/FullSponsors.vue (1)

31-32: Minor: redundant nullish coalescing operator.

The ?? 6 fallback is unreachable since Math.min(rank, columns.length - 1) always produces a valid array index (0–5). The array access will never return undefined.

Simplified version

     const columns = [3, 4, 6, 6, 8, 8]
-    const cols = columns[Math.min(rank, columns.length - 1)] ?? 6
+    const cols = columns[Math.min(rank, columns.length - 1)]!

🤖 Prompt for AI Agents

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

In `@apps/content/.vitepress/theme/components/FullSponsors.vue` around lines 31 -
32, The cols assignment uses an unreachable nullish fallback; in
FullSponsors.vue replace "const cols = columns[Math.min(rank, columns.length -
1)] ?? 6" with a direct indexed access like "const cols = columns[Math.min(rank,
columns.length - 1)]" (referencing the columns array and rank variable) to
remove the redundant "?? 6".

🤖 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/react-swr/README.md`:
- Around line 77-157: The sponsor section uses fixed-width <table>/<tr>/<td>
blocks with large img width attributes (the avatar <img> elements and table
rows) which causes overflow on narrow screens; replace the table layout with a
wrapping container (e.g., a <div> or <p> with a .sponsors-grid class) and apply
a responsive layout (display:flex or CSS grid with flex-wrap/grid-auto-flow) and
remove hardcoded width attributes on the avatar <img> tags so they can scale
(use max-width or relative units instead), or alternatively change the generator
to emit fewer columns per row so items wrap; update the avatar <img> width
attributes and table markup references to use the new .sponsors-grid container
and responsive CSS.

---

Nitpick comments:
In `@apps/content/.vitepress/theme/components/FullSponsors.vue`:
- Around line 31-32: The cols assignment uses an unreachable nullish fallback;
in FullSponsors.vue replace "const cols = columns[Math.min(rank, columns.length
- 1)] ?? 6" with a direct indexed access like "const cols =
columns[Math.min(rank, columns.length - 1)]" (referencing the columns array and
rank variable) to remove the redundant "?? 6".

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 7970f60e-0f61-44a1-8ae5-45acab07cc7d

📥 Commits

Reviewing files that changed from the base of the PR and between 8812be1 and 7f48d12.

📒 Files selected for processing (50)

• README.md
• apps/content/.vitepress/theme/components/FullSponsors.vue
• packages/ai-sdk/README.md
• packages/arktype/README.md
• packages/client/README.md
• packages/contract/README.md
• packages/durable-iterator/README.md
• packages/hey-api/README.md
• packages/interop/README.md
• packages/json-schema/README.md
• packages/nest/README.md
• packages/openapi-client/README.md
• packages/openapi/README.md
• packages/otel/README.md
• packages/pino/README.md
• packages/publisher-durable-object/README.md
• packages/publisher/README.md
• packages/ratelimit/README.md
• packages/react-query/README.md
• packages/react-swr/README.md
• packages/react/README.md
• packages/server/README.md
• packages/shared/README.md
• packages/solid-query/README.md
• packages/standard-server-aws-lambda/README.md
• packages/standard-server-fastify/README.md
• packages/standard-server-fetch/README.md
• packages/standard-server-node/README.md
• packages/standard-server-peer/README.md
• packages/standard-server/README.md
• packages/svelte-query/README.md
• packages/tanstack-query/README.md
• packages/trpc/README.md
• packages/valibot/README.md
• packages/vue-colada/README.md
• packages/vue-query/README.md
• packages/zod/README.md
• playgrounds/astro/README.md
• playgrounds/browser-extension/README.md
• playgrounds/bun-websocket-otel/README.md
• playgrounds/cloudflare-worker/README.md
• playgrounds/contract-first/README.md
• playgrounds/electron/README.md
• playgrounds/nest/README.md
• playgrounds/next/README.md
• playgrounds/nuxt/README.md
• playgrounds/solid-start/README.md
• playgrounds/svelte-kit/README.md
• playgrounds/tanstack-start/README.md
• scripts/sync-sponsor.ts

[coderabbitai]

⚠️ Potential issue | 🟠 Major

Fixed-width table layout is still non-responsive on narrow screens.

Line 113–Line 133 and Line 141–Line 155 keep many fixed-width avatars in <table> rows, which will still overflow on mobile. The larger widths amplify this. Consider switching sponsor rows to a wrapping container (<p>/<div> with inline-block/flex-wrap) or reducing per-row column count in generation logic so items can wrap.

🤖 Prompt for AI Agents

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

In `@packages/react-swr/README.md` around lines 77 - 157, The sponsor section uses
fixed-width <table>/<tr>/<td> blocks with large img width attributes (the avatar
<img> elements and table rows) which causes overflow on narrow screens; replace
the table layout with a wrapping container (e.g., a <div> or <p> with a
.sponsors-grid class) and apply a responsive layout (display:flex or CSS grid
with flex-wrap/grid-auto-flow) and remove hardcoded width attributes on the
avatar <img> tags so they can scale (use max-width or relative units instead),
or alternatively change the generator to emit fewer columns per row so items
wrap; update the avatar <img> width attributes and table markup references to
use the new .sponsors-grid container and responsive CSS.