From 1a1f2ad80efb397e27336fc9dfff0a1b70654e8c Mon Sep 17 00:00:00 2001
From: Marqle <Marqle@noreply.gitcode.com>
Date: Wed, 3 Jun 2026 09:37:10 +0800
Subject: [PATCH] fix imageviewer

---
 .../tools/editor/components/ImageViewer.scss  | 26 +++++++++++++++++--
 .../tools/editor/components/ImageViewer.tsx   |  2 ++
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/web-ui/src/tools/editor/components/ImageViewer.scss b/src/web-ui/src/tools/editor/components/ImageViewer.scss
index b3a6478d2e..1ca312524f 100644
--- a/src/web-ui/src/tools/editor/components/ImageViewer.scss
+++ b/src/web-ui/src/tools/editor/components/ImageViewer.scss
@@ -34,6 +34,7 @@
     border-bottom: 1px solid $border-base;
     min-height: 32px;
     flex-shrink: 0;
+    container-type: inline-size;
   }
 
   &__info {
@@ -43,6 +44,7 @@
     font-size: var(--font-size-sm);
     flex: 1;
     min-width: 0;
+    overflow: hidden;
   }
 
   &__filename {
@@ -51,13 +53,34 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    min-width: 0;
+    flex-shrink: 1;
+  }
+
+  &__dimensions {
+    font-size: var(--font-size-xs);
+    color: var(--color-text-secondary);
+    white-space: nowrap;
+    flex-shrink: 0;
   }
 
-  &__dimensions,
   &__filesize {
     font-size: var(--font-size-xs);
     color: var(--color-text-secondary);
     white-space: nowrap;
+    flex-shrink: 0;
+  }
+
+  @container (max-width: 250px) {
+    .bitfun-image-viewer__dimensions {
+      display: none;
+    }
+  }
+
+  @container (max-width: 150px) {
+    .bitfun-image-viewer__filename {
+      display: none;
+    }
   }
 
   &__controls {
@@ -65,7 +88,6 @@
     align-items: center;
     gap: $size-gap-2;
     flex-shrink: 0;
-    margin-left: auto;
   }
 
   // Button Styles
diff --git a/src/web-ui/src/tools/editor/components/ImageViewer.tsx b/src/web-ui/src/tools/editor/components/ImageViewer.tsx
index 9ad6aef881..e92c5fcc27 100644
--- a/src/web-ui/src/tools/editor/components/ImageViewer.tsx
+++ b/src/web-ui/src/tools/editor/components/ImageViewer.tsx
@@ -202,6 +202,7 @@ export const ImageViewer: React.FC<ImageViewerProps> = ({
             <button
               className="bitfun-image-viewer__btn"
               onClick={handleDownload}
+              style={{display: 'none'}}
             >
               <Download size={14} />
             </button>
@@ -213,6 +214,7 @@ export const ImageViewer: React.FC<ImageViewerProps> = ({
             <button
               className="bitfun-image-viewer__btn"
               onClick={handleToggleFullscreen}
+              style={{display: 'none'}}
             >
               <Maximize2 size={14} />
             </button>