diff --git a/frontend/src/index.css b/frontend/src/index.css
index 002d389..b032ef8 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -225,3 +225,84 @@ body {
   color: var(--color-fox-500);
   background: rgba(255, 109, 0, 0.1);
 }
+
+/* ─── Custom Scrollbar ───────────────────────────────────────────────────── */
+
+.custom-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-surface-500) transparent;
+}
+
+.custom-scrollbar::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: var(--color-surface-500);
+  border-radius: 4px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: var(--color-fox-600);
+}
+
+/* ─── CodeMirror Editor Fixes ────────────────────────────────────────────── */
+
+.cm-editor {
+  outline: none !important;
+  font-family: 'Fira Code', 'Consolas', 'Monaco', monospace !important;
+}
+
+.cm-scroller {
+  overflow: auto !important;
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-surface-500) transparent;
+}
+
+.cm-scroller::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.cm-scroller::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.2);
+}
+
+.cm-scroller::-webkit-scrollbar-thumb {
+  background: var(--color-surface-500);
+  border-radius: 4px;
+}
+
+.cm-scroller::-webkit-scrollbar-thumb:hover {
+  background: var(--color-fox-600);
+}
+
+.cm-content {
+  padding: 12px 0 !important;
+}
+
+.cm-line {
+  padding: 0 12px !important;
+}
+
+/* ─── Fullscreen Overlay ─────────────────────────────────────────────────── */
+
+.fullscreen-overlay {
+  position: fixed !important;
+  top: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  width: 100vw !important;
+  height: 100vh !important;
+  z-index: 99999 !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  border-radius: 0 !important;
+  background: var(--color-surface-900) !important;
+}
diff --git a/frontend/src/pages/OpenClaw.tsx b/frontend/src/pages/OpenClaw.tsx
index 13303a2..2536ce1 100644
--- a/frontend/src/pages/OpenClaw.tsx
+++ b/frontend/src/pages/OpenClaw.tsx
@@ -397,36 +397,38 @@ function AgentMemoryViewer({ agentName }: { agentName: string }) {
         </div>
       </div>
 
-      <div className="relative pl-6 before:absolute before:inset-0 before:left-[11px] before:w-0.5 before:bg-gradient-to-b before:from-blue-500/50 before:to-transparent pt-2">
-        {memory.timeline.length === 0 ? (
-          <div className="text-gray-500 text-sm py-4">La mémoire existe mais elle est actuellement vide.</div>
-        ) : (
-          <div className="space-y-6">
-            {memory.timeline.map((item: Record<string, any>, idx: number) => (
-              <div key={idx} className="relative group">
-                {/* Node dot */}
-                <div className="absolute -left-[31px] top-1.5 w-4 h-4 rounded-full bg-surface-900 border-2 border-blue-500/50 group-hover:bg-blue-500 group-hover:shadow-[0_0_10px_rgba(59,130,246,0.6)] transition-all z-10"></div>
-                
-                {/* Content Card */}
-                <div className="glass-card p-4 border border-surface-700/50 hover:border-blue-500/30 transition-colors">
-                  <div className="flex items-start justify-between mb-2">
-                    <span className="text-[10px] font-mono text-gray-500 bg-surface-800 px-2 py-0.5 rounded">
-                      {item.timestamp || item.created_at || 'Inconnu'}
-                    </span>
-                    {(item.type || item.event_type || item.role) && (
-                      <span className="text-[10px] uppercase font-bold text-indigo-300 bg-indigo-500/10 px-2 py-0.5 rounded">
-                        {item.type || item.event_type || item.role}
+      <div className="max-h-[600px] overflow-y-auto custom-scrollbar pr-2">
+        <div className="relative pl-6 before:absolute before:inset-0 before:left-[11px] before:w-0.5 before:bg-gradient-to-b before:from-blue-500/50 before:to-transparent pt-2">
+          {memory.timeline.length === 0 ? (
+            <div className="text-gray-500 text-sm py-4">La mémoire existe mais elle est actuellement vide.</div>
+          ) : (
+            <div className="space-y-6 pb-4">
+              {memory.timeline.map((item: Record<string, any>, idx: number) => (
+                <div key={idx} className="relative group">
+                  {/* Node dot */}
+                  <div className="absolute -left-[31px] top-1.5 w-4 h-4 rounded-full bg-surface-900 border-2 border-blue-500/50 group-hover:bg-blue-500 group-hover:shadow-[0_0_10px_rgba(59,130,246,0.6)] transition-all z-10"></div>
+                  
+                  {/* Content Card */}
+                  <div className="glass-card p-4 border border-surface-700/50 hover:border-blue-500/30 transition-colors">
+                    <div className="flex items-start justify-between mb-2 gap-2">
+                      <span className="text-[10px] font-mono text-gray-500 bg-surface-800 px-2 py-0.5 rounded">
+                        {item.timestamp || item.created_at || 'Inconnu'}
                       </span>
-                    )}
+                      {(item.type || item.event_type || item.role) && (
+                        <span className="text-[10px] uppercase font-bold text-indigo-300 bg-indigo-500/10 px-2 py-0.5 rounded">
+                          {item.type || item.event_type || item.role}
+                        </span>
+                      )}
+                    </div>
+                    <pre className="text-sm text-gray-300 whitespace-pre-wrap font-sans leading-relaxed">
+                      {item.content || item.message || JSON.stringify(item, null, 2)}
+                    </pre>
                   </div>
-                  <pre className="text-sm text-gray-300 whitespace-pre-wrap font-sans leading-relaxed">
-                    {item.content || item.message || JSON.stringify(item, null, 2)}
-                  </pre>
                 </div>
-              </div>
-            ))}
-          </div>
-        )}
+              ))}
+            </div>
+          )}
+        </div>
       </div>
     </div>
   );
