fix: status bar css and format

src/renderer/components/StatusBar/StatusBar.css

@@ -8,6 +8,8 @@
   font-size: 12px;
   padding: 0 8px;
   user-select: none;
+  overflow: hidden;
+  flex-wrap: nowrap;
 }
 
 .status-bar-left,
@@ -15,6 +17,13 @@
   display: flex;
   align-items: center;
   gap: 4px;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.status-bar-left {
+  flex-shrink: 1;
+  min-width: 0;
 }
 
 .status-bar-item {
@@ -23,6 +32,16 @@
   gap: 6px;
   padding: 0 8px;
   height: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.status-bar-item .task-message-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 300px;
 }
 
 .status-bar-item:hover {

src/renderer/components/StatusBar/StatusBar.tsx

@@ -56,7 +56,7 @@ export const StatusBar: React.FC = () => {
         {runningTasks.length > 0 && (
           <div className="status-bar-item">
             <span className="task-spinner" />
-            <span>{runningTasks[0].message}</span>
+            <span className="task-message-text" title={runningTasks[0].message}>{runningTasks[0].message}</span>
             {runningTasks.length > 1 && (
               <span className="text-muted">{t('statusBar.more', { count: runningTasks.length - 1 })}</span>
             )}