fix bug

apps/web/components/document-modal/graph-list-memories.tsx

@@ -193,7 +193,7 @@ export function GraphListMemories({
 	return (
 		<div
 			id="document-memories"
-			className="relative flex-1 px-3 pt-3 rounded-[14px] flex flex-col overflow-hidden shadow-[inset_0_2px_4px_rgba(0,0,0,0.3),inset_0_1px_2px_rgba(0,0,0,0.1)]"
+			className="relative h-[360px] shrink-0 px-3 pt-3 rounded-[14px] flex flex-col overflow-hidden shadow-[inset_0_2px_4px_rgba(0,0,0,0.3),inset_0_1px_2px_rgba(0,0,0,0.1)] md:h-auto md:min-h-0 md:flex-1 md:shrink"
 			style={{
 				backgroundImage: "url('/dot-pattern.svg')",
 				backgroundRepeat: "repeat",

packages/memory-graph/src/components/legend.tsx

@@ -6,6 +6,8 @@ interface LegendProps {
 	edges?: GraphEdge[]
 	isLoading?: boolean
 	colors: GraphThemeColors
+	compact?: boolean
+	maxHeight?: number
 }
 
 function HexagonIcon({
@@ -191,6 +193,8 @@ export const Legend = memo(function Legend({
 	edges = [],
 	isLoading: _isLoading = false,
 	colors,
+	compact = false,
+	maxHeight,
 }: LegendProps) {
 	const [isExpanded, setIsExpanded] = useState(false)
 	const [connectionsExpanded, setConnectionsExpanded] = useState(true)
@@ -201,7 +205,8 @@ export const Legend = memo(function Legend({
 
 	const outerStyle: React.CSSProperties = {
 		overflow: "hidden",
-		width: 214,
+		width: compact ? "min(214px, calc(100vw - 32px))" : 214,
+		maxWidth: "100%",
 	}
 
 	const cardStyle: React.CSSProperties = {
@@ -209,6 +214,7 @@ export const Legend = memo(function Legend({
 		backgroundColor: colors.controlBg,
 		border: `1px solid ${colors.controlBorder}`,
 		boxShadow: "0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)",
+		maxHeight,
 	}
 
 	const headerBtnStyle: React.CSSProperties = {
@@ -217,6 +223,7 @@ export const Legend = memo(function Legend({
 		alignItems: "center",
 		gap: 6,
 		width: "100%",
+		justifyContent: "flex-start",
 		cursor: "pointer",
 		outline: "none",
 		background: "none",
@@ -263,6 +270,21 @@ export const Legend = memo(function Legend({
 		gap: 8,
 	}
 
+	const expandedContentStyle: React.CSSProperties = {
+		marginTop: 16,
+		display: "flex",
+		flexDirection: "column",
+		gap: 16,
+		...(compact
+			? {
+					maxHeight: maxHeight ? Math.max(maxHeight - 56, 112) : 220,
+					overflowY: "auto",
+					overscrollBehavior: "contain",
+					paddingRight: 2,
+				}
+			: {}),
+	}
+
 	return (
 		<div style={outerStyle}>
 			<div style={cardStyle}>
@@ -281,14 +303,7 @@ export const Legend = memo(function Legend({
 					</button>
 
 					{isExpanded && (
-						<div
-							style={{
-								marginTop: 16,
-								display: "flex",
-								flexDirection: "column",
-								gap: 16,
-							}}
-						>
+						<div style={expandedContentStyle}>
 							{/* Statistics section */}
 							<div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
 								<span style={sectionLabelStyle}>Statistics</span>

packages/memory-graph/src/components/memory-graph.tsx

@@ -83,6 +83,9 @@ export function MemoryGraph({
 	const graphFitHeight = isCompactViewport
 		? Math.max(containerSize.height - 170, 240)
 		: containerSize.height
+	const compactLegendMaxHeight = isCompactViewport
+		? Math.max(containerSize.height - 104, 160)
+		: undefined
 
 	// Rebuild version chain index during render (not in an effect) so that
 	// the chain data is up-to-date when getChain() is called in useMemo below.
@@ -644,13 +647,14 @@ export function MemoryGraph({
 
 	const bottomLeftStackStyle: React.CSSProperties = {
 		position: "absolute",
-		bottom: 16,
-		left: 16,
+		bottom: isCompactViewport ? 12 : 16,
+		left: isCompactViewport ? 12 : 16,
 		zIndex: 20,
 		display: "flex",
 		flexDirection: "column",
 		alignItems: "flex-start",
 		gap: 8,
+		maxWidth: isCompactViewport ? "calc(100% - 24px)" : undefined,
 	}
 
 	return (
@@ -722,7 +726,9 @@ export function MemoryGraph({
 						<Legend
 							colors={colors}
 							edges={edges}
+							compact={isCompactViewport}
 							isLoading={isLoading}
+							maxHeight={compactLegendMaxHeight}
 							nodes={nodes}
 						/>
 					</div>