Skip to content

fix: #4065 Case Studies page table is now mobile responsive #4284

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 3 commits into from
Closed

fix: #4065 Case Studies page table is now mobile responsive #4284

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
394747f
fix: #4065 Case Studies page table is now mobile responsive
Priyank0703 Jul 28, 2025
e94e0d5
Merge branch 'master' into Priyank0703/4065
asyncapi-bot Jul 28, 2025
d8638ce
Merge branch 'master' into Priyank0703/4065
asyncapi-bot Jul 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion next-env.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@
/// <reference types="next/image-types/global" />

// NOTE: This file should not be edited
// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.
118 changes: 76 additions & 42 deletions pages/casestudies/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,93 +27,127 @@ interface Adopter {
* @description Renders the Case Studies page.
*/
export default function Casestudies() {
const description: string = 'Learn about different case studies based on AsyncAPI spec and related tools.';
const description: string =
'Learn about different case studies based on AsyncAPI spec and related tools.';
const image: string = '/img/social/case-studies.webp';
const title: string = 'Case Studies';

return (
<GenericLayout title={title} description={description} image={image} wide>
<div
className='relative mx-auto max-w-xl px-4 py-10 sm:px-6 lg:max-w-screen-xl lg:px-8'
data-testid='CaseStudy-main'
className="relative mx-auto max-w-xl px-4 py-10 sm:px-6 lg:max-w-screen-xl lg:px-8"
data-testid="CaseStudy-main"
>
<div className='grid lg:grid-cols-9 lg:gap-8 lg:text-center'>
<div className='col-span-5 col-start-3'>
<div className="grid lg:grid-cols-9 lg:gap-8 lg:text-center">
<div className="col-span-5 col-start-3">
<Heading level={HeadingLevel.h1} typeStyle={HeadingTypeStyle.lg}>
{title}
</Heading>
<Paragraph typeStyle={ParagraphTypeStyle.md} className='my-4 max-w-4xl'>
The best way to learn how to use AsyncAPI is not only through documentation that usually is focused on
recommendations and best practices. It is also good to confront with real-life case studies that explain
how people really use AsyncAPI and what are their flows.
<Paragraph
typeStyle={ParagraphTypeStyle.md}
className="my-4 max-w-4xl"
>
The best way to learn how to use AsyncAPI is not only through
documentation that usually is focused on recommendations and best
practices. It is also good to confront with real-life case studies
that explain how people really use AsyncAPI and what are their
flows.
</Paragraph>
<Paragraph typeStyle={ParagraphTypeStyle.md} className='my-4 max-w-4xl'>
Feel free to submit your case study. We have a template for you. For more details
<TextLink href='https://github.com/asyncapi/website/blob/master/README.md#case-studies' target='_blank'>
<Paragraph
typeStyle={ParagraphTypeStyle.md}
className="my-4 max-w-4xl"
>
Feel free to submit your case study. We have a template for you.
For more details
<TextLink
href="https://github.com/asyncapi/website/blob/master/README.md#case-studies"
target="_blank"
>
read our FAQ
</TextLink>
.
</Paragraph>
</div>
</div>
<div data-testid='CaseStudy-card'>
<div data-testid="CaseStudy-card">
<CaseStudyCard studies={CaseStudiesList as ICaseStudies} />
</div>

<div className='adopters'>
<div className='mt-8 grid lg:grid-cols-9 lg:gap-8 lg:text-center'>
<div className='col-span-5 col-start-3'>
<div className="adopters">
<div className="mt-8 grid lg:grid-cols-9 lg:gap-8 lg:text-center">
<div className="col-span-5 col-start-3">
<Heading level={HeadingLevel.h1} typeStyle={HeadingTypeStyle.lg}>
Adopters
</Heading>
<Paragraph typeStyle={ParagraphTypeStyle.md} className='my-4 max-w-4xl'>
Check out how different companies use AsyncAPI and what problems they solve.
<Paragraph
typeStyle={ParagraphTypeStyle.md}
className="my-4 max-w-4xl"
>
Check out how different companies use AsyncAPI and what problems
they solve.
</Paragraph>
<Paragraph typeStyle={ParagraphTypeStyle.md} className='my-4 max-w-4xl'>
<Paragraph
typeStyle={ParagraphTypeStyle.md}
className="my-4 max-w-4xl"
>
Feel free to{' '}
<a className='underline' href='https://github.com/asyncapi/website/blob/master/config/adopters.yml'>
<a
className="underline"
href="https://github.com/asyncapi/website/blob/master/config/adopters.yml"
>
submit a pull request
</a>{' '}
with information about how your company uses AsyncAPI. We know that writing an official case study might
be time consuming and requires too much internal paper work. Let&apos;s make sure we can at least
capture a use case that is already a great learning information for the community.
with information about how your company uses AsyncAPI. We know
that writing an official case study might be time consuming and
requires too much internal paper work. Let&apos;s make sure we
can at least capture a use case that is already a great learning
information for the community.
</Paragraph>
</div>
</div>
</div>

<center>
<div className='overflow-x-auto'>
<table className='my-8 w-full max-w-full border-collapse border'>
<div className="w-full flex justify-center">
<div className="overflow-x-auto w-full">
<table className="my-8 min-w-[600px] w-full border-collapse border">
<thead>
<tr>
<th className='border p-2 font-bold'>Company name</th>
<th className='border-2 p-2 font-bold'>Use Case</th>
<th className='border-2 p-2 font-bold'>Resources</th>
<th className="border p-2 font-bold text-left">
Company name
</th>
<th className="border p-2 font-bold text-left">Use Case</th>
<th className="border p-2 font-bold text-left">Resources</th>
</tr>
</thead>
<tbody>
{AdoptersList.map((entry: Adopter, index: number) => (
<tr key={index} data-testid='Adopters'>
<td className='border-2 p-2'>{entry.companyName}</td>
<td className='border-2 p-2'>{entry.useCase}</td>
<td className='border-2 p-2'>
<ul>
{entry.resources.map((resource: Resource, resourceIndex: number) => (
<li className='p-2' key={resourceIndex}>
<a className='text-cyan-500 underline' href={resource.link}>
{resource.title}
</a>
</li>
))}
<tr key={index} data-testid="Adopters">
<td className="border p-2">{entry.companyName}</td>
<td className="border p-2">{entry.useCase}</td>
<td className="border p-2">
<ul className="list-disc pl-4">
{entry.resources.map(
(resource: Resource, resourceIndex: number) => (
<li key={resourceIndex} className="py-1">
<a
className="text-cyan-500 underline"
href={resource.link}
target="_blank"
rel="noopener noreferrer"
>
{resource.title}
</a>
</li>
),
)}
</ul>
</td>
</tr>
))}
Comment on lines +124 to 146
Copy link
Contributor

@coderabbitai coderabbitai bot Jul 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Replace index as React key with stable identifiers

Using the array index (key={index}) for AdoptersList rows & nested resourceIndex causes unnecessary re-renders and subtle bugs when the list order changes. Prefer a deterministic field (e.g., companyName or resource.link).

-<tr key={index} data-testid='Adopters'>
+<tr key={entry.companyName} data-testid='Adopters'>
 …
-  <li key={resourceIndex} className='py-1'>
+  <li key={resource.link} className='py-1'>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<tr key={index} data-testid="Adopters">
<td className="border p-2">{entry.companyName}</td>
<td className="border p-2">{entry.useCase}</td>
<td className="border p-2">
<ul className="list-disc pl-4">
{entry.resources.map(
(resource: Resource, resourceIndex: number) => (
<li key={resourceIndex} className="py-1">
<a
className="text-cyan-500 underline"
href={resource.link}
target="_blank"
rel="noopener noreferrer"
>
{resource.title}
</a>
</li>
),
)}
</ul>
</td>
</tr>
))}
<tr key={entry.companyName} data-testid="Adopters">
<td className="border p-2">{entry.companyName}</td>
<td className="border p-2">{entry.useCase}</td>
<td className="border p-2">
<ul className="list-disc pl-4">
{entry.resources.map(
(resource: Resource, resourceIndex: number) => (
<li key={resource.link} className="py-1">
<a
className="text-cyan-500 underline"
href={resource.link}
target="_blank"
rel="noopener noreferrer"
>
{resource.title}
</a>
</li>
),
)}
</ul>
</td>
</tr>
🧰 Tools
🪛 GitHub Actions: PR testing - if Node project

