diff --git a/site/src/components/Queue/item.tsx b/site/src/components/Queue/item.tsx
index b310c534..ac84b324 100644
--- a/site/src/components/Queue/item.tsx
+++ b/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>
diff --git a/site/src/components/Queue/style.less b/site/src/components/Queue/style.less
index 9cc87850..398d7b8d 100644
--- a/site/src/components/Queue/style.less
+++ b/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;