Debugging Navbar Display Issue Between Docker Compose and Kubernetes

Issue Description

The navbar appears differently between Docker Compose (local) and Kubernetes environments:
- Kubernetes: Shows hamburger menu correctly
- Docker Compose: Shows expanded navigation links instead of hamburger menu
- Both environments should show "Blueberry IDP" text next to the logo

Quick Diagnosis Steps

1. Check the Debug Endpoint

Visit the UI debug endpoint in both environments to compare viewport and responsive behavior:

Docker Compose:

http://localhost:8001/api/health/ui-debug

Kubernetes:

https://your-kubernetes-domain/api/health/ui-debug

Take screenshots or note:
- Window width (in pixels)
- Current responsive breakpoint
- Whether it shows "Mobile Layout" or "Desktop Layout"

2. Clear Browser Cache

The issue might be caused by cached CSS. Try:
1. Hard refresh: Cmd+Shift+R (Mac) or Ctrl+Shift+R (Windows/Linux)
2. Open in incognito/private browsing mode
3. Clear browser cache completely for both domains

3. Verify CSS Loading

Open browser DevTools (F12) and check:
1. Network tab: Look for output.css - is it loading? What's the status code?
2. Console tab: Any JavaScript errors preventing Alpine.js from working?
3. Elements tab: Inspect the navbar and check if Tailwind classes are applied

Detailed Investigation

Check CSS File Integrity

1. Verify CSS is up-to-date in Docker container:

# Check if output.css exists in the container
docker exec blueberry-app ls -la /app/blueberry/static/css/output.css

# View first 50 lines to verify it has content
docker exec blueberry-app head -50 /app/blueberry/static/css/output.css

1. Compare CSS between environments:

# Download CSS from Docker Compose
curl -o todo/docker-output.css http://localhost:8001/static/css/output.css

# Download CSS from Kubernetes (replace with your domain)
curl -o todo/k8s-output.css https://your-kubernetes-domain/static/css/output.css

# Compare the files
diff todo/docker-output.css todo/k8s-output.css

Verify Responsive Breakpoints

The navbar uses Tailwind's md: breakpoint (768px):
- < 768px: Mobile layout with hamburger menu
- ≥ 768px: Desktop layout with full navigation

1. Test at different viewport widths:
2. Resize browser window to exactly 767px wide (should show hamburger)
3. Resize to 768px wide (should show full nav)

4. Use browser DevTools device emulation to test mobile sizes

5. Check computed styles in DevTools:

6. Inspect the mobile navbar div: <div class="md:hidden flex items-center justify-between">
7. Inspect the desktop navbar div: <div class="hidden md:flex items-center justify-between">
8. Verify which one has display: none vs display: flex

JavaScript and Alpine.js Verification

1. Check Alpine.js is loading:

// Run in browser console
console.log('Alpine version:', Alpine.version);
console.log('Alpine initialized:', !!window.Alpine);

1. Test Alpine.js functionality:

// Check if mobile menu state works
document.querySelector('[x-data*="mobileMenuOpen"]').__x.$data.mobileMenuOpen = true;
// This should show the mobile menu if Alpine is working

Container and Build Verification

1. Rebuild CSS locally:

# Rebuild CSS to ensure it's current
npm run build-css

# Check if it changed
git status blueberry/static/css/output.css

1. Rebuild Docker image:

# Force rebuild without cache
docker-compose build --no-cache app

# Restart the container
docker-compose up -d app

1. Check Docker logs for errors:

docker-compose logs -f app

Network and Proxy Issues

1. Check response headers:
2. In DevTools Network tab, click on output.css
3. Check Cache-Control header
4. Check Content-Type is text/css

5. Note any proxy-related headers

6. Test direct container access:

# Bypass any proxy by accessing container directly
docker exec -it blueberry-app curl -I http://localhost:8000/static/css/output.css

Common Fixes

Fix 1: Force CSS Refresh

1. Update the version in pyproject.toml or wherever app_version is defined
2. This will change the CSS URL query parameter and force a refresh

Fix 2: Manual CSS Rebuild

# Ensure you have the latest templates
git pull

# Rebuild CSS
npm install
npm run build-css

# Restart Docker Compose
docker-compose down
docker-compose up -d

Fix 3: Check for CSS Overrides

Look for any custom CSS that might be overriding Tailwind's responsive utilities:

# Search for custom CSS files
find . -name "*.css" -not -path "./node_modules/*" -not -name "output.css"

# Search for inline styles in templates
grep -r "style=" blueberry/templates/

Fix 4: Verify Kubernetes Deployment

# Check if the latest image is deployed
kubectl describe deployment blueberry -n blueberry | grep Image

# Force a rollout restart
kubectl rollout restart deployment blueberry -n blueberry

# Check pod logs
kubectl logs -f deployment/blueberry -n blueberry

Prevention

1. Add CSS build to CI/CD:
2. Ensure npm run build-css runs during Docker image build

3. Verify the Dockerfile includes the built CSS

4. Implement CSS versioning:

5. Use content hashing for CSS filename

6. Or use git commit hash in query parameter

7. Add visual regression tests:

8. Screenshot key pages in CI
9. Compare against baseline images

Still Not Working?

If the issue persists after all these checks:

1. Document findings:
2. Screenshot of Docker Compose navbar
3. Screenshot of Kubernetes navbar
4. Browser console errors (if any)
5. Network tab showing CSS loading

6. Output from the debug endpoint

7. Check for environment-specific configurations:

8. Compare environment variables between environments
9. Check if there are any nginx/ingress rules affecting static files

10. Verify GKE ingress configuration

11. Test in production mode locally:

# Run the production Docker image locally
docker run -p 8002:8000 \
  -e DEBUG=false \
  -e OTHER_ENV_VARS=... \
  your-registry/blueberry:latest

This will help determine if it's a build issue or environment-specific configuration.