Skip to content

fix: Organization modal behavior on click#2035

Open
Nirula23 wants to merge 5 commits into
S3DFX-CYBER:mainfrom
Nirula23:fix/org-modal-behavior
Open

fix: Organization modal behavior on click#2035
Nirula23 wants to merge 5 commits into
S3DFX-CYBER:mainfrom
Nirula23:fix/org-modal-behavior

Conversation

@Nirula23

@Nirula23 Nirula23 commented Jul 23, 2026

Copy link
Copy Markdown
Contributor

📝 Description

This PR improves the interactivity and user experience of the Organizations directory and Hero section.

Changes made

  • Enabled opening the organization modal by clicking anywhere on an organization card, in addition to the existing View action.
  • Made organizations in the Watchlist interactive, allowing users to open the corresponding organization modal on click.
  • Enhanced the Hero section stat badges with subtle visual styling and hover effects to improve prominence and provide better interaction feedback.

🔗 Related Issue

Closes #1988

🚀 Program Classification

  • GSSoC26
  • NSoC26
  • General Contribution

🔄 Type of Change

  • 🐛 Bug fix
  • ✨ New feature
  • 🔍 SEO improvement
  • 🎨 Style / UI improvement
  • ♿ Accessibility improvement
  • 📝 Documentation
  • ⚙️ CI / configuration
  • 🧹 Refactor / cleanup

🧪 How to Test

  1. Open index.html in a browser
  2. Hover over the stat badges to see interactivity
  3. Navigate to Organizations Section
  4. Click on an Organization
  5. See that the Modal opens clicking anywhere on the card
  6. Scroll down to Watchlist
  7. Click on any organization
  8. Verify that the Org modal is rendered correctly

📸 Screenshots

Before After
Screenshot 2026-07-23 173513 Screenshot 2026-07-23 173605

✅ Checklist

  • My code follows the project's existing style
  • I have tested my changes in a browser
  • I have linked the related issue above
  • My PR title follows Conventional Commits format (e.g. feat: add scroll button)
  • I have not introduced any new dependencies or build tools

Review in cubic

Nirula23 added 3 commits July 15, 2026 20:53
Signed-off-by: Nirula <nirula2377@gmail.com>
… on it

Signed-off-by: Nirula <nirula2377@gmail.com>
Signed-off-by: Nirula <nirula2377@gmail.com>
@Nirula23
Nirula23 requested a review from S3DFX-CYBER as a code owner July 23, 2026 12:12
@vercel

vercel Bot commented Jul 23, 2026

Copy link
Copy Markdown
Contributor

@Nirula23 is attempting to deploy a commit to the s3dfx-cyber's projects Team on Vercel.

A member of the Team first needs to authorize it.

@github-actions github-actions Bot added bug Something isn't working frontend labels Jul 23, 2026
@github-actions

Copy link
Copy Markdown
Contributor

💬 Faster Reviews & Assignments

Hi @Nirula23, for faster coordination and smoother communication, consider joining our Discord community:

👉 https://discord.gg/jYrbHKtn8t

Useful Channels

  • #issue-links-for-assignment → Share issue links for assignment help
  • #pr-links-for-review → Share PR links for mentor/maintainer review

Please avoid spamming channels or repeatedly pinging mentors/maintainers.

@github-actions

Copy link
Copy Markdown
Contributor

👋 Thanks for opening a PR, @Nirula23!

Your PR has entered the 🚦 PR Review Pipeline.

🟢 GSSOC PR detected — your PR will be routed through the GSSOC mentor review pipeline.

⚠️ Dual-label notice: Both GSSOC and NSOC signals were detected in your PR. GSSoC takes priority and your PR has been classified as a GSSoC PR only. If this is incorrect, please remove the unintended program keyword from your PR description and push a new commit.


🔄 Review Flow

Stage Reviewer Purpose
Stage 1 🤖 Automation Validation · Duplicate Detection · AI/Slop Checks · Formatting · PR Analysis
Stage 2 🧑‍🏫 GSSOC Mentor Code Review · Scope Validation · Quality Check
Stage 3 🔑 Project Admin / Maintainer Final Approval & Merge Decision

The automated PR analysis system will verify issue linkage, PR relevance, and contribution quality.

A pipeline status comment may appear automatically as your PR progresses.


