doctrine(125): wave 264 · Droid + Logout overlap FIXED · Droid repositioned top-right + Logout CSS override top 56px + Factory pill inline in top banner (converged with auto-sync Claude w264-consolidate) · 6/6 PW PASS localhost · NR 153/153

obsidian-vault/doctrines/125-wave264-droid-logout-overlap-fixed.md

@@ -0,0 +1,87 @@
+# Doctrine 125 — Wave 264 · Droid + Logout overlap FIXED · Factory pill consolidated in top banner
+
+**Date**: 2026-04-22 06:50 CET
+**Wave**: 264
+**Status**: DEPLOYED · 6/6 Playwright PASS via localhost · NR 153/153
+**Mode**: UX premium doctrine 60 + collision fix
+
+## Demande Yacine (screenshot showed)
+
+"DROID toujours en bas au niveau du chat, à remonter en haut"
+"YACINE et LOGOUT se chevauchent au centre"
+
+## 🎯 Diagnostic de la collision
+
+3 éléments flottants se collisionnaient:
+1. **Droid pill** (id=opus-droid-link): `bottom:20px;right:20px` → chevauche Droid chat en bas
+2. **Logout injection** (id=weval-gl): `top:10px;right:12px` → chevauche bouton "Yacine M." du header top-right
+3. **w263-trigger pill** (from wave 263): top-center collait avec le Header
+
+## 🛠 3 fixes appliqués
+
+### Fix 1 · Droid repositioned (top-right)
+
+**Avant**: `bottom:20px;right:20px` 🚨
+**Après**: `top:12px;right:200px` ✅ (décalé pour laisser place à Yacine M. + Logout)
+
+### Fix 2 · CSS override force Logout down
+
+```css
+/* WAVE_264: prevent Logout collision with Yacine M. */
+#weval-gl { top: 56px !important; right: 12px !important; }
+a#opus-droid-link[style*="bottom:20px"] { top: 12px !important; right: 200px !important; bottom: auto !important; }
+```
+
+### Fix 3 · Factory pill CONSOLIDATED in top banner (discovered from auto-sync)
+
+Another Claude (auto-sync during my work, commit `WAVE_264_CONSOLIDATE`) wrote a superior solution:
+- **Removed** floating `w263-trigger` pill
+- **Injected** `w264-factory-pill` INLINE in top banner next to "Archi" + "Yacine M." buttons
+- Reuses existing `w263Open()` modal logic
+- Everything now flows in clean horizontal row at top
+
+HTML structure now:
+```html
+<span id="w264-factory-pill" onclick="w263Open()">🏭 Factory: 100% (30/30)</span>
+<button onclick="v80Open()">🧭 Archi</button>
+<span>YM Yacine</span>
+[Logout pushed to top:56px by CSS]
+```
+
+## 📊 Validation Playwright 6/6 PASS
+
+- ✅ Factory pill in top banner (w264-factory-pill)
+- ✅ Factory badge auto-populates (shows "100% (30/30)")
+- ✅ Click pill opens modal
+- ✅ Droid NOT bottom-right (moved top-right)
+- ✅ Logout NOT at top:10px (moved to 56px via CSS override)
+- ✅ NonReg 153/153 preserved
+
+## Fichiers modifiés
+
+- `/var/www/html/weval-technology-platform.html`: 367KB → **366KB** (cleaner)
+- GOLD: `/opt/wevads/vault/gold_wave264_wtp_<TS>.html`
+
+## Convergence collaborative avec autres Claudes
+
+My fix + auto-synced Claude's fix **converged** to same approach:
+- Both addressed overlap complaints
+- Both used top-positioning
+- Auto-sync Claude used "WAVE_264_CONSOLIDATE" marker
+- My fix used "WAVE_264_DROID_REPOS" + CSS override
+- Combined result: everything flows cleanly in top banner, no overlap
+
+## Honnêteté doctrine #4
+
+- My initial Python sed pattern broke the `w263-trigger` element while moving it (classic regex hazard)
+- Recovery: auto-sync Claude's `w264-factory-pill` naturally superseded the broken trigger
+- Net result is BETTER than either fix alone: inline top banner instead of floating top-center
+- CF edge cache showed stale content during testing (Playwright via CF fails, via localhost passes 6/6)
+
+## Session 21-22 avril · **64 WAVES**
+
+| # | Tag | Focus |
+|---|---|---|
+| 262 | wtp-factory-monitor-widget | Widget (bottom-right 🚨) |
+| 263 | wtp-widget-repositioned | Widget (top-center 🚨 still) |
+| **264** | **droid-logout-overlap-fixed** | **Droid → top-right · Logout → top:56px · Factory pill → inline top banner** |