[error] 124-128: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and Unexpected usage of doublequote. (jsx-quotes)

[error] 129-129: Prettier formatting error: Delete newline and spaces. (prettier/prettier)

[error] 131-131: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and Unexpected usage of doublequote. (jsx-quotes)

[error] 132-132: Prettier formatting error: Delete spaces. (prettier/prettier)

[error] 133-133: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and Unexpected usage of doublequote. (jsx-quotes)

[error] 134-134: Prettier formatting error: Delete spaces. (prettier/prettier)

[error] 135-136: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and Unexpected usage of doublequote. (jsx-quotes)

[error] 137-139: Prettier formatting error: Delete spaces and newlines. (prettier/prettier)

[error] 140-141: Prettier formatting error: Remove trailing comma. (comma-dangle)

🤖 Prompt for AI Agents 
In pages/casestudies/index.tsx around lines 124 to 146, replace the usage of
array indices as React keys for the adopter rows and resource list items.
Instead of key={index} for the <tr> elements, use a stable and unique identifier
like entry.companyName. Similarly, for the resource list items, replace
key={resourceIndex} with a unique and stable key such as resource.link. This
change will prevent unnecessary re-renders and potential bugs when the list
order changes.

</tbody>
</table>
</div>
</center>
</div>
Comment on lines +30 to +150
Copy link
Contributor

