Refactor PopularButton component structure for improved layout and responsiveness

[CkhGueye]

Summary

Fixes #JIRA-TICKET

This PR improve the layout and the responsiveness of the PopularButton Component by centering the Dropdown showed when the button is clicked. Before this change the dropdown block was centered only in the english version of the site because of the structure and some values used weren't relative.

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

Test plan

Manual cross-browser testing.

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my code
• My changes generate no new warnings
• Any dependent changes have been merged and published in downstream modules
• I have commented on my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes

Screenshots or videos

Before	After

Summary by CodeRabbit

• Refactor

  • Reorganized the Popular dropdown: compact header with an inline Close button and a clearer, separated body section for improved readability.

• Style

  • Home hero buttons use a two-column grid for cleaner alignment.
  • Improved responsive sizing with logical properties for better adaptability across screens.
  • Tweaked spacing and margins for a more balanced layout.

[vercel]

@CkhGueye is attempting to deploy a commit to the Quran Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Walkthrough

Refactors PopularButton’s expanded dropdown markup, introducing a header with an inline Close button and a dedicated body section. Updates HomePage hero layout to a two-column grid. SCSS adopts logical properties (inline-size, block-size) and grid placements, with minor syntax/style normalizations. No exported APIs changed.

Changes

Cohort / File(s)	Summary of changes
PopularButton SCSS refactor src/components/HomePage/HeroButtons/PopularButton/PopularButton.module.scss	Normalize import quotes; switch some dimensions to logical properties; shift positioning to grid (buttonWrapper, dropdownContainer); consolidate breakpoint rules; formatting/indentation cleanups; preserve visual styling with responsive adjustments.
PopularButton structure update src/components/HomePage/HeroButtons/PopularButton/index.tsx	Restructure expanded DOM: wrap content with buttonWrapper and dropdownContainer; header now includes left-aligned title and a Close button; add HR separator; move body content into dedicated container; retain isExpanded gating.
HomePage hero layout tweaks src/components/HomePage/HomePageHero.module.scss	Normalize import quotes; replace width/height with inline-size/block-size where applicable; change buttonsContainer from flex to grid with two columns; adjust margins and grid placement/alignments.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor User
  participant PopularButton
  participant UI as Dropdown UI

  User->>PopularButton: Click
  alt Collapsed
    PopularButton->>PopularButton: set isExpanded = true
    PopularButton->>UI: Render header (Popular + Close), HR, body
  else Expanded
    User->>PopularButton: Click Close
    PopularButton->>PopularButton: set isExpanded = false
    PopularButton-->>UI: Unmount dropdown
  end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

I hop through grids where buttons bloom,
A tidy header clears the room.
Close on the right, content below—
Inline-size rivers softly flow.
Two columns wide, the hero sings;
I twitch my ears at layout things.
Thump-thump—responsive spring! 🐇✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The pull request title accurately and concisely describes the main change of refactoring the PopularButton component’s structure to enhance layout and responsiveness, matching the core modifications in the diff.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.
Description Check	✅ Passed	The pull request description adheres to the repository template by including a summary with the JIRA ticket reference, a concise description of the layout and responsiveness improvements, the type of change with the correct checkbox selected, a clear test plan, a fully completed checklist, and before/after screenshots in the required table format.

✨ Finishing touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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

[coderabbitai]

Actionable comments posted: 6

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/components/HomePage/HeroButtons/PopularButton/index.tsx (1)

30-35: Expose expanded state to AT and link trigger to panel.

Add aria-expanded and aria-controls to the trigger button.

       <Button
         variant={ButtonVariant.Simplified}
         className={heroButtonStyles.button}
         onClick={onClick}
         size={ButtonSize.Small}
+        aria-expanded={isExpanded}
+        aria-controls="popular-dropdown"
       >

As per coding guidelines: Implement proper ARIA attributes, ensure keyboard navigation.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 139492c and 5e233f1.

📒 Files selected for processing (3)

• src/components/HomePage/HeroButtons/PopularButton/PopularButton.module.scss (1 hunks)
• src/components/HomePage/HeroButtons/PopularButton/index.tsx (2 hunks)
• src/components/HomePage/HomePageHero.module.scss (3 hunks)

🧰 Additional context used

📓 Path-based instructions (10)

