checkpoint

static/css/components/modal.css

@@ -29,6 +29,8 @@ body.modal-open {
     border: 1px solid var(--lora-border);
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
     transform: translateZ(0); /* 创建新的堆叠上下文 */
+    max-height: 90vh; /* 限制最大高度为视窗高度的90% */
+    overflow-y: auto; /* 添加垂直滚动条 */
 }
 
 /* Delete Modal specific styles */
@@ -617,44 +619,66 @@ body.modal-open {
 }
 
 .carousel {
-    display: flex;
-    flex-direction: column; /* 改为垂直布局 */
-    gap: var(--space-3);
-    overflow-y: auto; /* 垂直滚动 */
+    transition: max-height 0.3s ease-in-out;
+    overflow: hidden;
 }
 
-.carousel img,
-.carousel video {
+.carousel.collapsed {
+    max-height: 0;
+}
+
+.carousel-container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+}
+
+.media-wrapper {
+    position: relative;
     width: 100%;
-    height: auto;
-    max-height: 70vh; /* 限制单张图片最大高度 */
+    background: var(--lora-surface);
+    margin-bottom: var(--space-2);
+}
+
+.media-wrapper:last-child {
+    margin-bottom: 0;
+}
+
+.media-wrapper img,
+.media-wrapper video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
     object-fit: contain;
-    border-radius: var(--border-radius-base);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
 /* Scroll Indicator */
 .scroll-indicator {
-    position: sticky;
-    top: 0;
-    left: 0;
-    right: 0;
-    text-align: center;
+    cursor: pointer;
     padding: var(--space-2);
-    background: linear-gradient(to bottom, 
-        var(--lora-surface) 0%,
-        transparent 100%);
-    opacity: 0.8;
-    transition: opacity 0.3s;
-    pointer-events: none;
-    z-index: 1; /* 确保滚动提示在图片上层 */
+    background: var(--lora-surface);
+    border: 1px solid var(--lora-border);
+    border-radius: var(--border-radius-sm);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    margin-bottom: var(--space-2);
 }
 
-/* Remove horizontal scrolling styles */
-.carousel {
-    scroll-snap-type: none;
-    grid-auto-flow: initial;
-    overflow-x: initial;
+.scroll-indicator:hover {
+    background: oklch(var(--lora-accent) / 0.1);
+}
+
+.lazy {
+    opacity: 0;
+    transition: opacity 0.3s;
+}
+
+.lazy[src] {
+    opacity: 1;
 }
 
 /* Update Trigger Words styles */