fix some spacing issues related to source material

trufflesuite · Jun 14, 2023 · 6f4ecd9 · 6f4ecd9
1 parent 3876a17
commit 6f4ecd9
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 10 deletions.
diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx
@@ -17,20 +17,24 @@ const useStyles = createStyles((theme, _params, _getRef) => ({
     display: "flex"
   },
   spacer: {
-    minHeight: 16,
-    minWidth: 16,
-    height: 16,
-    width: 16,
+    minHeight: 22,
+    minWidth: 22,
+    width: 22,
     marginRight: 5
   },
+  breakpointSpacerContainer: {
+    minHeight: 22,
+    minWidth: 22,
+    width: 22,
+    display: "flex",
+    marginRight: 5,
+    alignItems: "center"
+  },
   breakpointSpacer: {
-    minHeight: 16,
-    minWidth: 16,
-    height: 16,
     width: 16,
+    height: 16,
     backgroundColor: "#FA5252",
-    borderRadius: 25,
-    marginRight: 5
+    borderRadius: 25
   }
 }));
 
@@ -80,7 +84,9 @@ function SourceLine({
     breakpoints &&
     breakpoints[sourceId] &&
     breakpoints[sourceId].has(lineNumber) ? (
-      <div className={classes.breakpointSpacer} />
+      <div className={classes.breakpointSpacerContainer}>
+        <div className={classes.breakpointSpacer} />
+      </div>
     ) : (
       <div className={classes.spacer} />
     );

diff --git a/packages/dashboard/src/components/composed/Debugger/utils/source.ts b/packages/dashboard/src/components/composed/Debugger/utils/source.ts
@@ -57,6 +57,9 @@ export function addTextHighlightedClass(
   sourceRange: SourceRange
 ) {
   const editedLines = source.contents.split("\n").map((line, index) => {
+    if (line.length === 0) {
+      return line;
+    }
     const { start, end } = sourceRange;
     const lineHasHighlighting =
       source.id === sourceRange.source.id &&