@@ -626,9 +628,9 @@ function AgentsTab() {
                     {/* Identity File Editor */}
                     {activeFile?.agent === agent.name && (
                       <div className={`border border-glass-border bg-[#282c34] overflow-hidden shadow-inner mt-4 animate-fade-in flex flex-col ${
-                        isFullscreen ? 'fixed inset-0 w-screen h-screen z-[9999] m-0 p-0 rounded-none' : 'h-[500px] rounded-xl relative'
+                        isFullscreen ? 'fullscreen-overlay' : 'h-[500px] rounded-xl relative'
                       }`}>
-                        <div className={`flex items-center justify-between px-3 py-2 bg-surface-900/80 border-b border-glass-border shrink-0 ${isFullscreen ? 'h-14 px-6' : ''}`}>
+                        <div className={`flex items-center justify-between bg-surface-900/80 border-b border-glass-border shrink-0 ${isFullscreen ? 'h-16 px-6 py-4' : 'px-3 py-2'}`}>
                           <span className="text-xs font-mono text-purple-300 truncate pr-4">workspace/{agent.name}/{activeFile.file}</span>
                           <div className="flex gap-2 shrink-0">
                             <button onClick={() => setIsFullscreen(!isFullscreen)} className="px-2 py-1 rounded text-[10px] text-gray-400 hover:bg-surface-700 hover:text-white transition-colors">
@@ -645,17 +647,15 @@ function AgentsTab() {
                         {fileLoading ? (
                           <div className="flex-1 flex items-center justify-center text-gray-500 text-sm animate-pulse">Chargement…</div>
                         ) : (
-                          <div className="flex-1 overflow-hidden relative min-h-0 bg-[#282c34]">
-                            <div className="absolute inset-0 custom-scrollbar [&_.cm-editor]:h-full [&_.cm-editor]:bg-transparent [&_.cm-scroller]:h-full [&_.cm-scroller]:overflow-auto [&_.cm-scroller]:font-mono [&_.cm-scroller]:text-xs pb-10">
-                              <CodeMirror
-                                value={fileContent}
-                                height="100%"
-                                theme={oneDark}
-                                extensions={[markdown()]}
-                                onChange={(val) => setFileContent(val)}
-                                basicSetup={{ lineNumbers: true, foldGutter: false, highlightActiveLine: true, tabSize: 2 }}
-                              />
-                            </div>
+                          <div className="flex-1 overflow-auto bg-[#282c34] min-h-0">
+                            <CodeMirror
+                              value={fileContent}
+                              height="100%"
+                              theme={oneDark}
+                              extensions={[markdown()]}
+                              onChange={(val) => setFileContent(val)}
+                              basicSetup={{ lineNumbers: true, foldGutter: false, highlightActiveLine: true, tabSize: 2 }}
+                            />
                           </div>
                         )}
                       </div>
@@ -1154,7 +1154,7 @@ function ConfigFileEditor({ onClose, onSave }: { onClose: () => void, onSave: ()
   };
 
   return (
-    <div className="fixed inset-0 w-screen h-screen z-[9999] m-0 p-0 rounded-none glass-card flex flex-col overflow-hidden border border-glass-border shadow-[0_40px_80px_rgb(0,0,0,0.9)] bg-surface-900/95 backdrop-blur-xl animate-fade-in">
+    <div className="fullscreen-overlay glass-card flex flex-col overflow-hidden border border-glass-border shadow-[0_40px_80px_rgb(0,0,0,0.9)] backdrop-blur-xl animate-fade-in">
       <div className="flex items-center justify-between px-6 py-4 bg-surface-800 border-b border-glass-border shrink-0 h-16">
         <div className="flex items-center gap-3">
           <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-amber-500/20 to-orange-600/10 border border-amber-500/20 flex items-center justify-center text-xl">
@@ -1186,28 +1186,26 @@ function ConfigFileEditor({ onClose, onSave }: { onClose: () => void, onSave: ()
         </div>
       </div>
 
-      <div className="flex-1 overflow-hidden relative bg-[#282c34]">
+      <div className="flex-1 overflow-auto bg-[#282c34] min-h-0">
         {loading ? (
-          <div className="absolute inset-0 flex items-center justify-center flex-col gap-4">
+          <div className="flex items-center justify-center flex-col gap-4 h-full">
             <span className="text-4xl animate-spin-slow opacity-50">⚙️</span>
             <span className="text-gray-400 font-mono">Lecture de la configuration brute...</span>
           </div>
         ) : (
-          <div className="h-full w-full absolute inset-0 [&_.cm-editor]:h-full [&_.cm-scroller]:h-full [&_.cm-scroller]:overflow-auto [&_.cm-scroller]:font-mono [&_.cm-scroller]:text-[13px] custom-scrollbar pb-10">
-            <CodeMirror
-              value={content}
-              height="100%"
-              theme={oneDark}
-              extensions={[json()]}
-              onChange={(val) => setContent(val)}
-              basicSetup={{
-                lineNumbers: true,
-                foldGutter: true,
-                highlightActiveLine: true,
-                tabSize: 2,
-              }}
-            />
-          </div>
+          <CodeMirror
+            value={content}
+            height="100%"
+            theme={oneDark}
+            extensions={[json()]}
+            onChange={(val) => setContent(val)}
+            basicSetup={{
+              lineNumbers: true,
+              foldGutter: true,
+              highlightActiveLine: true,
+              tabSize: 2,
+            }}
+          />
         )}
       </div>
     </div>
@@ -1307,7 +1305,7 @@ function FilesystemTab() {
 
       {/* Editor Panel */}
       <div className={isFullscreen 
-        ? "fixed inset-0 w-screen h-screen z-[9999] m-0 p-0 rounded-none glass-card flex flex-col overflow-hidden border border-glass-border bg-surface-900 shadow-[0_30px_60px_rgb(0,0,0,0.9)] min-h-0" 
+        ? "fullscreen-overlay glass-card flex flex-col overflow-hidden border border-glass-border shadow-[0_30px_60px_rgb(0,0,0,0.9)] min-h-0" 
         : "glass-card w-2/3 flex flex-col overflow-hidden border border-glass-border shadow-[0_8px_30px_rgb(0,0,0,0.5)] min-h-0"
       }>
         {fileLoading ? (
@@ -1368,37 +1366,33 @@ function FilesystemTab() {
             </div>
 
             {/* Editor Body */}
-            <div className="flex-1 overflow-hidden relative bg-[#282c34]">
+            <div className="flex-1 overflow-auto bg-[#282c34] min-h-0">
               {selectedFile.binary ? (
-                <div className="absolute inset-0 flex items-center justify-center text-gray-500 bg-surface-900/60">
+                <div className="flex items-center justify-center text-gray-500 bg-surface-900/60 h-full">
                   <div className="text-center">
                     <div className="text-5xl mb-3 opacity-30">📦</div>
                     <p className="tracking-wide">Fichier binaire. Aperçu non disponible.</p>
                   </div>
                 </div>
               ) : editMode ? (
-                <div className="h-full w-full absolute inset-0 [&_.cm-editor]:h-full [&_.cm-scroller]:h-full [&_.cm-scroller]:overflow-auto [&_.cm-scroller]:font-mono [&_.cm-scroller]:text-[13px] pb-10">
-                  <CodeMirror
-                    value={editContent}
-                    height="100%"
-                    theme={oneDark}
-                    extensions={getExtensions()}
-                    onChange={(val) => setEditContent(val)}
-                    basicSetup={{
-                      lineNumbers: true,
-                      foldGutter: true,
-                      highlightActiveLine: true,
-                      tabSize: 2,
-                    }}
-                  />
-                </div>
+                <CodeMirror
+                  value={editContent}
+                  height="100%"
+                  theme={oneDark}
+                  extensions={getExtensions()}
+                  onChange={(val) => setEditContent(val)}
+                  basicSetup={{
+                    lineNumbers: true,
+                    foldGutter: true,
+                    highlightActiveLine: true,
+                    tabSize: 2,
+                  }}
+                />
               ) : (
-                <div className="h-full overflow-y-auto w-full custom-scrollbar absolute inset-0">
-                  <div className="p-4 min-h-full">
-                    <pre className="text-[13px] text-[#abb2bf] font-mono whitespace-pre-wrap leading-relaxed">
-                      {selectedFile.pretty || selectedFile.content}
-                    </pre>
-                  </div>
+                <div className="p-4">
+                  <pre className="text-[13px] text-[#abb2bf] font-mono whitespace-pre-wrap leading-relaxed">
+                    {selectedFile.pretty || selectedFile.content}
+                  </pre>
                 </div>
               )}
             </div>