chore: add status ellipsis

Author: pengooseDev

packages/trace-viewer/src/ui/statusLine.css

@@ -1,32 +1,41 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
 
 .status-line {
-  flex: auto;
-  align-items: center;
+  display: block;
+  width: 100%;
   white-space: nowrap;
-  line-height: 22px;
-  display: flex;
-  flex-direction: row;
-  height: 30px;
   overflow: hidden;
   text-overflow: ellipsis;
+  line-height: 30px;
+  height: 30px;
   padding-left: 5px;
-  gap: 8px;
-}
-
-.status-line > * {
-  flex-shrink: 0;
+  cursor: pointer;
 }
 
-.status-line > div {
-  display: flex;
+.status-line > span:not(:first-child) {
+  display: inline-flex;
   align-items: center;
   gap: 4px;
-  cursor: pointer;
   user-select: none;
+  margin-left: 8px;
 }
 
 .status-line-count {
-  display: flex;
+  display: inline-flex;
   align-items: center;
   gap: 8px;
 }

packages/trace-viewer/src/ui/statusLine.tsx

@@ -13,12 +13,14 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import '@web/third_party/vscode/codicon.css';
 import '@web/common.css';
 import './statusLine.css';
 import React from 'react';
 import { clsx } from '@web/uiUtils';
 import { testStatusIcon } from './testUtils';
+
 interface StatusLineProps {
   passed: number;
   failed: number;
@@ -32,18 +34,18 @@ export const StatusLine: React.FC<StatusLineProps> = ({ passed, failed, skipped,
   return (
     <div data-testid='status-line' className='status-line' title={`${passed} passed, ${failed} failed, ${skipped} skipped`}>
       <span className='status-line-count'>
-        <span className={clsx('codicon', isRunning ? testStatusIcon('running') : testStatusIcon('none'))} />
+        <i className={clsx('codicon', isRunning ? testStatusIcon('running') : testStatusIcon('none'))} />
         <span data-testid='test-count'>{count}/{total}</span>
       </span>
-      <div className='status-passed'>
-        <span className={clsx('codicon', testStatusIcon('passed'))} />{passed || 0}
-      </div>
-      <div className='status-failed'>
-        <span className={clsx('codicon', testStatusIcon('failed'))} />{failed || 0}
-      </div>
-      <div className='status-skipped'>
-        <span className={clsx('codicon', testStatusIcon('skipped'))} />{skipped || 0}
-      </div>
+      <span className='status-passed'>
+        <i className={clsx('codicon', testStatusIcon('passed'))} />{passed || 0}
+      </span>
+      <span className='status-failed'>
+        <i className={clsx('codicon', testStatusIcon('failed'))} />{failed || 0}
+      </span>
+      <span className='status-skipped'>
+        <i className={clsx('codicon', testStatusIcon('skipped'))} />{skipped || 0}
+      </span>
     </div>
   );
 };