fix: Ensure header button border remain visible on mobile hover/focus

[Rohs21]

Fixes #1596 : Ensure header button icons remain visible on mobile hover/focus
Problem
In mobile view, the icons inside the header buttons (Browse and Events) were disappearing when hovered or focused. This issue did not occur in desktop view, where the icons behaved as expected. The problem was caused by CSS rules that altered the fill, opacity, or visibility of the icons on hover/focus, combined with mobile-specific styles.

Solution
The CSS for .app-header-btn was updated with border color = "#00f2fe" to ensure the buttons remain visible and properly styled on hover/focus in mobile view.

Changes Made
Added a mobile-specific CSS rule to ensure the icons inside .app-header-btn remain visible with the border color "#00f2fe" on hover/focus.
Ensured the display, width, height, opacity, visibility, and fill properties of the icons are correctly set for mobile view.

Before and After

Before: buttons disappear on hover/focus in mobile view.

After: buttons border remain visible and styled correctly on hover/focus in mobile view.

[netlify]

✅ Deploy Preview for reactplayio ready!

Name	Link
🔨 Latest commit	d7b306c
🔍 Latest deploy log	https://app.netlify.com/projects/reactplayio/deploys/68e3ff4b2d700a0008f452dd
😎 Deploy Preview	https://deploy-preview-1602--reactplayio.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.

[github-actions]

Hey! contributor, thank you for opening a Pull Request 🎉.

@reactplay/maintainers will review your submission soon and give you helpful feedback. If you're interested in continuing your contributions to open source and want to be a part of a welcoming and fantastic community, we invite you to join our ReactPlay Discord Community.
Show your support by starring ⭐ this repository. Thank you and we appreciate your contribution to open source!
Stale Marking : After 30 days of inactivity this issue/PR will be marked as stale issue/PR and it will be closed and locked in 7 days if no further activity occurs.

[priyankarpal]

### Diagnosis
The build failed with the following error:

Module not found: Error: Can't resolve './components/HomePage' in '/opt/build/repo/src/plays/zoomlogin'

This error indicates that the build process is unable to find the file `HomePage.js` in the directory `/src/plays/zoomlogin`.

### Solution
1. Verify that the file `HomePage.js` exists in the directory `/src/plays/zoomlogin` in your repository.
2. If the file exists, ensure that it is correctly named and the path is accurate.
3. If the file is missing or misplaced, move the `HomePage.js` file to the correct location or create it if necessary.
4. After verifying the file presence and location, ensure that the import path in your code is correct and matches the actual file location.

The relevant error logs are:

Line 0: build-image version: 235a96ed6c11cbdf942eed7e70e6802956f9b464 (focal)
Line 1: buildbot version: a8227f684d13e2f14c4dff2ff89b1b5fbedbc9d9
Line 2: Fetching cached dependencies
Line 3: Failed to fetch cache, continuing with build
Line 4: Starting to prepare the repo for build
Line 5: No cached dependencies found. Cloning fresh repo
Line 6: git clone --filter=blob:none https://github.com/reactplay/react-play
Line 7: Preparing Git Reference pull/1602/head
Line 8: Starting to install dependencies
Line 9: �[2mmise�[0m �[34mpython�[0m@3.13.7   install
Line 10: �[2mmise�[0m �[34mpython�[0m@3.13.7   download cpython-3.13.7+20250918-x86_64-unknown-linux-gnu-install_only_stripped.tar.gz
Line 11: �[2mmise�[0m �[34mpython�[0m@3.13.7   extract cpython-3.13.7+20250918-x86_64-unknown-linux-gnu-install_only_stripped.tar.gz
Line 12: �[2mmise�[0m �[34mpython�[0m@3.13.7   python --version
Line 13: �[2mmise�[0m �[34mpython�[0m@3.13.7   Python 3.13.7
Line 99: Progress: resolved 658, reused 0, downloaded 617, added 0
Line 100: Progress: resolved 779, reused 0, downloaded 714, added 0
Line 101: Progress: resolved 807, reused 0, downloaded 750, added 0
Line 102: Progress: resolved 854, reused 0, downloaded 793, added 0
Line 103: Progress: resolved 942, reused 0, downloaded 875, added 0
Line 104: Progress: resolved 1059, reused 0, downloaded 989, added 0
Line 105: Progress: resolved 1206, reused 0, downloaded 1127, added 0
Line 106: Progress: resolved 1379, reused 0, downloaded 1302, added 0
Line 107: Progress: resolved 1530, reused 0, downloaded 1437, added 0
Line 108: Progress: resolved 1704, reused 0, downloaded 1606, added 0
Line 109:  WARN  32 deprecated subdependencies found: @babel/plugin-proposal-class-properties@7.18.6, @babel/plugin-proposal-nullish-coale
Line 110: Progress: resolved 1808, reused 0, downloaded 1776, added 0
Line 111: Packages: +1775
Line 112: ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Line 113: Progress: resolved 1808, reused 0, downloaded 1778, added 130
Line 114: Progress: resolved 1808, reused 0, downloaded 1778, added 657
Line 115: Progress: resolved 1808, reused 0, downloaded 1778, added 746
Line 116: Progress: resolved 1808, reused 0, downloaded 1778, added 783
Line 117: Progress: resolved 1808, reused 0, downloaded 1778, added 861
Line 118: Progress: resolved 1808, reused 0, downloaded 1778, added 1306
Line 119: Progress: resolved 1808, reused 0, downloaded 1778, added 1774
Line 172: + mathjs 11.12.0 (14.8.2 is available)
Line 173: + p5 1.11.10 (2.0.5 is available)
Line 174: + react 18.3.1 (19.2.0 is available)
Line 175: + react-chatbot-kit 2.2.2
Line 176: + react-codemirror2 7.3.0 (8.0.1 is available)
Line 177: + react-color 2.19.3
Line 178: + react-confetti 6.4.0
Line 179: + react-countdown 2.3.6
Line 180: + react-dom 18.3.1 (19.2.0 is available)
Line 181: + react-dropzone 14.3.8
Line 182: + react-error-boundary 3.1.4 (6.0.0 is available)
Line 183: + react-helmet 6.1.0
Line 184: + react-hot-toast 2.6.0
Line 185: + react-icons 4.12.0 (5.5.0 is available)
Line 186: + react-infinite-scroll-component 6.1.0
Line 187: + react-infinite-scroll-hook 4.1.1 (6.0.1 is available)
Line 188: + react-infinite-scroller 1.2.6
Line 189: + react-leaflet 4.2.1 (5.0.0 is available)
Line 190: + react-loader-spinner 5.1.5 (7.0.3 is available)
Line 191: + react-organizational-chart 2.2.1
Line 192: + react-p5 1.4.1 deprecated

@Rohs21 please check

[Rohs21]

Hey @priyankarpal can you please help me with this because you can see the file changes is only about the 2 line of css change in the header.css so why the deployment is crashing for this PR?

[priyankarpal]

Hey @priyankarpal can you please help me with this because you can see the file changes is only about the 2 line of css change in the header.css so why the deployment is crashing for this PR?

let me check

[priyankarpal]

Hey @priyankarpal can you please help me with this because you can see the file changes is only about the 2 line of css change in the header.css so why the deployment is crashing for this PR?

@Rohs21 please chcek this issue #1607 .

[Rohs21]

@priyankarpal any update on this?

[priyankarpal]

@priyankarpal any update on this?

I will merge this PR once issue #1607 is merged

[Rohs21]

Okay @priyankarpal thanks for the update

[priyankarpal]

looks good

[Rohs21]

Thankyou so much @priyankarpal !!

[priyankarpal]

@Rohs21 can you share your linkedin profile here. Also please share merged pr to social & tag react play.

[Rohs21]

Sure @priyankarpal ! 😊
Here’s my LinkedIn profile: linkedin.com/in/rohan-singh212004

And here’s the post about my PR: x.com/rohansingh2104/status/1975461824947757370?s=61
Would be a pleasure to stay connected with you!

[priyankarpal]

Sure @priyankarpal ! 😊 Here’s my LinkedIn profile: linkedin.com/in/rohan-singh212004

And here’s the post about my PR: x.com/rohansingh2104/status/1975461824947757370?s=61 Would be a pleasure to stay connected with you!

Thanks