fix(css): extension styles bleeding into LeetCode error pages

[smithrashell]

📌 Summary

CodeMaster extension CSS styles are bleeding into LeetCode's error pages, causing visual inconsistencies. The LeetCode logo appears styled with the extension's CSS instead of maintaining its original appearance.

🐛 Bug Description

Current Behavior:

• Extension CSS affects LeetCode error page elements
• LeetCode logo (CM) appears with extension styling (yellow/orange color)
• Background and layout may be affected by extension styles
• Issue appears specifically on error pages (500, 404, etc.)

Expected Behavior:

• Extension CSS should be isolated and NOT affect LeetCode page elements
• LeetCode error pages should maintain their original styling
• Only extension UI elements (sidebar, buttons, etc.) should use extension CSS

📸 Screenshot

What to notice:

• LeetCode logo (CM) in top-left appears styled with extension colors
• Error page content may have unexpected styling
• This only occurs on LeetCode error pages, not other LeetCode pages

🔍 Steps to Reproduce

1. Install CodeMaster extension in Chrome
2. Navigate to a LeetCode error page (e.g., internal server error, 404)
3. Observe the page styling
4. Observe: LeetCode elements are styled with extension CSS

Note: Issue does NOT appear on:

• LeetCode problem pages
• LeetCode problemset pages
• LeetCode profile pages
• Other LeetCode sections

💡 Technical Context

Likely Causes:

1. CSS Specificity Issues:

   • Extension CSS selectors may be too broad
   • Missing CSS isolation/scoping
   • Global styles affecting host page

2. CSS Injection Method:

   • Extension might be injecting CSS globally instead of scoped to extension UI
   • No proper CSS namespacing

3. Content Script CSS:

   • CSS files loaded by content script may not be properly scoped
   • Missing .cm-extension or similar parent class on all extension styles

Files to Check:

• chrome-extension-app/src/content/css/main.css - Main content script styles
• chrome-extension-app/src/content/css/theme.css - Theme styles
• chrome-extension-app/src/content/css/probrec.css - Problem recommendation styles
• chrome-extension-app/src/content/content.jsx - CSS injection logic

Expected CSS Structure:
All extension CSS should be scoped under .cm-extension class:

/* ❌ BAD - Can affect host page */
.logo {
  color: orange;
}

/* ✅ GOOD - Scoped to extension */
.cm-extension .logo {
  color: orange;
}

🔬 Investigation Steps

1. Inspect the affected logo element:

   • Check which CSS rules are applying
   • Identify the source stylesheet (extension vs. LeetCode)

2. Review extension CSS files:

   • Grep for selectors without .cm-extension prefix
   • Look for global selectors (body, html, svg, etc.)

3. Check CSS injection in content.jsx:

   • Verify CSS is being injected correctly
   • Ensure proper scoping mechanism

4. Test on different LeetCode pages:

   • Confirm issue is specific to error pages
   • Check if other pages have similar issues

✅ Acceptance Criteria

• Extension CSS does NOT affect LeetCode page elements
• LeetCode logo maintains original appearance on error pages
• LeetCode error page layout is not affected by extension
• All extension CSS is properly scoped under .cm-extension class
• No CSS specificity conflicts with LeetCode styles
• Works on all LeetCode error pages (404, 500, etc.)
• Extension UI still displays correctly with proper styling

🎯 Impact

Severity: Medium - Visual bug, doesn't break functionality but affects UX
User Experience: Confusing for users, looks unprofessional
Scope: Limited to LeetCode error pages

🏷️ Labels

bug, css, priority: medium

📎 Related Issues

None currently, but this could be related to other CSS isolation issues if they arise.

💭 Additional Context

This is a CSS isolation/scoping issue. Modern approaches to fix this:

1. Shadow DOM - Isolate extension UI completely (most robust)
2. CSS-in-JS with unique prefixes - Runtime scoping
3. Strict CSS namespacing - All selectors prefixed with .cm-extension
4. PostCSS plugin - Automatically scope CSS during build

Quick Fix: Audit CSS files and ensure all selectors are scoped.
Long-term Fix: Consider Shadow DOM for complete isolation.