修复显示问题

frontend/src/styles.css

@@ -515,6 +515,9 @@ a {
   align-items: center;
   justify-content: space-between;
   gap: 12px;
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
   padding: 12px 14px;
   border-radius: 16px;
   background: var(--input-bg);
@@ -534,25 +537,39 @@ a {
 }
 
 .pending-download-copy {
+  flex: 1;
   min-width: 0;
+  overflow: hidden;
 }
 
 .pending-download-copy strong {
-  display: block;
+  display: -webkit-box;
   margin-bottom: 4px;
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-height: 1.35;
+  max-height: calc(1.35em * 2);
   font-size: 14px;
   font-weight: 600;
   color: var(--text-main);
 }
 
 .pending-download-copy p {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   font-size: 12px;
   color: var(--text-secondary);
 }
 
+.pending-download-icon {
+  flex: none;
+}
+
 input.room-code,
 .text-input-group input,
 .text-input-group textarea {
@@ -832,6 +849,9 @@ input.room-code::placeholder {
 
 .batch-item {
   margin-bottom: 12px;
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
   padding: 16px;
   background: var(--item-bg);
   border: 1px solid var(--item-border);
@@ -854,11 +874,14 @@ body[data-theme="dark"] .batch-item:hover {
   justify-content: space-between;
   align-items: center;
   gap: 10px;
+  min-width: 0;
   margin-bottom: 12px;
   font-size: 14px;
 }
 
 .file-info-left {
+  flex: 1;
+  min-width: 0;
   max-width: 60%;
   display: flex;
   align-items: center;
@@ -867,6 +890,7 @@ body[data-theme="dark"] .batch-item:hover {
 }
 
 .file-icon-wrapper {
+  flex: none;
   width: 32px;
   height: 32px;
   display: flex;
@@ -878,16 +902,26 @@ body[data-theme="dark"] .batch-item:hover {
 }
 
 .file-name {
+  display: -webkit-box;
+  flex: 1;
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-height: 1.35;
+  max-height: calc(1.35em * 2);
   font-weight: 500;
   color: var(--text-main);
 }
 
 .file-info-right {
   display: flex;
+  flex: none;
   align-items: center;
+  min-width: 0;
   gap: 8px;
 }
 
@@ -1446,8 +1480,16 @@ body[data-theme="dark"] .batch-item:hover {
   }
 
   .file-info-right {
+    flex-wrap: wrap;
+    row-gap: 8px;
     justify-content: flex-end;
   }
+
+  .file-status {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 }
 
 @media (max-width: 600px) {