**/*.*

📄 CodeRabbit inference engine (.cursor/rules/bug-handling-with-todo-comments.mdc)

If you encounter a bug in existing code, or the instructions lead to suboptimal or buggy code, add comments starting with "TODO:" outlining the problems.

**/*.*: Utilize Early Returns: Use early returns to avoid nested conditions and improve readability.
Conditional Classes: Prefer conditional classes over ternary operators for class attributes.

**/*.*: Use comments sparingly, and when you do, make them meaningful.
Don't comment on obvious things. Excessive or unclear comments can clutter the codebase and become outdated.
Use comments to convey the 'why' behind specific actions or explain unusual behavior and potential pitfalls.
Provide meaningful information about the function's behavior and explain unusual behavior and potential pitfalls.

**/*.*: Write short functions that only do one thing.
Follow the single responsibility principle (SRP), which means that a function should have one purpose and perform it effectively.
If a function becomes too long or complex, consider breaking it into smaller, more manageable functions.

Order functions with those that are composing other functions appearing earlier in the file. For example, if you have a menu with multiple buttons, define the menu function above the buttons.

**/*.*: Always add helpful comments to the code explaining what you are doing.
Never delete old comments, unless they are no longer relevant because the code has been rewritten or deleted.

**/*.*: Choose names for variables, functions, and classes that reflect their purpose and behavior.
A name should tell you why it exists, what it does, and how it is used. If a name requires a comment, then the name does not reveal its intent.
Use specific names that provide a clearer understanding of what the variables represent and how they are used.

Files:

• src/components/HomePage/HomePageHero.module.scss
• src/components/HomePage/HeroButtons/PopularButton/PopularButton.module.scss
• src/components/HomePage/HeroButtons/PopularButton/index.tsx

**/*.module.scss

📄 CodeRabbit inference engine (CLAUDE.md)

Use SCSS Modules for component styles (files should be named *.module.scss)

Use SCSS modules for component styling

Files:

• src/components/HomePage/HomePageHero.module.scss
• src/components/HomePage/HeroButtons/PopularButton/PopularButton.module.scss

**/*.{ts,tsx,scss,json}

📄 CodeRabbit inference engine (AGENTS.md)

Format with Prettier: single quotes, 2-space indentation, 100-character line width, trailing commas

Files:

• src/components/HomePage/HomePageHero.module.scss
• src/components/HomePage/HeroButtons/PopularButton/PopularButton.module.scss
• src/components/HomePage/HeroButtons/PopularButton/index.tsx

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

📄 CodeRabbit inference engine (AGENTS.md)

File names may be kebab-case, camelCase, or PascalCase; co-locate files with related modules

Files:

• src/components/HomePage/HomePageHero.module.scss
• src/components/HomePage/HeroButtons/PopularButton/PopularButton.module.scss
• src/components/HomePage/HeroButtons/PopularButton/index.tsx

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

📄 CodeRabbit inference engine (.cursor/rules/next-js-conventions.mdc)

**/*.{js,jsx,ts,tsx}: Rely on Next.js Pages Router for state changes.
Minimize 'use client' usage: Prefer server components and Next.js SSR features.
Minimize 'use client' usage: Use 'use client' only for Web API access in small components.
Minimize 'use client' usage: Avoid using 'use client' for data fetching or state management.

**/*.{js,jsx,ts,tsx}: Optimize Web Vitals (LCP, CLS, FID)
Use dynamic loading for non-critical components using @src/components/dls/Spinner/Spinner.tsx

Files:

• src/components/HomePage/HeroButtons/PopularButton/index.tsx

src/components/**/*.tsx

📄 CodeRabbit inference engine (.cursor/rules/react-functional-components.mdc)

src/components/**/*.tsx: Always use React functional components with hooks.
Use React.FC for functional components with props.

Files:

• src/components/HomePage/HeroButtons/PopularButton/index.tsx

**/*.{tsx,jsx}

📄 CodeRabbit inference engine (.cursor/rules/react.mdc)

**/*.{tsx,jsx}: Use functional components over class components
Keep components small and focused
Extract reusable logic into custom hooks
Use composition over inheritance
Split large components into smaller, focused ones
Follow the Rules of Hooks
Use custom hooks for reusable logic
Use appropriate dependency arrays in useEffect
Implement cleanup in useEffect when needed
Avoid nested hooks
Use useState for local component state
Avoid prop drilling through proper state management
Implement proper memoization (useMemo, useCallback)
Use React.memo for expensive components
Avoid unnecessary re-renders
Implement proper lazy loading
Use proper key props in lists
Profile and optimize render performance
Show appropriate loading and error states
Handle async errors properly
Show user-friendly error messages
Implement proper fallback UI
Log errors appropriately
Handle edge cases gracefully
Use semantic HTML elements
Implement proper ARIA attributes
Ensure keyboard navigation
Handle focus management
Provide proper alt text for images
Use proper imports/exports
Document complex component logic

