Fix preview separator

src/report/utils/line.js

@@ -1,12 +1,21 @@
-import { getPaddedScreenWidth } from '../tty.js'
+import { getPaddedScreenWidth, getScreenWidth } from '../tty.js'
 
 import { separatorColor } from './colors.js'
 
-// Separator between different reporters and/or preview elements
+// Separator between different reporters and/or footer
 export const getLineSeparator = function () {
   const paddedScreenWidth = getPaddedScreenWidth()
   return `${separatorColor(HORIZONTAL_LINE.repeat(paddedScreenWidth))}\n`
 }
 
 // Works with all terminals
 const HORIZONTAL_LINE = '\u2500'
+
+// Separator above the preview bottom bar
+export const getFullLineSeparator = function () {
+  const screenWidth = getScreenWidth()
+  return `${separatorColor(FULL_HORIZONTAL_LINE.repeat(screenWidth))}\n`
+}
+
+// Works with all terminals
+const FULL_HORIZONTAL_LINE = '\u2500'

src/run/preview/update/bottom_bar.js

@@ -1,5 +1,5 @@
 import { handleContent } from '../../../report/handle.js'
-import { getLineSeparator } from '../../../report/utils/line.js'
+import { getFullLineSeparator } from '../../../report/utils/line.js'
 
 import { getActions, ACTIONS_LABEL } from './actions.js'
 import { getCounterRow, getCounter } from './counter.js'
@@ -32,13 +32,17 @@ export const getBottomBar = function ({
     leftWidth,
   })
   const actionsA = getActions(actions, leftWidth)
-  const content = `${separator}${progressRow}\n${counterRow}\n${actionsA}`
+  const content = `${progressRow}\n${counterRow}\n${actionsA}`
   const bottomBar = handleContent({ content, colors, padding: true })
-  return bottomBar
+  return `${separator}${bottomBar}`
 }
 
+// The separator is only present when there is some `report` to separate from.
+// It has bottom padding to separate it from the `bottomBar` but no top padding
+// to separate it from the `report`, to make it clear the `bottomBar` overlays
+// it.
 const getSeparator = function (report) {
-  return report === '' ? '' : `${getLineSeparator()}\n`
+  return report === '' ? '' : getFullLineSeparator()
 }
 
 const getLeftWidth = function ({ durationLeft, total }) {