[site] 修复分片过多导致进度条显示溢出的问题 (qiniu#544)

* 修复分片过多导致进度条显示溢出的问题

Author: yinxulai

site/src/components/Queue/item.tsx

@@ -93,12 +93,15 @@ function ProgressBar(props: { progress: UploadProgress | null }) {
     return []
   }, [props.progress])
 
+  // 一行以内就需要撑开
+  const isExpanded = chunks.length < 18
+
   return (
     <ul className={classnames.progressBar}>
       {chunks.map((chunk, index) => {
         const cacheName = chunk.fromCache ? classnames.cachedChunk : ''
         return (
-          <li key={index}>
+          <li key={index} className={isExpanded ? classnames.expanded : ''}>
             <span className={cacheName} style={{ width: chunk.percent + '%' }}>
             </span>
           </li>

site/src/components/Queue/style.less

@@ -64,18 +64,23 @@
   position: relative;
 
   display: flex;
+  flex-wrap: wrap;
   flex-direction: row;
   align-items: center;
 
   list-style: none;
   padding-inline-start: 0;
 
-  li {
+  .expanded {
     flex: 1;
+  }
+
+  li {
+    margin: 1px;
     padding: 1px;
-    margin: 0 1px;
+    min-width: 4px;
     border-radius: 2px;
-    border:#333 solid 1px;
+    border: #333 solid 1px;
 
     span {
       height: 10px;