✅ Contributor Checklist

  • Sign commits using git commit -s
  • Link a valid issue (Closes #123)
  • Keep changes focused and relevant
  • Do not include unrelated modifications
  • Ensure workflows/build/tests are passing
  • Read the appropriate contributor guide:

⚠️ Important Notes

  • Low-quality, spammy, or AI-generated PRs may be closed
  • PRs without linked issues may fail automated checks
  • Large unrelated PRs are likely to be rejected
  • Review times may vary depending on mentor/reviewer availability

Happy contributing 🚀

This message is posted automatically and only once.

@greptile-apps greptile-apps Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Your trial has ended. Reactivate Greptile to resume code reviews.

@github-actions

Copy link
Copy Markdown
Contributor

✅ DCO Sign-off Verified

Hi @Nirula23 👋

All commits in this PR contain valid Signed-off-by lines.

Thank you for following the DCO requirements 🚀

@github-actions github-actions Bot added gssoc26 GirlScript Summer of Code 2026 size/s labels Jul 23, 2026
@github-actions

Copy link
Copy Markdown
Contributor

⚠️ Dual Program Label Detected

Hi @Nirula23,

Your PR description mentions both GSSOC and NSOC.

Detected Labels Resolution
gssoc, nsoc GSSoC priority applied — classified as a GSSoC PR

ℹ️ Only one program label may be active at a time. GSSoC takes priority when both are present.

If this is incorrect, please:

  1. Remove the unintended program keyword from your PR description
  2. Push a new commit or re-open the PR to re-trigger classification

📖 See our Contributing Guide for labeling details.

@github-project-automation github-project-automation Bot moved this to Todo in GSSOC 26 Jul 23, 2026
@github-actions github-actions Bot added gssoc26 GirlScript Summer of Code 2026 and removed gssoc26 GirlScript Summer of Code 2026 labels Jul 23, 2026
@github-actions

github-actions Bot commented Jul 23, 2026

Copy link
Copy Markdown
Contributor

✅ PR Validation Passed

Hi @Nirula23, automated PR validation checks passed.

Your PR is ready for review.

@github-actions

Copy link
Copy Markdown
Contributor

🤖 TENET Agent Review

📋 Summary

This PR enhances the user experience of the Organizations directory and Hero section by making organization cards and watchlist items clickable to open their respective modals. It also adds subtle hover effects and adjusts text sizes for the Hero section's stat badges. The changes primarily focus on UI/UX improvements and interactivity.

🔐 Security Findings

  • [SEVERITY: MEDIUM] index.html - The new event listeners on lines 3459-3461 and 4002-4004 pass org.name directly to the openModal function. While org.name is sanitized with escapeHtml when used in HTML attributes (data-open-org) and content (h3 tag), it's crucial that the openModal function itself sanitizes org.name before rendering it into the DOM, especially if org.name can originate from untrusted or user-controlled sources. Failure to do so could lead to Cross-Site Scripting (XSS).
    • Recommended fix: Ensure openModal performs robust sanitization (e.g., using escapeHtml or a similar mechanism) on org.name before inserting it into the modal's HTML content. Alternatively, if org.name is guaranteed to be from a trusted, internal source, document this assumption clearly.

🧹 Code Quality

  • index.html - The PR title "Fix/org modal behavior" does not strictly adhere to the Conventional Commits format (e.g., fix: Improve org modal behavior) as indicated in the checklist.
  • index.html - The use of arbitrary Tailwind values like text-[20px] (lines 1374, 1377, 1380) for text sizes could be made more consistent by defining custom font sizes in the Tailwind configuration or utilizing existing named classes if these sizes are intended to be reusable across the project.

✅ What's Done Well

  • Significantly improves user interactivity and experience by making organization cards and watchlist items directly clickable.
  • Adds consistent and subtle hover effects to the Hero section stat badges, enhancing visual feedback.
  • The "View" button's data-open-org attribute correctly uses escapeHtml(org.name), demonstrating good practice for preventing XSS in attributes.

📝 Overall Verdict

REQUEST CHANGES - Clarification and potential fix needed for org.name sanitization within openModal to prevent XSS.


Review powered by TENET Agent 🛡️ | Triggered automatically on PR #2035

@Nirula23 Nirula23 changed the title Fix/org modal behavior fix: Organization modal behavior on click Jul 23, 2026
@coderabbitai

coderabbitai Bot commented Jul 23, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

Warning

Review limit reached

@Nirula23, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 44 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 00d41958-914a-41e2-bb3a-f73305b2b552

📥 Commits

Reviewing files that changed from the base of the PR and between 19f3f07 and 358602b.

📒 Files selected for processing (1)
  • index.html
📝 Walkthrough

Walkthrough

Updates hero stat badges and enables organization modal opening from directory cards and watchlist items. The organization View button now passes the current organization name to the modal trigger.

Changes

Organization UI interactions

Layer / File(s) Summary
Hero stat badge presentation
index.html
Restyles the hero stat badges with updated typography, borders, hover behavior, and animation.
Directory card modal activation
index.html
Makes organization cards clickable, opens the matching modal, fixes the View button’s organization value, and adjusts listener registration.
Watchlist card modal activation
index.html
Adds interactive styling and click handling that opens the selected organization’s modal.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related issues

Possibly related PRs

Suggested reviewers: s3dfx-cyber, nihalawasthi, maxd646

Poem

I’m a bunny hopping through the card,
Clicking orgs is no longer hard.
Watchlist friends now open wide,
Stat badges sparkle with pride.
One neat modal, jump inside! 🐇

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title is concise and accurately summarizes the main UI behavior fix for organization modals.
Description check ✅ Passed The description mostly matches the template, with all required sections present and filled in.
Linked Issues check ✅ Passed The changes address #1988 by enabling card clicks, watchlist modal opening, and hero badge hover styling.
Out of Scope Changes check ✅ Passed The changes stay within the stated UI interaction and styling scope for the Organizations and Hero sections.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

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

Comment @coderabbitai help to get the list of available commands.

@github-actions github-actions Bot added gssoc26 GirlScript Summer of Code 2026 and removed gssoc26 GirlScript Summer of Code 2026 labels Jul 23, 2026

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@index.html`:
- Around line 1374-1384: Update the three badge label paragraphs in the cards
containing “Total Orgs,” “Languages,” and “Domains” so their default mobile font
size is smaller than the adjacent `text-lg` values; preserve the existing
`sm:text-sm` responsive behavior and all other card styling.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: ca0b20ae-d9b0-475c-a05f-f2286cd82a7c

📥 Commits

Reviewing files that changed from the base of the PR and between d5532ce and 5d8168e.

📒 Files selected for processing (1)
  • index.html
📜 Review details
⏰ Context from checks skipped due to timeout. (1)
  • GitHub Check: cubic · AI code reviewer
⚠️ CI failures not shown inline (1)

Commit Status: Vercel: Vercel

Conclusion: failure

Authorization required to deploy.
🔇 Additional comments (2)
index.html (2)

3495-3495: LGTM!

Also applies to: 3548-3548


3459-3464: 🎯 Functional Correctness

No action needed.

attachOrgCardListeners() already stops propagation on [data-open-org], [data-compare-org], bookmark buttons, and watchlist remove buttons, so nested controls won’t trigger the card/item-level openModal handlers.

Comment thread index.html Outdated
@github-project-automation github-project-automation Bot moved this from Todo to In progress in GSSOC 26 Jul 23, 2026
Signed-off-by: Nirula <nirula2377@gmail.com>

@greptile-apps greptile-apps Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Your trial has ended. Reactivate Greptile to resume code reviews.

@cubic-dev-ai cubic-dev-ai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

0 issues found across 1 file (changes from recent commits).

Confidence score: 5/5

  • Automated review surfaced no issues in the provided summaries.
  • No files require special attention.

Requires human review: Auto-approval blocked by 1 unresolved issue from previous reviews.

Re-trigger cubic

Signed-off-by: Nirula <nirula2377@gmail.com>

@greptile-apps greptile-apps Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Your trial has ended. Reactivate Greptile to resume code reviews.

@github-actions github-actions Bot added gssoc26 GirlScript Summer of Code 2026 and removed gssoc26 GirlScript Summer of Code 2026 labels Jul 23, 2026
@github-actions

Copy link
Copy Markdown
Contributor

🤖 TENET Agent Review

📋 Summary

This PR focuses on enhancing the user interface and interactivity of the application. It enables users to open organization modals by clicking anywhere on an organization card in the directory and on watchlist items, improving navigation and user experience. Additionally, the PR introduces subtle visual styling and hover effects to the stat badges in the Hero section, making them more prominent and interactive.

🔐 Security Findings

  • [SEVERITY: LOW] index.html - The org.name variable is passed directly to the openModal function when an organization card or watchlist item is clicked (lines 3459, 4002). While org.name is escaped using escapeHtml for display in other parts of the template, it is critical to ensure that the openModal function itself properly sanitizes or escapes org.name before it is rendered into the DOM. If org.name could ever contain user-controlled or untrusted input, and openModal directly injects this into HTML, it could lead to a DOM-based Cross-Site Scripting (XSS) vulnerability. Recommend verifying openModal's implementation to ensure robust sanitization.

🧹 Code Quality

  • index.html - For dynamically generated content, attaching event listeners directly to each element (lines 3459-3461, 4002-4004) can be less performant than using event delegation on a parent container, especially if the number of organizations grows very large. While acceptable for the current scale, consider event delegation for future scalability.

✅ What's Done Well

  1. Enhanced User Experience: Making entire organization cards and watchlist items clickable significantly improves the intuitiveness and ease of navigation for users.
  2. Clear Visual Feedback: The addition of cursor-pointer and hover effects provides excellent visual cues, indicating interactive elements and improving overall usability.
  3. Consistent Styling: The new styling for the Hero section stat badges integrates well with the existing design language, enhancing the visual appeal and prominence of key metrics.

📝 Overall Verdict

[REQUEST CHANGES] - Address the potential XSS vector in openModal by ensuring org.name is sanitized before rendering.

@sonarqubecloud

Copy link
Copy Markdown

@cubic-dev-ai cubic-dev-ai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

0 issues found across 1 file (changes from recent commits).

Confidence score: 5/5

  • Automated review surfaced no issues in the provided summaries.
  • No files require special attention.

Auto-approved: Improves UX by making org cards and watchlist items clickable to open the modal, and adds hover effects to stat badges. A bounded, clearly beneficial front-end change.

Re-trigger cubic

@vercel

vercel Bot commented Jul 23, 2026

Copy link
Copy Markdown
Contributor

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
g-so-c-org-finder Ready Ready Preview, Comment Jul 23, 2026 12:43pm

@KumarNirupam1 KumarNirupam1 left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

The implementation correctly makes organization cards and watchlist items clickable while preserving the existing modal behavior. The added hover states and cursor-pointer also provide clearer interaction feedback.

I don't see any blocking issues in the current implementation. The remaining comments are optional maintainability considerations rather than regressions introduced by this PR.

lgtm 👍

@Nirula23

Copy link
Copy Markdown
Contributor Author

The implementation correctly makes organization cards and watchlist items clickable while preserving the existing modal behavior. The added hover states and cursor-pointer also provide clearer interaction feedback.

I don't see any blocking issues in the current implementation. The remaining comments are optional maintainability considerations rather than regressions introduced by this PR.

lgtm 👍

Thank you for the feedback!

@deepak0x deepak0x left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

approved. modal behavior fix looks correct.

@AnirudhPhophalia AnirudhPhophalia left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

lgtm 👍

@github-actions

Copy link
Copy Markdown
Contributor

🚦 PR Review Pipeline

🟢 GSSOC PR

Stage Status
Stage 1 — Automated Checks ✅ All automated checks passed
Stage 2 — Mentor/Reviewer ⏳ Awaiting GSSOC mentor review
Stage 3 — Maintainer 🔒 Blocked until Stage 2 passes

No active issues


Last updated: Fri, 24 Jul 2026 04:25:04 GMT

@github-actions
github-actions Bot requested review from 12fahed and removed request for TarunyaProgrammer July 24, 2026 13:20
@github-actions

Copy link
Copy Markdown
Contributor

⏰ Mentor Review Timeout

The following reviewer(s) did not respond within 24 hours:

Replacement reviewer(s) assigned:


Mentors are expected to review within 24 hours. This is an automated rotation.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

Status: In progress

Development

Successfully merging this pull request may close these issues.

[BUG] : Organization modal functionality & hero section UI enhancement

4 participants