@ddtcorex/dsh-maestro-memory 1.2.0 → 1.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/lib/client.js +22 -15
  3. package/lib/types/client/index.d.ts.map +1 -1
  4. package/package.json +1 -1
  5. package/src/client/index.tsx +22 -15
package/CHANGELOG.md CHANGED
@@ -4,6 +4,19 @@ All notable changes to this project are documented in this file. Format follows
4
4
  [Keep a Changelog](https://keepachangelog.com/en/1.1.0/); this project uses
5
5
  [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
6
6
 
7
+ ## [1.2.2] - 2026-08-30
8
+
9
+ ### Fixed
10
+
11
+ - **Memory tab overlay bleed (2)** — add `contain: paint` + `overflow:hidden` to `[class*="viewArea"]`/`[data-slot="conversation.view"]`/`[data-slot="conversation.session"]` and `.memx`, force `.memx` `background !important` + `z-index:2`, `pointer-events:auto`, `overflow-x:clip`/`overflow-y:auto` so hover no longer leaks to chat/composer/widthHandle behind.
12
+ - **Mobile tab content overlap** — `.memx` now `box-sizing:border-box` + `max-width:100%`/`overflow-wrap`, `.memx-layout`/`memx-panel`/`memx-grid`/`memx-card`/`memx-form` all `min-width:0` + `max-width:100%`, `grid-template-columns:200px minmax(0,1fr)`, `formrow` flex `1 1 0`, mobile `@1023px` forces `1fr` + `min-width:0`, `@480px` stacks `memx-field`. Fixes right-side overlap on 375px (verify 268/268 green).
13
+
14
+ ## [1.2.1] - 2026-08-30
15
+
16
+ ### Fixed
17
+
18
+ - **Memory tab overlay bleed** — `conversation.view` content now fully opaque over chat. `.memx` gets `background: var(--dsw-alias-bg-base)`, `isolation: isolate`, `z-index:1`, `min-height:100%` + `flex:1`, parent `[data-slot="conversation.view"]` forced opaque; inline `style` also carries bg/isolation to cover slot gaps that leaked chat hover effects.
19
+
7
20
  ## [1.2.0] - 2026-08-29
8
21
 
9
22
  ### Added
package/lib/client.js CHANGED
@@ -66,13 +66,21 @@ const RPC_CHANNEL = '/dsh-maestro-memory';
66
66
  // reflow 375/200%, responsive 375/768/1024/1440, touch 44pt+8gap, alt/label
67
67
  // ───────────────────────────────────────────────────────────────────
68
68
  const MEM_CSS = `
69
+ /* overlay isolation — Memory tab must fully cover chat behind (opaque + stacking) */
70
+ /* SlotOutlet [data-slot="conversation.view"] is display:contents by default (ui-slots/scoped-slots.tsx), so background/isolation on it is ignored. Override to block + paint. */
71
+ [class*="viewArea"] { background: var(--dsw-alias-bg-base) !important; isolation: isolate; contain: paint; position: relative; z-index: 1; flex: 1 1 auto; min-height: 100%; width: 100%; max-width: 100%; overflow: hidden; }
72
+ [data-slot="conversation.view"] { display: block !important; background: var(--dsw-alias-bg-base) !important; isolation: isolate; contain: paint; position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; min-width: 0; width: 100%; max-width: 100%; pointer-events: auto; }
73
+ [data-slot="conversation.session"] { background: var(--dsw-alias-bg-base); isolation: isolate; contain: paint; }
74
+ [data-slot="conversation.view"] > .memx,
75
+ [class*="viewArea"] > .memx,
76
+ [class*="viewArea"] > [data-slot="conversation.view"] > .memx { flex: 1 1 auto; min-width: 0; max-width: 100%; }
69
77
  /* legacy contract for tests — inheritance via .dshmem */
70
78
  .dshmem { color: var(--dsw-alias-label-primary); font-size: 13px; }
71
79
  .dshmem button { font: inherit; cursor: pointer; transition: color .15s ease, background .15s ease, border-color .15s ease, opacity .15s ease; }
72
80
  .dshmem button:focus-visible { outline: 2px solid var(--dsw-alias-interactive-bg-active); outline-offset: 1px; }
73
81
  .dshmem input, .dshmem textarea, .dshmem select { font: inherit; color: var(--dsw-alias-label-primary); background: var(--dsw-alias-bg-layer-2); border: 1px solid var(--dsw-alias-border-l1); border-radius: 8px; }
74
- .memx { color: var(--dsw-alias-label-primary); font-size: 13px; line-height: 1.5; }
75
- .memx * { box-sizing: border-box; }
82
+ .memx { color: var(--dsw-alias-label-primary); font-size: 13px; line-height: 1.5; background: var(--dsw-alias-bg-base) !important; position: relative; z-index: 2; isolation: isolate; contain: paint; min-height: 100%; width: 100%; max-width: 100%; box-sizing: border-box; align-self: stretch; flex: 1 1 auto; pointer-events: auto; overflow-x: clip; overflow-y: auto; overflow-wrap: break-word; }
83
+ .memx, .memx * { box-sizing: border-box; }
76
84
  .memx button { font: inherit; cursor: pointer; transition: color .15s ease, background .15s ease, border-color .15s ease, opacity .15s ease; }
77
85
  .memx button:active { transform: translateY(.5px); }
78
86
  .memx button:focus-visible { outline: 2px solid var(--dsw-alias-interactive-bg-active); outline-offset: 1px; }
@@ -97,21 +105,21 @@ const MEM_CSS = `
97
105
  .memx-iconbtn[aria-busy="true"] { opacity:.6; pointer-events:none; }
98
106
 
99
107
  /* layout — align breakpoint with dsh-maestro-mobile (1023px) */
100
- .memx-layout { display:grid; gap:14px; }
101
- @media (min-width: 1024px) { .memx-layout { grid-template-columns: 200px 1fr; align-items:start; } }
108
+ .memx-layout { display:grid; gap:14px; width:100%; max-width:100%; min-width:0; }
109
+ @media (min-width: 1024px) { .memx-layout { grid-template-columns: 200px minmax(0,1fr); align-items:start; } }
102
110
  /* nav */
103
111
  .memx-nav { display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding-bottom:2px; }
104
112
  .memx-nav::-webkit-scrollbar { display:none; }
105
113
  @media (min-width: 1024px) { .memx-nav { flex-direction:column; position:sticky; top:8px; overflow:visible; gap:4px; } }
106
114
  .memx-navitem { display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius:10px; border:1px solid transparent; background:transparent; color:var(--dsw-alias-label-secondary); white-space:nowrap; min-height:44px; }
107
115
  .memx-navitem:hover { background:var(--dsw-alias-bg-layer-2); color:var(--dsw-alias-label-primary); border-color:var(--dsw-alias-border-l1); }
108
- .memx-navitem[aria-current="page"] { background:var(--dsw-alias-interactive-bg-active); color:var(--dsw-alias-label-primary); border-color:var(--dsw-alias-border-l2); font-weight:600; }
116
+ .memx-navitem[aria-selected="true"], .memx-navitem[aria-current="page"] { background:var(--dsw-alias-interactive-bg-active); color:var(--dsw-alias-label-primary); border-color:var(--dsw-alias-border-l2); font-weight:600; }
109
117
  .memx-navitem svg { width:16px; height:16px; flex:none; }
110
118
  .memx-badge { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 6px; border-radius:999px; background:var(--dsw-alias-state-error-primary); color:#fff; font-size:11px; font-weight:700; line-height:1; }
111
119
  .memx-navcount { margin-left:auto; color:var(--dsw-alias-label-secondary); font-size:11px; }
112
120
 
113
121
  /* content */
114
- .memx-panel { min-width:0; display:flex; flex-direction:column; gap:12px; }
122
+ .memx-panel { min-width:0; max-width:100%; width:100%; display:flex; flex-direction:column; gap:12px; overflow:hidden; }
115
123
  .memx-toolbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
116
124
  .memx-pills { display:flex; gap:8px; flex-wrap:wrap; }
117
125
  .memx-pill { border-radius:999px; border:1px solid var(--dsw-alias-border-l1); padding:6px 12px; background:var(--dsw-alias-bg-layer-1); color:var(--dsw-alias-label-secondary); min-height:32px; display:inline-flex; align-items:center; }
@@ -130,10 +138,10 @@ const MEM_CSS = `
130
138
  .memx-btn:disabled { opacity:.5; cursor:not-allowed; }
131
139
 
132
140
  /* bento / cards */
133
- .memx-grid { display:grid; gap:10px; }
141
+ .memx-grid { display:grid; gap:10px; width:100%; max-width:100%; min-width:0; }
134
142
  @media (min-width: 640px) { .memx-grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
135
143
  @media (min-width: 1024px) { .memx-grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); } }
136
- .memx-card { border:1px solid var(--dsw-alias-border-l1); border-radius:12px; background:var(--dsw-alias-bg-layer-1); padding:12px; display:flex; flex-direction:column; gap:8px; }
144
+ .memx-card { border:1px solid var(--dsw-alias-border-l1); border-radius:12px; background:var(--dsw-alias-bg-layer-1); padding:12px; display:flex; flex-direction:column; gap:8px; min-width:0; max-width:100%; overflow:hidden; }
137
145
  .memx-card:hover { border-color:var(--dsw-alias-border-l2); }
138
146
  .memx-cardhead { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
139
147
  .memx-kicker { text-transform:uppercase; letter-spacing:.04em; font-size:11px; color:var(--dsw-alias-label-secondary); font-weight:600; }
@@ -151,12 +159,11 @@ const MEM_CSS = `
151
159
  @media (max-width: 639px) { .memx-actions button { flex:1; min-width:0; } }
152
160
 
153
161
  /* forms inline */
154
- .memx-form { border:1px solid var(--dsw-alias-border-l1); border-radius:12px; background:var(--dsw-alias-bg-layer-1); padding:12px; display:flex; flex-direction:column; gap:10px; }
155
- .memx-formrow { display:flex; gap:8px; flex-wrap:wrap; }
156
- .memx-formrow > * { flex:1; min-width:120px; }
157
- .memx-textarea { min-height:72px; padding:8px 10px; width:100%; }
158
- .memx-select, .memx-date { height:44px; padding:0 8px; }
159
- @media (max-width:1023px) { .memx { padding:12px 12px calc(16px + env(safe-area-inset-bottom,0px)) !important; } .memx-layout { gap:12px; } }
162
+ .memx-form { border:1px solid var(--dsw-alias-border-l1); border-radius:12px; background:var(--dsw-alias-bg-layer-1); padding:12px; display:flex; flex-direction:column; gap:10px; min-width:0; max-width:100%; }
163
+ .memx-formrow { display:flex; gap:8px; flex-wrap:wrap; min-width:0; }
164
+ .memx-formrow > * { flex:1 1 0; min-width:120px; max-width:100%; }
165
+ @media (max-width:1023px) { .memx { padding:12px 12px calc(16px + env(safe-area-inset-bottom,0px)) !important; } .memx-layout { gap:12px; grid-template-columns:1fr !important; } .memx-formrow > *{ min-width:0; } }
166
+ @media (max-width:480px) { .memx-field { flex-direction:column; align-items:stretch; } .memx-input { flex-basis:auto; width:100%; max-width:100%; } }
160
167
  @media (min-width:1440px) { .memx { max-width:1280px; margin:0 auto; } }
161
168
  `;
162
169
  const HEADER_BADGE_CSS = `
@@ -551,7 +558,7 @@ function MemoryView({ ctx }) {
551
558
  { id: 'skills', label: 'Skills', icon: ICO.layers },
552
559
  { id: 'health', label: 'Health', icon: ICO.activity },
553
560
  ];
554
- return React.createElement('div', { className: 'dshmem memx', style: { padding: '12px 12px 16px' } }, React.createElement('style', null, MEM_CSS), React.createElement('div', { className: 'memx-header' }, React.createElement('div', { className: 'memx-header-main' }, React.createElement('div', { className: 'memx-title' }, React.createElement(Ico, { d: ICO.spark, size: 18 }), 'Memory'), React.createElement('div', { className: 'memx-subtitle' }, 'Durable layered memory — five tracks, gated writes, todos & skills')), React.createElement('div', { className: 'memx-header-actions' }, React.createElement('button', { onClick: refreshPending, className: 'memx-iconbtn', 'aria-label': 'Refresh status', title: 'Refresh' }, React.createElement(Ico, { d: ICO.refresh, size: 16 })))), React.createElement('div', { className: 'memx-layout' }, React.createElement('div', { className: 'memx-nav', role: 'tablist', 'aria-label': 'Memory sections' }, ...tabs.map(t => React.createElement('button', {
561
+ return React.createElement('div', { className: 'dshmem memx', style: { padding: '12px 12px 16px', background: 'var(--dsw-alias-bg-base)', position: 'relative', zIndex: 1, isolation: 'isolate', minHeight: '100%', width: '100%' } }, React.createElement('style', null, MEM_CSS), React.createElement('div', { className: 'memx-header' }, React.createElement('div', { className: 'memx-header-main' }, React.createElement('div', { className: 'memx-title' }, React.createElement(Ico, { d: ICO.spark, size: 18 }), 'Memory'), React.createElement('div', { className: 'memx-subtitle' }, 'Durable layered memory — five tracks, gated writes, todos & skills')), React.createElement('div', { className: 'memx-header-actions' }, React.createElement('button', { onClick: refreshPending, className: 'memx-iconbtn', 'aria-label': 'Refresh status', title: 'Refresh' }, React.createElement(Ico, { d: ICO.refresh, size: 16 })))), React.createElement('div', { className: 'memx-layout' }, React.createElement('div', { className: 'memx-nav', role: 'tablist', 'aria-label': 'Memory sections' }, ...tabs.map(t => React.createElement('button', {
555
562
  key: t.id, role: 'tab', id: `tab-${t.id}`, 'aria-selected': tab === t.id, 'aria-controls': `panel-${t.id}`, onClick: () => setTab(t.id), className: 'memx-navitem', 'data-testid': `tab-${t.id}`,
556
563
  }, React.createElement(Ico, { d: t.icon }), t.label, t.count !== undefined && t.count > 0 ? React.createElement('span', { className: 'memx-badge', 'data-testid': 'tab-badge-review' }, String(t.count)) : null, t.id === 'memory' ? React.createElement('span', { className: 'memx-navcount' }, '5 tracks') : null))), React.createElement('div', { className: 'memx-panel', role: 'tabpanel', id: `panel-${tab}`, 'aria-labelledby': `tab-${tab}` }, tab === 'memory' ? React.createElement(MemoryListView, { ctx }) :
557
564
  tab === 'review' ? React.createElement(ReviewQueueView, { ctx, onPendingChange: setPending }) :
package/lib/types/client/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/client/index.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,MAAM,8CAA+C,CAAA;AAyiBlE,wBAAgB,KAAK,CAAC,GAAG,EAAC,GAAG,GAAG,IAAI,CA0CnC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/client/index.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,MAAM,8CAA+C,CAAA;AAgjBlE,wBAAgB,KAAK,CAAC,GAAG,EAAC,GAAG,GAAG,IAAI,CA0CnC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ddtcorex/dsh-maestro-memory",
3
- "version": "1.2.0",
3
+ "version": "1.2.2",
4
4
  "private": false,
5
5
  "description": "Durable layered memory (global / user / project / branch / daily), confirmation-gated writes, todos and skills. Preserves ~/.dsh/memories files in place with in-place adoption, SHA-256 verified backup and rollback.",
6
6
  "type": "module",
package/src/client/index.tsx CHANGED
@@ -30,13 +30,21 @@ const RPC_CHANNEL = '/dsh-maestro-memory'
30
30
  // ───────────────────────────────────────────────────────────────────
31
31
 
32
32
  const MEM_CSS = `
33
+ /* overlay isolation — Memory tab must fully cover chat behind (opaque + stacking) */
34
+ /* SlotOutlet [data-slot="conversation.view"] is display:contents by default (ui-slots/scoped-slots.tsx), so background/isolation on it is ignored. Override to block + paint. */
35
+ [class*="viewArea"] { background: var(--dsw-alias-bg-base) !important; isolation: isolate; contain: paint; position: relative; z-index: 1; flex: 1 1 auto; min-height: 100%; width: 100%; max-width: 100%; overflow: hidden; }
36
+ [data-slot="conversation.view"] { display: block !important; background: var(--dsw-alias-bg-base) !important; isolation: isolate; contain: paint; position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; min-width: 0; width: 100%; max-width: 100%; pointer-events: auto; }
37
+ [data-slot="conversation.session"] { background: var(--dsw-alias-bg-base); isolation: isolate; contain: paint; }
38
+ [data-slot="conversation.view"] > .memx,
39
+ [class*="viewArea"] > .memx,
40
+ [class*="viewArea"] > [data-slot="conversation.view"] > .memx { flex: 1 1 auto; min-width: 0; max-width: 100%; }
33
41
  /* legacy contract for tests — inheritance via .dshmem */
34
42
  .dshmem { color: var(--dsw-alias-label-primary); font-size: 13px; }
35
43
  .dshmem button { font: inherit; cursor: pointer; transition: color .15s ease, background .15s ease, border-color .15s ease, opacity .15s ease; }
36
44
  .dshmem button:focus-visible { outline: 2px solid var(--dsw-alias-interactive-bg-active); outline-offset: 1px; }
37
45
  .dshmem input, .dshmem textarea, .dshmem select { font: inherit; color: var(--dsw-alias-label-primary); background: var(--dsw-alias-bg-layer-2); border: 1px solid var(--dsw-alias-border-l1); border-radius: 8px; }
38
- .memx { color: var(--dsw-alias-label-primary); font-size: 13px; line-height: 1.5; }
39
- .memx * { box-sizing: border-box; }
46
+ .memx { color: var(--dsw-alias-label-primary); font-size: 13px; line-height: 1.5; background: var(--dsw-alias-bg-base) !important; position: relative; z-index: 2; isolation: isolate; contain: paint; min-height: 100%; width: 100%; max-width: 100%; box-sizing: border-box; align-self: stretch; flex: 1 1 auto; pointer-events: auto; overflow-x: clip; overflow-y: auto; overflow-wrap: break-word; }
47
+ .memx, .memx * { box-sizing: border-box; }
40
48
  .memx button { font: inherit; cursor: pointer; transition: color .15s ease, background .15s ease, border-color .15s ease, opacity .15s ease; }
41
49
  .memx button:active { transform: translateY(.5px); }
42
50
  .memx button:focus-visible { outline: 2px solid var(--dsw-alias-interactive-bg-active); outline-offset: 1px; }
@@ -61,21 +69,21 @@ const MEM_CSS = `
61
69
  .memx-iconbtn[aria-busy="true"] { opacity:.6; pointer-events:none; }
62
70
 
63
71
  /* layout — align breakpoint with dsh-maestro-mobile (1023px) */
64
- .memx-layout { display:grid; gap:14px; }
65
- @media (min-width: 1024px) { .memx-layout { grid-template-columns: 200px 1fr; align-items:start; } }
72
+ .memx-layout { display:grid; gap:14px; width:100%; max-width:100%; min-width:0; }
73
+ @media (min-width: 1024px) { .memx-layout { grid-template-columns: 200px minmax(0,1fr); align-items:start; } }
66
74
  /* nav */
67
75
  .memx-nav { display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding-bottom:2px; }
68
76
  .memx-nav::-webkit-scrollbar { display:none; }
69
77
  @media (min-width: 1024px) { .memx-nav { flex-direction:column; position:sticky; top:8px; overflow:visible; gap:4px; } }
70
78
  .memx-navitem { display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius:10px; border:1px solid transparent; background:transparent; color:var(--dsw-alias-label-secondary); white-space:nowrap; min-height:44px; }
71
79
  .memx-navitem:hover { background:var(--dsw-alias-bg-layer-2); color:var(--dsw-alias-label-primary); border-color:var(--dsw-alias-border-l1); }
72
- .memx-navitem[aria-current="page"] { background:var(--dsw-alias-interactive-bg-active); color:var(--dsw-alias-label-primary); border-color:var(--dsw-alias-border-l2); font-weight:600; }
80
+ .memx-navitem[aria-selected="true"], .memx-navitem[aria-current="page"] { background:var(--dsw-alias-interactive-bg-active); color:var(--dsw-alias-label-primary); border-color:var(--dsw-alias-border-l2); font-weight:600; }
73
81
  .memx-navitem svg { width:16px; height:16px; flex:none; }
74
82
  .memx-badge { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 6px; border-radius:999px; background:var(--dsw-alias-state-error-primary); color:#fff; font-size:11px; font-weight:700; line-height:1; }
75
83
  .memx-navcount { margin-left:auto; color:var(--dsw-alias-label-secondary); font-size:11px; }
76
84
 
77
85
  /* content */
78
- .memx-panel { min-width:0; display:flex; flex-direction:column; gap:12px; }
86
+ .memx-panel { min-width:0; max-width:100%; width:100%; display:flex; flex-direction:column; gap:12px; overflow:hidden; }
79
87
  .memx-toolbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
80
88
  .memx-pills { display:flex; gap:8px; flex-wrap:wrap; }
81
89
  .memx-pill { border-radius:999px; border:1px solid var(--dsw-alias-border-l1); padding:6px 12px; background:var(--dsw-alias-bg-layer-1); color:var(--dsw-alias-label-secondary); min-height:32px; display:inline-flex; align-items:center; }
@@ -94,10 +102,10 @@ const MEM_CSS = `
94
102
  .memx-btn:disabled { opacity:.5; cursor:not-allowed; }
95
103
 
96
104
  /* bento / cards */
97
- .memx-grid { display:grid; gap:10px; }
105
+ .memx-grid { display:grid; gap:10px; width:100%; max-width:100%; min-width:0; }
98
106
  @media (min-width: 640px) { .memx-grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
99
107
  @media (min-width: 1024px) { .memx-grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); } }
100
- .memx-card { border:1px solid var(--dsw-alias-border-l1); border-radius:12px; background:var(--dsw-alias-bg-layer-1); padding:12px; display:flex; flex-direction:column; gap:8px; }
108
+ .memx-card { border:1px solid var(--dsw-alias-border-l1); border-radius:12px; background:var(--dsw-alias-bg-layer-1); padding:12px; display:flex; flex-direction:column; gap:8px; min-width:0; max-width:100%; overflow:hidden; }
101
109
  .memx-card:hover { border-color:var(--dsw-alias-border-l2); }
102
110
  .memx-cardhead { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
103
111
  .memx-kicker { text-transform:uppercase; letter-spacing:.04em; font-size:11px; color:var(--dsw-alias-label-secondary); font-weight:600; }
@@ -115,12 +123,11 @@ const MEM_CSS = `
115
123
  @media (max-width: 639px) { .memx-actions button { flex:1; min-width:0; } }
116
124
 
117
125
  /* forms inline */
118
- .memx-form { border:1px solid var(--dsw-alias-border-l1); border-radius:12px; background:var(--dsw-alias-bg-layer-1); padding:12px; display:flex; flex-direction:column; gap:10px; }
119
- .memx-formrow { display:flex; gap:8px; flex-wrap:wrap; }
120
- .memx-formrow > * { flex:1; min-width:120px; }
121
- .memx-textarea { min-height:72px; padding:8px 10px; width:100%; }
122
- .memx-select, .memx-date { height:44px; padding:0 8px; }
123
- @media (max-width:1023px) { .memx { padding:12px 12px calc(16px + env(safe-area-inset-bottom,0px)) !important; } .memx-layout { gap:12px; } }
126
+ .memx-form { border:1px solid var(--dsw-alias-border-l1); border-radius:12px; background:var(--dsw-alias-bg-layer-1); padding:12px; display:flex; flex-direction:column; gap:10px; min-width:0; max-width:100%; }
127
+ .memx-formrow { display:flex; gap:8px; flex-wrap:wrap; min-width:0; }
128
+ .memx-formrow > * { flex:1 1 0; min-width:120px; max-width:100%; }
129
+ @media (max-width:1023px) { .memx { padding:12px 12px calc(16px + env(safe-area-inset-bottom,0px)) !important; } .memx-layout { gap:12px; grid-template-columns:1fr !important; } .memx-formrow > *{ min-width:0; } }
130
+ @media (max-width:480px) { .memx-field { flex-direction:column; align-items:stretch; } .memx-input { flex-basis:auto; width:100%; max-width:100%; } }
124
131
  @media (min-width:1440px) { .memx { max-width:1280px; margin:0 auto; } }
125
132
  `
126
133
 
@@ -525,7 +532,7 @@ function MemoryView({ ctx }: {ctx:any}): React.ReactElement {
525
532
  {id:'health', label:'Health', icon:ICO.activity},
526
533
  ]
527
534
 
528
- return React.createElement('div',{className:'dshmem memx', style:{padding:'12px 12px 16px'}},
535
+ return React.createElement('div',{className:'dshmem memx', style:{padding:'12px 12px 16px', background:'var(--dsw-alias-bg-base)', position:'relative', zIndex:1, isolation:'isolate' as any, minHeight:'100%', width:'100%'} as any},
529
536
  React.createElement('style',null, MEM_CSS),
530
537
  React.createElement('div',{className:'memx-header'},
531
538
  React.createElement('div',{className:'memx-header-main'},