issue with notch

DIAGNOSIS_SUMMARY.txt

@@ -0,0 +1,162 @@
+================================================================================
+PRODUCTION THEME NOTCH STYLING ISSUE - EXECUTIVE SUMMARY
+================================================================================
+
+ISSUE: Theme notch appears as plain buttons in normal document flow on production
+       (https://santhoshj.com) instead of a fixed, positioned element in the 
+       top-right corner with a dropdown panel.
+
+ROOT CAUSE: Production server is serving a STALE CSS file (17,628 bytes) that
+            was built BEFORE the theme-notch CSS rules were added. The local
+            build correctly generates a 24,279 byte CSS file with all rules.
+
+SEVERITY: CRITICAL - Component is completely unstyled and non-functional
+
+================================================================================
+EVIDENCE SUMMARY
+================================================================================
+
+1. CSS FILE SIZE MISMATCH
+   Local build:      24,279 bytes ✅ (includes theme-notch rules)
+   Production:       ~17,628 bytes ❌ (missing theme-notch rules)
+   Difference:       ~6,651 bytes (27% smaller)
+
+2. THEME-NOTCH RULES
+   Local CSS:        30 matches for "theme-notch" ✅
+   Production CSS:   0 matches for "theme-notch" ❌
+
+3. COMPUTED STYLES ON PRODUCTION
+   .theme-notch position:     static (WRONG - should be: fixed)
+   .theme-notch top:          auto (WRONG - should be: 84px)
+   .theme-notch right:        auto (WRONG - should be: max(8px, env(...)))
+   .theme-notch z-index:      auto (WRONG - should be: 12)
+   .theme-notch-panel display: block (WRONG - should be: grid)
+   .theme-notch-panel opacity: 1 (WRONG - should be: 0 initially)
+
+4. HTML MARKUP
+   ✅ Present and correct on both local and production
+   ✅ All classes and attributes in place
+   ✅ SVG glyph present
+
+5. JAVASCRIPT EXECUTION
+   ✅ Inline scripts ARE executing (no CSP block)
+   ✅ Theme initialization script runs
+   ✅ No JavaScript errors related to theme-notch
+
+6. NETWORK & CACHING
+   ✅ /styles/global.css returns [200] OK
+   ✅ File loads successfully
+   ❌ Content is stale/outdated
+
+================================================================================
+WHAT'S WORKING
+================================================================================
+
+✅ HTML markup is present and correct
+✅ JavaScript is executing without CSP errors
+✅ Local development (npm run dev) works perfectly
+✅ Local build (npm run build) generates correct CSS
+✅ Network requests succeed
+✅ Accessibility tree shows correct structure
+
+================================================================================
+WHAT'S BROKEN
+================================================================================
+
+❌ Production CSS file is missing theme-notch rules
+❌ CSS file size doesn't match local build
+❌ Theme notch appears inline instead of fixed position
+❌ Theme notch dropdown panel is not hidden initially
+❌ Theme notch styling is completely absent
+
+================================================================================
+ROOT CAUSE ANALYSIS
+================================================================================
+
+The production Docker image contains an OLDER version of the CSS file that was
+built BEFORE the theme-notch CSS rules were added to the source.
+
+This is a DEPLOYMENT/CACHING issue, not a build issue.
+
+Possible causes:
+1. Docker image was built from an older commit
+2. CSS file was not updated in the Docker image
+3. Stale build artifact is being served
+4. CI/CD pipeline didn't rebuild the image with latest source
+
+================================================================================
+VERIFICATION PERFORMED
+================================================================================
+
+✅ Navigated to https://santhoshj.com and /blog
+✅ Captured console errors and warnings
+✅ Checked network requests (global.css loads with [200])
+✅ Fetched and parsed production CSS file
+✅ Searched for .theme-notch selectors (0 matches found)
+✅ Inspected computed styles via browser DevTools
+✅ Verified HTML markup is present and correct
+✅ Confirmed inline scripts execute without CSP errors
+✅ Compared with local source CSS (rules present locally)
+✅ Ran local build and verified CSS includes theme-notch rules
+✅ Compared file sizes (24,279 bytes local vs ~17,628 bytes production)
+
+================================================================================
+RECOMMENDED FIX
+================================================================================
+
+OPTION 1: Rebuild and redeploy Docker image
+  $ docker compose build --no-cache
+  $ docker compose push
+  # Deploy new image to production
+
+OPTION 2: If using CI/CD
+  - Ensure latest commit is being built
+  - Verify Docker build includes latest site/dist/ output
+  - Check image is pushed with correct tag
+  - Redeploy image to production
+
+OPTION 3: Quick verification before deploying
+  - SSH into production server
+  - Check CSS file size: should be ~24,279 bytes (not ~17,628)
+  - Verify /styles/global.css contains "theme-notch" (30+ matches)
+  - If not, redeploy the Docker image
+
+================================================================================
+EXPECTED RESULT AFTER FIX
+================================================================================
+
+✅ Theme notch appears as a fixed button in top-right corner
+✅ Clicking reveals a dropdown panel with Dark/Light/Contrast options
+✅ Smooth animations and hover effects work
+✅ CSS file size matches local build (~24,279 bytes)
+✅ CSS file contains 30+ matches for "theme-notch"
+✅ Computed styles show correct positioning and display properties
+
+================================================================================
+FILES INVOLVED
+================================================================================
+
+Source:      site/public/styles/global.css (lines 306-457)
+Production:  https://santhoshj.com/styles/global.css (missing rules)
+Build:       Dockerfile and npm run build process
+HTML:        site/src/components/BaseLayout.astro (renders theme-notch markup)
+Local dist:  site/dist/styles/global.css (24,279 bytes - CORRECT)
+
+================================================================================
+CONCLUSION
+================================================================================
+
+The issue is NOT:
+  ❌ CSP blocking inline scripts
+  ❌ Missing HTML markup
+  ❌ JavaScript not executing
+  ❌ Browser caching
+
+The issue IS:
+  ✅ Production CSS file missing .theme-notch rules
+  ✅ Stale Docker image serving outdated CSS
+  ✅ Deployment/caching issue, not a build issue
+
+ACTION REQUIRED: Rebuild and redeploy Docker image with latest source code.
+
+================================================================================