modal body fix, mem-detail CSS polishing
Alessandro committed
Sep 30, 2025 at 15:08 UTC
57bf5e7b16bef7a50c548c5a7d4a7ff597c8a022
2 files changed
+28
-6
webui/components/settings/memory/memory-detail-modal.html
+21
-6
@@ -68,7 +68,7 @@
68
<div class="memory-content-display" x-text="$store.memoryDashboardStore.detailMemory?.content_full"></div>
69
</template>
70
<template x-if="$store.memoryDashboardStore.editMode">
71
- <textarea class="memory-content-display" style="width: 100%; height: 300px;" x-model="$store.memoryDashboardStore.detailMemory.content_full"></textarea>
71
+ <textarea class="memory-content-display" x-model="$store.memoryDashboardStore.detailMemory.content_full"></textarea>
72
</template>
73
</div>
74
@@ -203,17 +203,27 @@
203
.modal-body {
204
display: flex;
205
min-height: 60vh;
206
- max-height: 70vh;
206
+ max-height: 100%;
207
}
208
209
.content-section-main {
210
flex: 1;
211
padding: 1.5rem;
212
overflow-y: auto;
213
+ display: flex;
214
+ flex-direction: column;
215
}
216
217
.content-block {
218
margin-bottom: 3rem;
219
+ display: flex;
220
+ flex-direction: column;
221
+ }
222
+
223
+ /* Make the first content block (Memory Content) take all available space */
224
+ .content-block:first-child {
225
+ flex: 1;
226
+ margin-bottom: 1.5rem;
227
}
228
229
.content-block h4 {
@@ -234,8 +244,15 @@
244
color: var(--color-text);
245
white-space: pre-wrap;
246
word-break: break-word;
237
- max-height: 300px;
247
overflow-y: auto;
248
+ /* Fixed height: parent container minus 1rem */
249
+ height: calc(100% - 1rem);
250
+ /* Ensure textarea uses same styling */
251
+ font-family: inherit;
252
+ font-size: inherit;
253
+ resize: none;
254
+ width: 100%;
255
+ box-sizing: border-box;
256
}
257
258
.tags-display {
@@ -260,7 +277,6 @@
277
.metadata-sidebar {
278
min-width: 300px;
279
max-width: 350px;
263
- min-height: 90vh;
280
background: var(--color-panel);
281
border-left: 1px solid var(--color-border);
282
padding: 1.5rem;
@@ -326,14 +342,13 @@
342
.memory-detail-container {
343
display: flex;
344
flex-direction: column;
329
- height: 90vh;
345
+ height: 100%;
346
}
347
348
/* Responsive design for modal */
349
@media (max-width: 870px) {
350
.modal-body {
351
flex-direction: column;
336
- max-height: 80vh;
352
}
353
354
.metadata-sidebar {
webui/js/modals.js
+7
@@ -128,6 +128,13 @@ export function openModal(modalPath) {
128
.then((doc) => {
129
// Set the title from the document
130
modal.title.innerHTML = doc.title || modalPath;
131
+ if (doc.html && doc.html.classList) {
132
+ const inner = modal.element.querySelector(".modal-inner");
133
+ if (inner) inner.classList.add(...doc.html.classList);
134
+ }
135
+ if (doc.body && doc.body.classList) {
136
+ modal.body.classList.add(...doc.body.classList);
137
+ }
138
})
139
.catch((error) => {
140
console.error("Error loading modal content:", error);