Add padding to build log terminal

[menghif]

Issue This PR Addresses

Fixes #2534

Type of Change

• Bugfix: Change which fixes an issue
• New Feature: Change which adds functionality
• Documentation Update: Change which improves documentation
• UI: Change which improves UI

Description

Add 1rem padding to build log terminal.

Checklist

• Quality: This PR builds and passes our npm test and works locally
• Tests: This PR includes thorough tests or an explanation of why it does not
• Screenshots: This PR includes screenshots or GIFs of the changes made or an explanation of why it does not (if applicable)
• Documentation: This PR includes updated/added documentation to user exposed functionality or configuration variables are added/changed or an explanation of why it does not(if applicable)

[gitpod-io]

[Andrewnt219]

Seem like it isn't working. Reproduce:

// terminal.js
+ terminal.write("Hello world");

[Yoda-Canada]

@menghif I retest your code, and the cursor can display on the second line. However when I put in some letters, they are still on the first line.


The convertEol: true, means "When enabled the cursor will be set to the beginning of the next line with every new line. This is equivalent to sending '\r\n' for each '\n'. " Therefore, my point is that convertEol is the issue.

const terminal = new Terminal({
  cols: 80,
  rows: 30,
  convertEol: true,
  theme,
});

[humphd]

The fix for this is to use CSS to wrap the terminal in a parent element, then set its background to the same colour and include padding. Here's an example of how I do this on another project:

[Andrewnt219]

@menghif Add padding to the class ".xterm" works as well. See xtermjs/xterm.js#1208

[humphd]

Can we get an update on this?

[menghif]

Sorry for the delay, @Andrewnt219's fix seems to work well!

[Andrewnt219]

LGTM 👍.

[humphd]

@menghif squash and rebase this, and I'll merge it!

[humphd]

fyi @Yoda-Canada, this might help with your work on styling the terminal as well.