Skip to content
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

fix: add scrollable Community dropdown to display all content #3553

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
+1 −1
Open

fix: add scrollable Community dropdown to display all content #3553

Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2710835
Add scrollable Community dropdown to display all content
rahulrana701 Jan 7, 2025
a706c39
Merge branch 'master' into fix/community-dropdown-scroll
asyncapi-bot Jan 7, 2025
2fdfa1f
fixed
rahulrana701 Jan 7, 2025
dff3ed6
eslint fixed
rahulrana701 Jan 7, 2025
9e0b413
css fixed
rahulrana701 Jan 10, 2025
58d41d8
lint fixed
rahulrana701 Jan 10, 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
10 changes: 5 additions & 5 deletions components/navigation/FlyoutMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,12 @@ interface FlyoutProps {
export default function Flyout({ items = [] }: FlyoutProps) {
return (
<div
className='absolute z-50 -ml-4 w-screen max-w-md pt-3 md:ml-12 md:-translate-x-1/2 lg:left-1/2 lg:max-w-3xl lg:-translate-x-1/2'
data-testid='Flyout-main'
className="absolute z-50 -ml-4 w-screen max-w-md pt-3 md:ml-12 md:-translate-x-1/2 lg:left-1/2 lg:max-w-3xl lg:-translate-x-1/2"
data-testid="Flyout-main"
>
<div className='rounded-lg shadow-lg'>
<div className='shadow-xs overflow-hidden rounded-lg'>
<div className='relative z-20 grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8 lg:grid-cols-2'>
<div className="rounded-lg shadow-lg">
<div className="shadow-xs overflow-hidden rounded-lg">
<div className="relative z-20 grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8 lg:grid-cols-2 max-h-96 min-h-40 overflow-y-auto scrollbar-thin scrollbar-thumb-white scrollbar-track-transparent">
Copy link

Choose a reason for hiding this comment

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

⚠️ Potential issue

Fix quote style to match project conventions.

Replace double quotes with single quotes in JSX attributes to comply with project conventions and fix CI failures.

Apply this change across all JSX attributes:

-      className="absolute z-50 -ml-4 w-screen max-w-md pt-3 md:ml-12 md:-translate-x-1/2 lg:left-1/2 lg:max-w-3xl lg:-translate-x-1/2"
+      className='absolute z-50 -ml-4 w-screen max-w-md pt-3 md:ml-12 md:-translate-x-1/2 lg:left-1/2 lg:max-w-3xl lg:-translate-x-1/2'
-      data-testid="Flyout-main"
+      data-testid='Flyout-main'
📝 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
className="absolute z-50 -ml-4 w-screen max-w-md pt-3 md:ml-12 md:-translate-x-1/2 lg:left-1/2 lg:max-w-3xl lg:-translate-x-1/2"
data-testid="Flyout-main"
>
<div className='rounded-lg shadow-lg'>
<div className='shadow-xs overflow-hidden rounded-lg'>
<div className='relative z-20 grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8 lg:grid-cols-2'>
<div className="rounded-lg shadow-lg">
<div className="shadow-xs overflow-hidden rounded-lg">
<div className="relative z-20 grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8 lg:grid-cols-2 max-h-96 min-h-40 overflow-y-auto scrollbar-thin scrollbar-thumb-white scrollbar-track-transparent">
className='absolute z-50 -ml-4 w-screen max-w-md pt-3 md:ml-12 md:-translate-x-1/2 lg:left-1/2 lg:max-w-3xl lg:-translate-x-1/2'
data-testid='Flyout-main'
>
<div className='rounded-lg shadow-lg'>
<div className='shadow-xs overflow-hidden rounded-lg'>
<div className='relative z-20 grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8 lg:grid-cols-2 max-h-96 min-h-40 overflow-y-auto scrollbar-thin scrollbar-thumb-white scrollbar-track-transparent'>
🧰 Tools
🪛 eslint

[error] 17-17: Replace "absolute·z-50·-ml-4·w-screen·max-w-md·pt-3·md:ml-12·md:-translate-x-1/2·lg:left-1/2·lg:max-w-3xl·lg:-translate-x-1/2" with 'absolute·z-50·-ml-4·w-screen·max-w-md·pt-3·md:ml-12·md:-translate-x-1/2·lg:left-1/2·lg:max-w-3xl·lg:-translate-x-1/2'

(prettier/prettier)

[error] 17-17: Unexpected usage of doublequote.

(jsx-quotes)

[error] 18-18: Replace "Flyout-main" with 'Flyout-main'

(prettier/prettier)

[error] 18-18: Unexpected usage of doublequote.

(jsx-quotes)

[error] 20-20: Replace "rounded-lg·shadow-lg" with 'rounded-lg·shadow-lg'

(prettier/prettier)

[error] 20-20: Unexpected usage of doublequote.

(jsx-quotes)

[error] 21-21: Replace "shadow-xs·overflow-hidden·rounded-lg" with 'shadow-xs·overflow-hidden·rounded-lg'

(prettier/prettier)

[error] 21-21: Unexpected usage of doublequote.

(jsx-quotes)

[error] 22-22: Replace "relative·z-20·grid·gap-6·bg-white·px-5·py-6·sm:gap-8·sm:p-8·lg:grid-cols-2·max-h-96·min-h-40·overflow-y-auto·scrollbar-thin·scrollbar-thumb-white·scrollbar-track-transparent" with 'relative·z-20·grid·gap-6·bg-white·px-5·py-6·sm:gap-8·sm:p-8·lg:grid-cols-2·max-h-96·min-h-40·overflow-y-auto·scrollbar-thin·scrollbar-thumb-white·scrollbar-track-transparent'

(prettier/prettier)

[error] 22-22: Unexpected usage of doublequote.

(jsx-quotes)

🪛 GitHub Actions: PR testing - if Node project

[error] 17-17: Double quotes used instead of single quotes for JSX attributes

[error] 18-18: Double quotes used instead of single quotes for JSX attributes

[error] 20-21: Double quotes used instead of single quotes for JSX attributes

[warning] 22-22: Invalid Tailwind CSS classnames order

[error] 22-22: Double quotes used instead of single quotes for JSX attributes

Copy link

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Review scrollbar visibility and fix class ordering.

Two concerns with the scrollbar implementation:

  1. A white scrollbar thumb (scrollbar-thumb-white) on a white background (bg-white) might be difficult to see.
  2. Tailwind classes should follow the recommended ordering convention.

Consider these improvements:

  1. Use a different color for better contrast:
-          <div className="relative z-20 grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8 lg:grid-cols-2 max-h-96 min-h-40 overflow-y-auto scrollbar-thin scrollbar-thumb-white scrollbar-track-transparent">
+          <div className="relative z-20 grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8 lg:grid-cols-2 max-h-96 min-h-40 overflow-y-auto scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-transparent">
  1. Reorder Tailwind classes following the convention:
-          <div className="relative z-20 grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8 lg:grid-cols-2 max-h-96 min-h-40 overflow-y-auto scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-transparent">
+          <div className="relative z-20 max-h-96 min-h-40 grid gap-6 bg-white px-5 py-6 overflow-y-auto scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-transparent sm:gap-8 sm:p-8 lg:grid-cols-2">
📝 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="relative z-20 grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8 lg:grid-cols-2 max-h-96 min-h-40 overflow-y-auto scrollbar-thin scrollbar-thumb-white scrollbar-track-transparent">
<div className="relative z-20 max-h-96 min-h-40 grid gap-6 bg-white px-5 py-6 overflow-y-auto scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-transparent sm:gap-8 sm:p-8 lg:grid-cols-2">
🧰 Tools
🪛 eslint

[error] 22-22: Replace "relative·z-20·grid·gap-6·bg-white·px-5·py-6·sm:gap-8·sm:p-8·lg:grid-cols-2·max-h-96·min-h-40·overflow-y-auto·scrollbar-thin·scrollbar-thumb-white·scrollbar-track-transparent" with 'relative·z-20·grid·gap-6·bg-white·px-5·py-6·sm:gap-8·sm:p-8·lg:grid-cols-2·max-h-96·min-h-40·overflow-y-auto·scrollbar-thin·scrollbar-thumb-white·scrollbar-track-transparent'

(prettier/prettier)

[error] 22-22: Unexpected usage of doublequote.

(jsx-quotes)

🪛 GitHub Actions: PR testing - if Node project

[warning] 22-22: Invalid Tailwind CSS classnames order

[error] 22-22: Double quotes used instead of single quotes for JSX attributes

<MenuBlocks items={items} />
</div>
</div>
Expand Down
Loading