Use React functional components instead of class components

Files:

• src/components/HomePage/HeroButtons/PopularButton/index.tsx

**/*.tsx

📄 CodeRabbit inference engine (.cursor/rules/react.mdc)

Implement proper prop types with TypeScript

**/*.tsx: Prefix interfaces for React props with 'Props' (e.g., ButtonProps)
Implement proper error boundaries

**/*.tsx: Use React functional components only (no class components)
Apply proper memoization for components/selectors (e.g., React.memo, useMemo, useCallback)
Cursor rule: React patterns (functional components, custom hooks, proper state management)
Cursor rule: Performance optimization (proper memoization, lazy loading)

Files:

• src/components/HomePage/HeroButtons/PopularButton/index.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/react.mdc)

Use xstate for complex state logic

Prefer importing via path aliases (@/, @/dls/*) rather than long relative paths

**/*.{ts,tsx}: Order imports: React first, then external, then internal; alphabetize with blank lines between groups
Use camelCase for variables/functions, PascalCase for types/interfaces/components, and UPPER_CASE for constants
Prefer interfaces over type aliases for object shapes
Provide explicit return types for public functions and avoid any
Extract reusable logic into custom hooks
Implement robust error handling: custom error types, async/await best practices, and user-friendly messages
Functions should be under 30 lines, use early returns, follow single-responsibility, and have descriptive names
Cursor rule: TypeScript best practices (interfaces over types, strict mode, proper generics)
Cursor rule: Naming conventions (descriptive, intent-revealing names)
Cursor rule: Clean code (early returns, proper conditionals, function ordering)

Files:

• src/components/HomePage/HeroButtons/PopularButton/index.tsx

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

📄 CodeRabbit inference engine (.cursor/rules/typescript.mdc)

**/*.{ts,tsx,d.ts}: Prefer interfaces over types for object definitions
Use type for unions, intersections, and mapped types
Avoid using any, prefer unknown for unknown types
Leverage TypeScript's built-in utility types
Use generics for reusable type patterns
Use PascalCase for type names and interfaces
Use camelCase for variables and functions
Use UPPER_CASE for constants
Use descriptive names with auxiliary verbs (e.g., isLoading, hasError)
Use explicit return types for public functions
Use arrow functions for callbacks and methods
Implement proper error handling with custom error types
Use function overloads for complex type scenarios
Prefer async/await over Promises
Use readonly for immutable properties
Leverage discriminated unions for type safety
Use type guards for runtime type checking
Implement proper null checking
Avoid type assertions unless necessary
Create custom error types for domain-specific errors
Use Result types for operations that can fail
Use try-catch blocks with typed catch clauses
Handle Promise rejections properly

Files:

• src/components/HomePage/HeroButtons/PopularButton/index.tsx

🧠 Learnings (1)

📚 Learning: 2025-09-01T12:38:29.031Z

Learnt from: CR
PR: quran/quran.com-frontend-next#0
File: CLAUDE.md:0-0
Timestamp: 2025-09-01T12:38:29.031Z
Learning: Applies to src/styles/_breakpoints.scss : Define responsive breakpoints in src/styles/_breakpoints.scss

Applied to files:

• src/components/HomePage/HomePageHero.module.scss
• src/components/HomePage/HeroButtons/PopularButton/PopularButton.module.scss

🔇 Additional comments (1)

src/components/HomePage/HeroButtons/PopularButton/index.tsx (1)

59-66: Icon-only Close button lacks an accessible name.

Provide an aria-label (and title) for screen readers and tooltips.

                   <Button
                     shape={ButtonShape.Circle}
                     variant={ButtonVariant.Ghost}
                     shouldFlipOnRTL={false}
                     onClick={onCloseClicked}
+                    aria-label={t('common:close')}
+                    title={t('common:close')}
                   >
                     <CloseIcon />
                   </Button>

Please verify the existence of the translation key. Run:

The merge-base changed after approval.