warpdotdev / Warp

Warp is a modern, Rust-based terminal with AI built in so you and your team can build great software, faster.
https://warp.dev
Other
20.26k stars 337 forks source link

Incorrect rendering verticle character alignment in Starship prompt #4032

Open lukeaar opened 6 months ago

lukeaar commented 6 months ago

Discord username (optional)

No response

Describe the bug

Warp appears to incorrectly align characters vertically with the Starship prompt, regardless of shell.

Here is an example of my prompt in Warp with fish:

image

Here is an example of my prompt in Warp with nushell:

image

Here is the same prompt configuration in VSCode Terminal with fish:

image

For reference, here is my Starship config:

palette = 'dracula'

format = """
[](bg:background fg:foreground)\
$os\
$username\
$hostname\
$sudo\
[](bg:currentline fg:foreground)\
$time\
[](bg:purple fg:currentline)\
$directory\
$git_branch\
$git_status\
$git_metrics\
[\ue0b4](bg:background fg:purple)\
$character
"""

add_newline = true

################################################

[os]
disabled = false
format = '[$symbol]($style)'
style = "fg:background bg:foreground"

[os.symbols]
Alpaquita = " "
Alpine = " "
Amazon = " "
Android = " "
Arch = " "
Artix = " "
CentOS = " "
Debian = " "
DragonFly = " "
Emscripten = " "
EndeavourOS = " "
Fedora = " "
FreeBSD = " "
Garuda = "󰛓 "
Gentoo = " "
HardenedBSD = "󰞌 "
Illumos = "󰈸 "
Linux = " "
Mabox = " "
Macos = " "
Manjaro = " "
Mariner = " "
MidnightBSD = " "
Mint = " "
NetBSD = " "
NixOS = " "
OpenBSD = "󰈺 "
openSUSE = " "
OracleLinux = "󰌷 "
Pop = " "
Raspbian = " "
Redhat = " "
RedHatEnterprise = " "
Redox = "󰀘 "
Solus = "󰠳 "
SUSE = " "
Ubuntu = " "
Unknown = " "
Windows = "󰍲 "

[username]
style_root = 'bg:foreground fg:red bold'
style_user = 'bg:foreground fg:background'
format = '[$user @ ]($style)'
show_always = false

[hostname]
format = '[$ssh_symbol$hostname ]($style)'
ssh_symbol = " "
ssh_only = true
style = "fg:background bg:foreground"

[sudo]
format = '[󱑷 ]($style)'
style = 'bg:foreground fg:cyan'
disabled = false

[time]
disabled = false
time_format = "%R"
style = "bg:currentline fg:foreground"
format = '[ $time ]($style)'

[directory]
read_only = "󰌾"
format = "[ $path]($style)[ $read_only]($read_only_style)"
style = "fg:foreground bg:purple"
read_only_style = "fg:red bg:purple"
home_symbol = "\uf015"

[git_branch]
format = '[$symbol$branch(:$remote_branch)]($style)'
symbol = " "
style = "fg:foreground bg:purple"

[git_status]
format = '[$all_status]($style)'
style = "fg:foreground bg:purple"

[git_metrics]
format = "([+$added]($added_style))[]($added_style)"
added_style = "fg:foreground bg:purple"
deleted_style = "fg:red bg:purple"
disabled = false

[character]
success_symbol = '[ ➜](green) '
error_symbol = '[ ✗](red) '

################################################

[palettes.dracula]
background = '#282a36'
currentline = '#44475a'
foreground = '#f8f8f2'
comment = '#6272a4'
cyan = '#8be9fd'
green = '#50fa7b'
orange = '#ffb86c'
pink = '#ff79c6'
purple = '#bd93f9'
red = '#ff5555'
yellow = '#f1fa8c'

To reproduce

  1. Install Starship
  2. Configure starship per included configuration file
  3. Open Warp

Expected behavior

Expected to appear as it does in VSCode Terminal (see image in Bug Description)

Screenshots

No response

Operating system

MacOS

Operating system and version

Sonoma 14.2

Shell Version

No response

Current Warp version

No response

Regression

No, this bug or issue has existed throughout my experience using Warp

Recent working Warp date

No response

Additional context

No response

Does this block you from using Warp daily?

No

Is this a Warp specific issue? (i.e. does it happen in Terminal, iTerm, Kitty, etc.)

Yes, this I confirmed this only happens in Warp, not other terminals.

Warp Internal (ignore): linear-label:b9d78064-c89e-4973-b153-5178a31ee54e

None

dannyneira commented 6 months ago

Hey @lukeaar Thanks for letting us know. The symbols didn't transfer over from your starship.toml file, so it's not the same, but I noticed the vertical alignment issue. If you can please post the starship.toml file so we can download it with all the icons/symbols and let us know which font you're using. I'll bring this up with the team and we'll post any follow-up questions or updates on this thread.

To anyone else facing this issue, please add a 👍 to the original post at the top or comment with your details, and subscribe if you'd like to be notified.

lukeaar commented 5 months ago

starship.toml.txt

@dannyneira Attached is my starship.toml file renamed as a .txt to allow upload. Let me know how else I can help.

Edit: The font I'm using is JetBrainsMono Nerd Font Mono found here: https://github.com/ryanoasis/nerd-fonts/releases/download/v3.1.1/JetBrainsMono.zip

dannyneira commented 5 months ago

hey @lukeaar Thanks so much for the extra info. I was able to see the same on my Macbook display, but not others so I think this may be helped by changing the Settings > Appearance > Text > "Use thin strokes" settings to something that will play nicer with your display(s). I also found that the type and size of the font you choose may affect this aswell, so I encourage you to try different Nerd Fonts to see which may look best in Warp + starship.rs prompt. In my examples below I'm using Meslo NF.

For example below is the version using thin strokes "Never" which does produce the misalignment on my Macbook display.

CleanShot 2024-01-11 at 11 36 36@2x

Versus the one with thin strokes "Always" below, which lessens the misalignment.

CleanShot 2024-01-11 at 11 37 03@2x

Please let me know if changing the setting was helpful for your issue.

lukeaar commented 5 months ago

Hi @dannyneira . I see that thin strokes lessens the misalignment for you, but it is still present.

I have been playing around with line height to see if this helps anyone with knowledge about how Warp actually renders the prompts. All the below are with thin strokes set to 'Always':

Line height 1:

image

Line height 1.1:

image

Line height 1.2:

image

Line height 1.3:

image

Line height 1.4:

image

I hope this helps.

Luke