style: improve problem panel style (#2727)

* style: improve problem panel style * chore: update linenumber text
opensumi · May 22, 2023 · 59245fc · 59245fc · opensumi · May 22, 2023
1 parent 5c09fb5
commit 59245fc
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 7 deletions.
diff --git a/packages/markers/src/browser/markers-tree.view.tsx b/packages/markers/src/browser/markers-tree.view.tsx
@@ -61,7 +61,6 @@ const MarkerList: FC<{ viewState: ViewState }> = ({ viewState }) => {
         height={viewState.height}
         itemHeight={MARKER_TREE_NODE_HEIGHT}
         supportDynamicHeights={true}
-        overflow={'auto'}
         onReady={handleTreeReady}
         model={model}
         placeholder={() => <Empty />}

diff --git a/packages/markers/src/browser/tree/marker-node.tsx b/packages/markers/src/browser/tree/marker-node.tsx
@@ -108,7 +108,7 @@ const MarkerItemDescription: FC<{ marker: IRenderableMarker }> = memo(({ marker
         )}
         {marker.code && ')'}
       </div>
-      <div className={styles.position}>{`[${marker.startLineNumber},${marker.startColumn}]`}</div>
+      <div className={styles.position}>{`[Ln ${marker.startLineNumber}, Col ${marker.startColumn}]`}</div>
     </div>
   );
 });

diff --git a/packages/markers/src/browser/tree/tree-node.module.less b/packages/markers/src/browser/tree/tree-node.module.less
@@ -20,12 +20,15 @@
   .detail_name {
     color: var(--foreground);
     margin-right: 6px;
-    display: inline;
     white-space: pre;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   .detail_description {
-    display: inline;
+    display: inline-flex;
+    flex-shrink: 0;
     margin-left: 5px;
     color: var(--descriptionForeground);
     .typeContainer {
@@ -116,12 +119,12 @@
 
   .overflow_wrap {
     flex: 1;
+    display: flex;
     flex-shrink: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
     text-align: left;
     color: var(--foreground);
+    flex-direction: row;
+    width: 0;
   }
 
   .flex_wrap {
-Original file line number
+Diff line change
@@ Expand Up @@
             )}
             {marker.code && ')'}
           </div>
-          <div className={styles.position}>{`[${marker.startLineNumber},${marker.startColumn}]`}</div>
+          <div className={styles.position}>{`[Ln ${marker.startLineNumber}, Col ${marker.startColumn}]`}</div>
         </div>
       );
     });
@@ Expand Down @@