@coderabbitai coderabbitai bot Jul 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fix massive Prettier / ESLint breakage introduced by double-quoted JSX & multi-line literals

The CI pipeline is red with 30-plus prettier/prettier and jsx-quotes errors. Project conventions require single quotes and Prettier-formatted, single-line attribute blocks. The current patch will block merge.

Minimal fix: run the project formatter (pnpm lint --fix / npm run format) and commit the result.
If you prefer manual edits, convert "..." → '...', collapse multi-line props, and remove trailing commas/newlines flagged in the log.

Example (representative only):

-<div
-  className="relative mx-auto max-w-xl px-4 py-10 sm:px-6 lg:max-w-screen-xl lg:px-8"
-  data-testid="CaseStudy-main"
->
+<div
+  className='relative mx-auto max-w-xl px-4 py-10 sm:px-6 lg:max-w-screen-xl lg:px-8'
+  data-testid='CaseStudy-main'
+>

Until these style errors are fixed the build will continue to fail.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const description: string =
'Learn about different case studies based on AsyncAPI spec and related tools.';
const image: string = '/img/social/case-studies.webp';
const title: string = 'Case Studies';
return (
<GenericLayout title={title} description={description} image={image} wide>
<div
className='relative mx-auto max-w-xl px-4 py-10 sm:px-6 lg:max-w-screen-xl lg:px-8'
data-testid='CaseStudy-main'
className="relative mx-auto max-w-xl px-4 py-10 sm:px-6 lg:max-w-screen-xl lg:px-8"
data-testid="CaseStudy-main"
>
<div className='grid lg:grid-cols-9 lg:gap-8 lg:text-center'>
<div className='col-span-5 col-start-3'>
<div className="grid lg:grid-cols-9 lg:gap-8 lg:text-center">
<div className="col-span-5 col-start-3">
<Heading level={HeadingLevel.h1} typeStyle={HeadingTypeStyle.lg}>
{title}
</Heading>
<Paragraph typeStyle={ParagraphTypeStyle.md} className='my-4 max-w-4xl'>
The best way to learn how to use AsyncAPI is not only through documentation that usually is focused on
recommendations and best practices. It is also good to confront with real-life case studies that explain
how people really use AsyncAPI and what are their flows.
<Paragraph
typeStyle={ParagraphTypeStyle.md}
className="my-4 max-w-4xl"
>
The best way to learn how to use AsyncAPI is not only through
documentation that usually is focused on recommendations and best
practices. It is also good to confront with real-life case studies
that explain how people really use AsyncAPI and what are their
flows.
</Paragraph>
<Paragraph typeStyle={ParagraphTypeStyle.md} className='my-4 max-w-4xl'>
Feel free to submit your case study. We have a template for you. For more details
<TextLink href='https://github.com/asyncapi/website/blob/master/README.md#case-studies' target='_blank'>
<Paragraph
typeStyle={ParagraphTypeStyle.md}
className="my-4 max-w-4xl"
>
Feel free to submit your case study. We have a template for you.
For more details
<TextLink
href="https://github.com/asyncapi/website/blob/master/README.md#case-studies"
target="_blank"
>
read our FAQ
</TextLink>
.
</Paragraph>
</div>
</div>
<div data-testid='CaseStudy-card'>
<div data-testid="CaseStudy-card">
<CaseStudyCard studies={CaseStudiesList as ICaseStudies} />
</div>
<div className='adopters'>
<div className='mt-8 grid lg:grid-cols-9 lg:gap-8 lg:text-center'>
<div className='col-span-5 col-start-3'>
<div className="adopters">
<div className="mt-8 grid lg:grid-cols-9 lg:gap-8 lg:text-center">
<div className="col-span-5 col-start-3">
<Heading level={HeadingLevel.h1} typeStyle={HeadingTypeStyle.lg}>
Adopters
</Heading>
<Paragraph typeStyle={ParagraphTypeStyle.md} className='my-4 max-w-4xl'>
Check out how different companies use AsyncAPI and what problems they solve.
<Paragraph
typeStyle={ParagraphTypeStyle.md}
className="my-4 max-w-4xl"
>
Check out how different companies use AsyncAPI and what problems
they solve.
</Paragraph>
<Paragraph typeStyle={ParagraphTypeStyle.md} className='my-4 max-w-4xl'>
<Paragraph
typeStyle={ParagraphTypeStyle.md}
className="my-4 max-w-4xl"
>
Feel free to{' '}
<a className='underline' href='https://github.com/asyncapi/website/blob/master/config/adopters.yml'>
<a
className="underline"
href="https://github.com/asyncapi/website/blob/master/config/adopters.yml"
>
submit a pull request
</a>{' '}
with information about how your company uses AsyncAPI. We know that writing an official case study might
be time consuming and requires too much internal paper work. Let&apos;s make sure we can at least
capture a use case that is already a great learning information for the community.
with information about how your company uses AsyncAPI. We know
that writing an official case study might be time consuming and
requires too much internal paper work. Let&apos;s make sure we
can at least capture a use case that is already a great learning
information for the community.
</Paragraph>
</div>
</div>
</div>
<center>
<div className='overflow-x-auto'>
<table className='my-8 w-full max-w-full border-collapse border'>
<div className="w-full flex justify-center">
<div className="overflow-x-auto w-full">
<table className="my-8 min-w-[600px] w-full border-collapse border">
<thead>
<tr>
<th className='border p-2 font-bold'>Company name</th>
<th className='border-2 p-2 font-bold'>Use Case</th>
<th className='border-2 p-2 font-bold'>Resources</th>
<th className="border p-2 font-bold text-left">
Company name
</th>
<th className="border p-2 font-bold text-left">Use Case</th>
<th className="border p-2 font-bold text-left">Resources</th>
</tr>
</thead>
<tbody>
{AdoptersList.map((entry: Adopter, index: number) => (
<tr key={index} data-testid='Adopters'>
<td className='border-2 p-2'>{entry.companyName}</td>
<td className='border-2 p-2'>{entry.useCase}</td>
<td className='border-2 p-2'>
<ul>
{entry.resources.map((resource: Resource, resourceIndex: number) => (
<li className='p-2' key={resourceIndex}>
<a className='text-cyan-500 underline' href={resource.link}>
{resource.title}
</a>
</li>
))}
<tr key={index} data-testid="Adopters">
<td className="border p-2">{entry.companyName}</td>
<td className="border p-2">{entry.useCase}</td>
<td className="border p-2">
<ul className="list-disc pl-4">
{entry.resources.map(
(resource: Resource, resourceIndex: number) => (
<li key={resourceIndex} className="py-1">
<a
className="text-cyan-500 underline"
href={resource.link}
target="_blank"
rel="noopener noreferrer"
>
{resource.title}
</a>
</li>
),
)}
</ul>
</td>
</tr>
))}
</tbody>
</table>
</div>
</center>
</div>
<div
- className="relative mx-auto max-w-xl px-4 py-10 sm:px-6 lg:max-w-screen-xl lg:px-8"
- data-testid="CaseStudy-main"
+ className='relative mx-auto max-w-xl px-4 py-10 sm:px-6 lg:max-w-screen-xl lg:px-8'
+ data-testid='CaseStudy-main'
>
🧰 Tools
🪛 GitHub Actions: PR testing - if Node project

[error] 30-30: Prettier formatting error: Delete newline and spaces. (prettier/prettier)

[error] 38-38: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and Unexpected usage of doublequote. (jsx-quotes)

[error] 39-39: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and Unexpected usage of doublequote. (jsx-quotes)

[error] 41-41: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and Unexpected usage of doublequote. (jsx-quotes)

[error] 42-42: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and Unexpected usage of doublequote. (jsx-quotes)

[error] 46-46: Prettier formatting error: Replace multiline with inline and use single quotes. (prettier/prettier)

[error] 48-48: Unexpected usage of doublequote. (jsx-quotes)

[error] 50-50: Prettier formatting error: Replace multiline string with adjusted line breaks. (prettier/prettier)

[error] 56-56: Prettier formatting error: Replace multiline with inline and use single quotes. (prettier/prettier)

[error] 58-58: Unexpected usage of doublequote. (jsx-quotes)

[error] 60-60: Prettier formatting error: Delete newline and spaces. (prettier/prettier)

[error] 62-62: Prettier formatting error: Replace multiline attributes with single quotes. (prettier/prettier)

[error] 63-64: Unexpected usage of doublequote. (jsx-quotes)

[error] 72-72: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and Unexpected usage of doublequote. (jsx-quotes)

[error] 76-78: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and Unexpected usage of doublequote. (jsx-quotes)

[error] 82-82: Prettier formatting error: Replace multiline with inline and use single quotes. (prettier/prettier)

[error] 84-84: Unexpected usage of doublequote. (jsx-quotes)

[error] 86-86: Prettier formatting error: Delete newline and spaces. (prettier/prettier)

[error] 89-89: Prettier formatting error: Replace multiline with inline and use single quotes. (prettier/prettier)

[error] 91-91: Unexpected usage of doublequote. (jsx-quotes)

[error] 94-96: Prettier formatting error: Replace multiline attributes with single quotes. (prettier/prettier) and Unexpected usage of doublequote. (jsx-quotes)

[error] 100-103: Prettier formatting error: Replace multiline string with adjusted line breaks. (prettier/prettier)

[error] 110-111: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and Unexpected usage of doublequote. (jsx-quotes)

[error] 112-112: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and Unexpected usage of doublequote. (jsx-quotes)

[error] 115-115: Prettier formatting error: Replace double quotes with single quotes and remove newline. (prettier/prettier) and Unexpected usage of doublequote. (jsx-quotes)

[error] 118-119: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and Unexpected usage of doublequote. (jsx-quotes)

[error] 124-128: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and Unexpected usage of doublequote. (jsx-quotes)

[error] 129-129: Prettier formatting error: Delete newline and spaces. (prettier/prettier)

[error] 131-131: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and Unexpected usage of doublequote. (jsx-quotes)

[error] 132-132: Prettier formatting error: Delete spaces. (prettier/prettier)

[error] 133-133: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and Unexpected usage of doublequote. (jsx-quotes)

[error] 134-134: Prettier formatting error: Delete spaces. (prettier/prettier)

[error] 135-136: Prettier formatting error: Replace double quotes with single quotes. (prettier/prettier) and Unexpected usage of doublequote. (jsx-quotes)

[error] 137-139: Prettier formatting error: Delete spaces and newlines. (prettier/prettier)

[error] 140-141: Prettier formatting error: Remove trailing comma. (comma-dangle)

🤖 Prompt for AI Agents 
In pages/casestudies/index.tsx from lines 30 to 150, the code has multiple
Prettier and ESLint errors due to double-quoted JSX attributes and multi-line
literals that violate project style conventions requiring single quotes and
properly formatted single-line attributes. To fix this, run the project
formatter using the command `pnpm lint --fix` or `npm run format` to
automatically correct these style issues. Alternatively, manually replace all
double quotes in JSX with single quotes, collapse multi-line attribute blocks
into single lines, and remove any trailing commas or newlines flagged by the
linter to ensure the code passes the style checks and the build succeeds.

</div>
</GenericLayout>
);
Expand Down
Loading