Fix finance memory leak remove resize listener leak and layout shift

[codxbrexx]

Description

This fixes the Finance page memory leak by removing the page-level resize listener that was not being cleaned up correctly. It also replaces the JavaScript width check with responsive CSS so the page no longer shifts layout after load.

Related issue(s)

Resolves #5114

Summary by CodeRabbit

• Style

  • Updated Select component focus styling for a refined visual appearance.

• Refactor

  • Simplified finance page responsive layout implementation using Tailwind classes, improving code maintainability.

[netlify]

✅ Deploy Preview for asyncapi-website ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	94e8b66
🔍 Latest deploy log	https://app.netlify.com/projects/asyncapi-website/deploys/69c6f50fa44afe00086180af
😎 Deploy Preview	https://deploy-preview-5285--asyncapi-website.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[asyncapi-bot]

We require all PRs to follow Conventional Commits specification.
More details 👇🏼

 No release type found in pull request title "Fix finance memory leak remove resize listener leak and layout shift". Add a prefix to indicate what kind of release this pull request corresponds to. For reference, see https://www.conventionalcommits.org/

Available types:
 - feat: A new feature
 - fix: A bug fix
 - docs: Documentation only changes
 - style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
 - refactor: A code change that neither fixes a bug nor adds a feature
 - perf: A code change that improves performance
 - test: Adding missing tests or correcting existing tests
 - build: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
 - ci: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)
 - chore: Other changes that don't modify src or test files
 - revert: Reverts a previous commit

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 58a7c122-6427-434f-a0d7-4b216bea2f01

📥 Commits

Reviewing files that changed from the base of the PR and between f51d0b0 and 3648d65.

📒 Files selected for processing (2)

• components/form/Select.tsx
• pages/finance.tsx

---

📝 Walkthrough

Walkthrough

Updated Select component focus styling for visual consistency. Removed client-side resize state management from Finance page and replaced dynamic container logic with Tailwind-based CSS media queries to eliminate memory leak and layout shift issues.

Changes

Cohort / File(s)	Summary
Form Component Styling components/form/Select.tsx	Refined focus ring styling by replacing focus:ring-2 with thinner focus:ring-1 and updating color scheme from focus:ring-offset-gray-100 to focus:border-indigo-500.
Finance Page Refactoring pages/finance.tsx	Removed useState, useRef, and useEffect hooks for tracking window width and conditional Container wrapping. Replaced dynamic responsive logic with fixed Tailwind container using w-full 2xl:mx-auto 2xl:max-w-screen-xl media query breakpoints.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 A memory leak once plagued the page,
With handlers multiplying with every stage,
But CSS queries, oh so divine,
Made layout smooth and resize logic fine,
No more observers, just media queries—
Our Finance page hops swift as berries! 🥕

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	The Select.tsx focus ring styling change is out-of-scope; it is unrelated to the Finance page memory leak and layout shift issues specified in issue #5114.	Either remove the Select.tsx styling changes from this PR or create a separate PR for them to keep the memory leak fix focused and traceable to issue #5114.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main changes: removing the resize listener memory leak and fixing layout shift on the Finance page, which are the core objectives.
Linked Issues check	✅ Passed	The PR successfully addresses both coding requirements from issue #5114: removes the problematic resize listener and related state that caused the memory leak, and replaces JS width checks with responsive CSS (2xl: Tailwind classes) to prevent layout shift.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ 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

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (7602c4e) to head (94e8b66).
⚠️ Report is 17 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff            @@
##            master     #5285   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           22        22           
  Lines          830       830           
  Branches       159       159           
=========================================
  Hits           830       830           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[asyncapi-bot]

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🔴 Performance	47
🟢 Accessibility	98
🟢 Best practices	92
🟢 SEO	100
🔴 PWA	33

Lighthouse ran on https://deploy-preview-5285--asyncapi-website.netlify.app/

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud