fix: [LC-1475] Gameflow styles

[goblincore]

Overview

🎟 Relevant Jira Issues

https://welibrary.atlassian.net/browse/LC-1475

📚 What is the context and goal of this PR?

Improve how gameflow looks and feels

🥴 TL; RL:

💡 Feature Breakdown (screenshots & videos encouraged!)

A side by side comparison video of the current live gameflow versus the fixed version (logged out state which is what the JIRA is primarily about):

gameflow2025-12-19.at.1.40.30.PM.mov

Fixes include:

• Fix the email verification input display which on the current version breaks into two lines and looks broken
• The current css doesn't allow for vertical scrolling when the gameflow login components are greater than the viewport height which means the user can't access information/buttons. This is fixed in the new version.
• Change input color so it matches more while not affecting the original login components since they share the same components. The input for gameflow/consentflow login display has been changed to gray background to match the design better and the error state is shown beneath it instead of inline which causes the input to become squished.

🛠 Important tradeoffs made:

🔍 Types of Changes

• 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)
• Chore (refactor, documentation update, etc)

💳 Does This Create Any New Technical Debt? ( If yes, please describe and add JIRA TODOs )

• No
• Yes

Testing

🔬 How Can Someone QA This?

In logged out state, go to gameflow link and see what it looks like and try to login via email:

Example link:
https://learncard.app/consent-flow?uri=lc:network:network.learncard.com/trpc:contract:50daff52-cc37-4ae4-bcd7-62ed71dd66f4

for local test:
http://localhost:3000/consent-flow?uri=lc:network:network.learncard.com/trpc:contract:50daff52-cc37-4ae4-bcd7-62ed71dd66f4

📱 🖥 Which devices would you like help testing on?

🧪 Code Coverage

Documentation

📝 Documentation Checklist

User-Facing Docs (docs/ → docs.learncard.com)

• Tutorial — New capability that users need to learn (docs/tutorials/)
• How-To Guide — New workflow or integration (docs/how-to-guides/)
• Reference — New/changed API, config, or SDK method (docs/sdks/)
• Concept — New mental model or architecture explanation (docs/core-concepts/)
• App Flows — Changes to LearnCard App or ScoutPass user flows (docs/apps/)

Internal/AI Docs

• CLAUDE.md — New pattern, flow, or context that AI assistants need
• Code comments/JSDoc — Complex logic that needs inline explanation

Visual Documentation

• Mermaid diagram — Complex flow, state machine, or architecture

B[LearnCard] --> C[Network]

-->

#### 💭 Documentation Notes
<!-- If no docs needed, briefly explain why (e.g., "Internal refactor, no API changes") -->


# ✅ PR Checklist
- [x] Related to a Jira issue ([create one if not](https://welibrary.atlassian.net/jira/software/projects/WE/boards/2))
- [x] My code follows **style guidelines** (eslint / prettier)
- [x] I have **manually tested** common end-2-end cases
- [x] I have **reviewed** my code
- [x] I have **commented** my code, particularly where ambiguous
- [x] New and existing **unit tests pass** locally with my changes
- [ ] I have completed the **Documentation Checklist** above (or explained why N/A)

### 🚀 Ready to squash-and-merge?:
- [x] Code is backwards compatible
- [x] There is **not** a "Do Not Merge" label on this PR
- [x] I have thoughtfully considered the security implications of this change.
- [x] This change does not expose new public facing endpoints that do not have authentication

[changeset-bot]

⚠️ No Changeset found

Latest commit: 67530ab

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[netlify]

✅ Deploy Preview for staging-learncardapp ready!

Name	Link
🔨 Latest commit	67530ab
🔍 Latest deploy log	https://app.netlify.com/projects/staging-learncardapp/deploys/69459b9f2ca6d9000875baf7
😎 Deploy Preview	https://deploy-preview-901--staging-learncardapp.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.

[netlify]

✅ Deploy Preview for learncarddocs canceled.

Name	Link
🔨 Latest commit	67530ab
🔍 Latest deploy log	https://app.netlify.com/projects/learncarddocs/deploys/69459b9ff7a5d3000846d530

[github-actions]

👋 Hey there! It looks like you modified code, but didn't update the documentation in /docs.

If this PR introduces new features, changes APIs, or modifies behavior that users or developers need to know about, please consider updating the docs.

---

🏄 Windsurf Tip

You can ask Windsurf to help:

"Analyze the changes in this PR and update the gitbook docs in /docs accordingly."

Windsurf will review your changes and suggest appropriate documentation updates based on what was modified.

---

📚 Documentation Guide

Change Type	Doc Location
New feature/API	docs/tutorials/ or docs/how-to-guides/
SDK/API changes	docs/sdks/
New concepts	docs/core-concepts/
App UI/UX flows	docs/apps/ (LearnCard App, ScoutPass)
Internal patterns	CLAUDE.md

This is an automated reminder. If no docs are needed, feel free to ignore this message.

[gitstream-cm]

🥷 Code experts: TaylorBeeston

TaylorBeeston has most 👩‍💻 activity in the files.
TaylorBeeston has most 🧠 knowledge in the files.

See details

apps/learn-card-app/src/assets/sass/login.scss

Activity based on git-commit:

	TaylorBeeston
DEC
NOV	363 additions & 0 deletions
OCT
SEP
AUG
JUL

Knowledge based on git-blame:
TaylorBeeston: 100%

apps/learn-card-app/src/components/learncard/AccountSwitcherModal.tsx

Activity based on git-commit:

	TaylorBeeston
DEC
NOV	279 additions & 0 deletions
OCT
SEP
AUG
JUL

Knowledge based on git-blame:
TaylorBeeston: 95%

apps/learn-card-app/src/pages/consentFlow/GameFlow/FullScreenGameFlow.tsx

Activity based on git-commit:

	TaylorBeeston
DEC
NOV	191 additions & 0 deletions
OCT
SEP
AUG
JUL

Knowledge based on git-blame:
TaylorBeeston: 100%

apps/learn-card-app/src/pages/consentFlow/GameFlow/GameLogin.tsx

Activity based on git-commit:

	TaylorBeeston
DEC
NOV	150 additions & 0 deletions
OCT
SEP
AUG
JUL

Knowledge based on git-blame:
TaylorBeeston: 100%

apps/learn-card-app/src/pages/launchPad/PostConsentFlowDataFeed.tsx

Activity based on git-commit:

	TaylorBeeston
DEC
NOV	105 additions & 0 deletions
OCT
SEP
AUG
JUL

Knowledge based on git-blame:
TaylorBeeston: 100%

apps/learn-card-app/src/pages/login/forms/EmailForm.tsx

Activity based on git-commit:

	TaylorBeeston
DEC
NOV	462 additions & 0 deletions
OCT
SEP
AUG
JUL

Knowledge based on git-blame:
TaylorBeeston: 100%

apps/learn-card-app/src/pages/login/forms/PhoneForm.tsx

Activity based on git-commit:

	TaylorBeeston
DEC	13 additions & 15 deletions
NOV	437 additions & 0 deletions
OCT
SEP
AUG
JUL

Knowledge based on git-blame:
TaylorBeeston: 100%

apps/learn-card-app/tests/game-flow.page.ts

Activity based on git-commit:

	TaylorBeeston
DEC
NOV	310 additions & 0 deletions
OCT
SEP
AUG
JUL

Knowledge based on git-blame:
TaylorBeeston: 100%

✨ Comment /gs review for LinearB AI review. Learn how to automate it here.

[gerardopar]

LGTM 🚀🤠