root/fusion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(FN-4043): fix memory editor flex layout in SettingsModal

Browse Source 
Fixes the memory editor flex layout in SettingsModal (Step 1 of FN-4043) and adds a CSS regression guard for that component.

Fusion-Task-Id: FN-4043
This commit is contained in:
Fusion
2026-05-11 16:01:44 -07:00
committed by gsxdsm
parent e4d071b398
commit 1c69a0bfa2
3 changed files with 45 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
packages/dashboard/app/components/SettingsModal.css
View File

@@ -1146,6 +1146,17 @@
.memory-editor-section {
margin-top: var(--space-lg);
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-height: 0;
}
.memory-editor-form-group {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-height: 0;
}
.memory-file-summary {
@@ -1192,7 +1203,9 @@
border-radius: var(--radius-md);
overflow: hidden;
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-width: 0;
}
/* === Auth Provider Cards === */

38
packages/dashboard/app/components/SettingsModal.tsx
View File

@@ -4147,27 +4147,27 @@ export function SettingsModal({
</small>
</div>
)}
<div className="form-group">
<label>{selectedMemoryFile?.label || "Memory Editor"}</label>
<small>
{selectedMemoryFile?.layer === "long-term" && "Curated durable decisions, conventions, constraints, and pitfalls promoted from dreams."}
{selectedMemoryFile?.layer === "daily" && "Raw daily observations, open loops, and running context for dream processing."}
{selectedMemoryFile?.layer === "dreams" && "Synthesized patterns and open loops promoted from daily memory."}
{!selectedMemoryFile && "Edits the selected memory file."}
</small>
<div className="memory-editor-frame">
<FileEditor
content={memoryContent}
onChange={(content) => {
setMemoryContent(content);
setMemoryDirty(true);
}}
readOnly={!isEditingAllowed}
filePath={selectedMemoryPath}
/>
<div className="form-group memory-editor-form-group">
<label>{selectedMemoryFile?.label || "Memory Editor"}</label>
<small>
{selectedMemoryFile?.layer === "long-term" && "Curated durable decisions, conventions, constraints, and pitfalls promoted from dreams."}
{selectedMemoryFile?.layer === "daily" && "Raw daily observations, open loops, and running context for dream processing."}
{selectedMemoryFile?.layer === "dreams" && "Synthesized patterns and open loops promoted from daily memory."}
{!selectedMemoryFile && "Edits the selected memory file."}
</small>
<div className="memory-editor-frame">
<FileEditor
content={memoryContent}
onChange={(content) => {
setMemoryContent(content);
setMemoryDirty(true);
}}
readOnly={!isEditingAllowed}
filePath={selectedMemoryPath}
/>
</div>
</div>
</div>
</div>
)}
{!memoryLoading && (

13
packages/dashboard/app/components/__tests__/SettingsModal.memory-css.test.ts Normal file
View File

@@ -0,0 +1,13 @@
import { describe, expect, it } from "vitest";
import { loadAllAppCssBaseOnly } from "../../test/cssFixture";
describe("SettingsModal memory CSS contract", () => {
it("keeps a flex/min-height chain so FileEditor fills the memory editor frame", async () => {
const css = await loadAllAppCssBaseOnly();
expect(css).toMatch(/\.memory-editor-section\s*\{[^}]*flex\s*:\s*1\s+1\s+auto;[^}]*min-height\s*:\s*0\s*;/);
expect(css).toMatch(/\.memory-editor-form-group\s*\{[^}]*flex\s*:\s*1\s+1\s+auto;[^}]*min-height\s*:\s*0\s*;/);
expect(css).toMatch(/\.memory-editor-frame\s*\{[^}]*min-height\s*:[^}]*\}/);
expect(css).toMatch(/\.memory-editor-frame\s*\{[^}]*flex\s*:\s*1\s+1\s+auto;[^}]*\}/);
});
});