Skip to content

fix: Add smooth transition on Accordian #4569

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

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

fix: Add smooth transition on Accordian #4569

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
6 changes: 3 additions & 3 deletions components/Accordion/AccordionItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,11 +57,11 @@ export default function AccordionItem({ itemIndex, title, content, isActive, set
)}
</div>
</button>
{isActive && (
<div className='rounded-sm border-t border-gray-200 py-2 font-body font-regular text-gray-700 antialiased'>
{
<div className={`rounded-sm border-t border-gray-200 font-body font-regular text-gray-700 antialiased overflow-hidden transition-all duration-300 ease-in-out ${isActive ? 'max-h-40 opacity-100 py-2' : 'max-h-0 opacity-0 py-0'}`}>
Copy link
Contributor

@coderabbitai coderabbitai bot Nov 11, 2025

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🔴 Critical

Critical: max-h-40 will truncate content exceeding 160px.

The fixed max-h-40 class (160px) will clip FAQ answers longer than that height, breaking the user experience. FAQ content varies significantly in length.

Use max-h-screen or a sufficiently large value instead:

-        <div className={`rounded-sm border-t border-gray-200 font-body font-regular text-gray-700 antialiased overflow-hidden transition-all duration-300 ease-in-out ${isActive ? 'max-h-40 opacity-100 py-2' : 'max-h-0 opacity-0 py-0'}`}>
+        <div className={`rounded-sm border-t border-gray-200 font-body font-regular text-gray-700 antialiased overflow-hidden transition-all duration-300 ease-in-out ${isActive ? 'max-h-screen opacity-100 py-2' : 'max-h-0 opacity-0 py-0'}`}>
📝 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
<div className={`rounded-sm border-t border-gray-200 font-body font-regular text-gray-700 antialiased overflow-hidden transition-all duration-300 ease-in-out ${isActive ? 'max-h-40 opacity-100 py-2' : 'max-h-0 opacity-0 py-0'}`}>
<div className={`rounded-sm border-t border-gray-200 font-body font-regular text-gray-700 antialiased overflow-hidden transition-all duration-300 ease-in-out ${isActive ? 'max-h-screen opacity-100 py-2' : 'max-h-0 opacity-0 py-0'}`}>
🧰 Tools
🪛 GitHub Actions: PR testing - if Node project

[error] 61-61: Prettier formatting issue. Replace the long className string with a formatted multi-line expression. Run 'prettier --write' to fix code style.

🤖 Prompt for AI Agents 
In components/Accordion/AccordionItem.tsx around line 61, the hardcoded class
max-h-40 (160px) will truncate longer FAQ answers; replace it with a much larger
max-height such as max-h-screen (or a large explicit value like max-h-[1000px])
so content is not clipped when expanded, keeping the existing transition/opacity
classes intact and ensuring the expanded state uses the new max-h class instead
of max-h-40.

⚠️ Potential issue | 🟠 Major

Fix Prettier formatting violation.

The pipeline flagged this line for exceeding length limits. Break the className into multiple lines.

-        <div className={`rounded-sm border-t border-gray-200 font-body font-regular text-gray-700 antialiased overflow-hidden transition-all duration-300 ease-in-out ${isActive ? 'max-h-40 opacity-100 py-2' : 'max-h-0 opacity-0 py-0'}`}>
+        <div
+          className={`rounded-sm border-t border-gray-200 font-body font-regular text-gray-700 antialiased overflow-hidden transition-all duration-300 ease-in-out ${
+            isActive ? 'max-h-screen opacity-100 py-2' : 'max-h-0 opacity-0 py-0'
+          }`}
+        >
           {content}
         </div>

Committable suggestion skipped: line range outside the PR's diff.

🧰 Tools
🪛 GitHub Actions: PR testing - if Node project

[error] 61-61: Prettier formatting issue. Replace the long className string with a formatted multi-line expression. Run 'prettier --write' to fix code style.

🤖 Prompt for AI Agents 
In components/Accordion/AccordionItem.tsx around line 61, the single-line JSX
className exceeds Prettier's line-length limit; break the className string into
multiple concatenated/template segments or multiline JSX expression so each line
is shorter. Reformat the div's className prop across multiple lines (group
static classes on one or more lines and the conditional part on its own line),
keeping the same classes and ternary logic, ensuring indentation aligns with JSX
and Prettier will accept the wrapped lines.

{content}
</div>
)}
}
</div>
);
}
Loading