UI issue of REPL

[failable]

Check for existing issues

• [X] Completed

Describe the bug / provide steps to reproduce it

The cross button is overlapped with the text.

Environment

Zed: v0.146.0 (Zed Preview) OS: macOS 14.5.0 Memory: 32 GiB Architecture: x86_64

If applicable, add mockups / screenshots to help explain present your vision of the feature

No response

If applicable, attach your Zed.log file to this issue.

Zed.log

[rgbkrk]

Interesting. I don't know how to reproduce this, other than what appears to be line numbers turned off. What theme are you using? Any other settings I should be aware of?

[failable]

@rgbkrk Hello, I am not sure. Below is my whole setting

// Zed settings
//
// For information on how to configure Zed, see the Zed
// documentation: https://zed.dev/docs/configuring-zed
//
// To see all of Zed's default settings without changing your
// custom settings, run the `open default settings` command
// from the command palette or from `Zed` application menu.
{
  "language_models": {
    "openai": {}
  },
  "show_wrap_guides": false,
  "projects_online_by_default": false,
  "theme": "One Light",
  "ui_font_size": 14,
  "ui_font_family": "Open Sans",
  "buffer_font_family": "DM Mono",
  "buffer_font_size": 12,
  "buffer_line_height": "standard",
  "default_dock_anchor": "expanded",
  "cursor_blink": false,
  "confirm_quit": true,
  "always_treat_brackets_as_autoclosed": true,
  "show_completion_documentation": false,
  "hover_popover_enabled": false,
  "extend_comment_on_newline": false,
  "features": {
    "inline_completion_provider": "copilot"
  },
  "tabs": {
    "close_position": "left"
  },
  "inlay_hints": {
    "enabled": false
  },
  "collaboration_panel": {
    "button": false
  },
  "chat_panel": {
    "button": false
  },
  "notification_panel": {
    "button": false
  },
  "outline_panel": {
    "button": false
  },
  "assistant": {
    "default_model": {
      "provider": "openai",
      "model": "gpt-4o"
    },
    "default_height": 360.0,
    "provider": null,
    "version": "2",
    "button": false,
    "default_width": 360
  },
  "gutter": {
    "line_numbers": false,
    "code_actions": false,
    "folds": false,
    "runnables": false
  },
  "toolbar": {
    "breadcrumbs": true,
    "quick_actions": false
  },
  "tab_bar": {
    "show": false,
    "show_nav_history_buttons": false
  },
  "task": {
    "show_status_indicator": false
  },
  "git": {
    "inline_blame": {
      "enabled": false
    },
    "git_gutter": "tracked_files"
  },
  "project_panel": {
    "indent_size": 8,
    "button": false,
    "scrollbar": {
      "show": "never"
    }
  },
  "scrollbar": {
    "show": "never"
  },
  "indent_guides": {
    "enabled": false
  },
  "calls": {
    "mute_on_join": true,
    "share_on_join": false
  },
  "journal": {
    "hour_format": "hour24"
  },
  "languages": {
    "Python": {
      "format_on_save": "on",
      "formatter": {
        "external": {
          "command": "pyformat",
          "arguments": ["-"]
        }
      }
    }
  },
  "lsp": {
    "rust-analyzer": {
      "initialization_options": {
        "checkOnSave": {
          "command": "clippy"
        },
        "completion": {
          "snippets": {
            "custom": {
              "main (tokio)": {
                "prefix": ["main_tokio"],
                "body": ["#[tokio::main]", "async fn main() {", "\t$0", "}"],
                "scope": "item"
              },
              "todo!": {
                "prefix": ["t"],
                "body": ["todo!()$0"],
                "scope": "expr"
              },
              "unimplemented!": {
                "prefix": ["u"],
                "body": ["unimplemented!()$0"],
                "scope": "expr"
              },
              "vec!": {
                "prefix": ["v"],
                "body": ["vec![$0]"],
                "scope": "expr"
              },
              "format!": {
                "prefix": ["f"],
                "body": ["format!(\"{}\", $0);"],
                "scope": "expr"
              },
              "write!": {
                "prefix": ["w"],
                "body": ["write!(\"{}\", $0);"],
                "scope": "expr"
              },
              "writeln!": {
                "prefix": ["wl"],
                "body": ["writeln!(\"{}\", $0);"],
                "scope": "expr"
              },
              "println!": {
                "prefix": ["p"],
                "body": ["println!(\"{}\", $0);"],
                "scope": "expr"
              },
              "println! (debug)": {
                "prefix": ["dp"],
                "body": ["println!(\"{:?}\", $0);"],
                "scope": "expr"
              },
              "println! (pretty)": {
                "prefix": ["dpp"],
                "body": ["println!(\"{:#?}\", $0);"],
                "scope": "expr"
              },
              "thread::spawn": {
                "prefix": ["spawn"],
                "body": ["thread::spawn(move || {", "\t$0", "});"],
                "requires": ["std::thread"],
                "scope": "expr"
              },
              "AsRef<Path>": {
                "prefix": ["ap"],
                "body": ["AsRef<Path>$0"],
                "requires": ["std::path::Path"],
                "scope": "expr"
              },
              "derive": {
                "prefix": ["d"],
                "body": ["#[derive(Clone, Debug, Default)]$0"],
                "scope": "item"
              },
              "derive (serde)": {
                "prefix": ["ds"],
                "body": ["#[derive(Serialize, Deserialize)]$0"],
                "requires": ["serde::Serialize", "serde::Deserialize"],
                "scope": "item"
              },
              "thiserror": {
                "prefix": ["te"],
                "body": [
                  "#[derive(Error, Debug)]",
                  "pub enum ${1:Error} {",
                  "\t$0",
                  "}"
                ],
                "requires": ["thiserror::Error"],
                "scope": "item"
              },
              "thiserror (error)": {
                "prefix": ["e"],
                "body": ["#[error(\"$0\")]"],
                "scope": "item"
              }
            }
          }
        }
      }
    }
  },
  "terminal": {
    "button": false,
    "blinking": "off",
    "line_height": "standard",
    "env": {
      "EDITOR": "zed --wait"
    }
  },
  "telemetry": {
    "diagnostics": false,
    "metrics": false
  },
  // // Rose Pine Dawn
  // "experimental.theme_overrides": {
  //   // "status_bar.background": "#F9F4EE",
  //   "status_bar.background": "#FDF9F3",
  //   "title_bar.background": "#FDF9F3",
  //   // "tab_bar.background": "#f6f6f6",
  //   // "tab.inactive_background": "#f6f6f6",
  //   // "panel.background": "#fafafa",
  //   "border": "#EEEAE4",
  //   // "hint": "#bbbbbb",
  //   // "editor.active_line.background": "#aaaaaa0f",
  //   // "ghost_element.selected": "#f1f1f1",
  //   // "ghost_element.hover": "#eaeaea",
  //   // "ghost_element.active": "#dadada",
  //   // "warning": "#ffa54fcc",
  //   "editor.background": "#FDF9F3",
  //   "editor.gutter.background": "#FDF9F3"
  //   // "text": "#454545",
  //   // "text.muted": "#aeaeae",
  //   // "elevated_surface.background": "#f6f6f6",
  //   // "border.variant": "#eaeaea",
  //   // "modified": "#eac351"
  //   // "modified": "#f9d978"
  // }
  // // Serendipity Morning
  // "experimental.theme_overrides": {
  //   "panel.background": "#FDFDFE",
  //   "border": "#F2F2F2",
  //   // "predictive": "#8388AD",
  //   "terminal.background": "#FDFDFE"
  // }
  // // Fleet Light
  // "experimental.theme_overrides": {
  //   "text.accent": "#a31d8d"
  // }
  // One Light
  "experimental.theme_overrides": {
    "status_bar.background": "#fafafa",
    "title_bar.background": "#fafafa",
    "tab_bar.background": "#f6f6f6",
    "tab.inactive_background": "#f6f6f6",
    "panel.background": "#fafafa",
    "border": "#f2f2f2f2",
    "border.variant": "#eaeaea",
    "hint": "#bbbbbbf0",
    "editor.active_line.background": "#aaaaaa0f",
    "ghost_element.selected": "#f1f1f1",
    "ghost_element.hover": "#eaeaea",
    "ghost_element.active": "#dadada",
    "warning": "#ffa54fcc",
    "background": "#fafafa",
    "text": "#454545",
    "text.muted": "#aeaeae",
    "elevated_surface.background": "#f6f6f6",
    "modified": "#eac351"
    // "modified": "#f9d978"
  }
  // Xcode
  // "experimental.theme_overrides": {
  //   "status_bar.background": "#fdfdfd",
  //   "title_bar.background": "#fdfdfd",
  //   "tab_bar.background": "#fafafa",
  //   "tab.inactive_background": "#fdfdfd",
  //   "panel.background": "#fefefe",
  //   "border": "#f0f0f0",
  //   "hint": "#cdcdcd"
  // }
  // // Xcode Bare
  // "experimental.theme_overrides": {
  //   "status_bar.background": "#ffffffff",
  //   "title_bar.background": "#ffffffff",
  //   "tab_bar.background": "#fafafa",
  //   "tab.inactive_background": "#fdfdfd",
  //   "panel.background": "#ffffffff",
  //   "border": "#fafafaff",
  //   "border.variant": "#f0f0f0ff",
  //   "hint": "#10618cff",
  //   "elevated_surface.background": "#f8f8f8ff"
  // }
}

[failable]

@rgbkrk The issue seems to happen when the gutter is hidden, e.g.

  "gutter": {
    "line_numbers": false,
    "code_actions": false,
    "folds": false,
    "runnables": false
  },

If it is shown, the UI looks like

[rgbkrk]

Ok we improved how this is styled which will make it easier to fix this one. https://github.com/zed-industries/zed/pull/16308

I think with some simple changes it looks ok, but it might be better to just move the close button to the right when the gutter bits are disabled:

[failable]

@rgbkrk Hello, it seems there are still some issues with the UI (with gutter hidden). If the mouse is hovered on the button, we can see the button is overlapped with the first character of the output.

Zed: v0.150.3 (Zed Preview)
OS: macOS 14.6.1
Memory: 32 GiB
Architecture: x86_64

[rgbkrk]

Not much gutter left! We could just not put the button in at all if someone had disabled all the UI affordance area we need.

[failable]

No button is OK, but I wish we can

• Clear empty output automatically https://github.com/zed-industries/zed/issues/15946
• Use shortcut to clear single output https://github.com/zed-industries/zed/issues/15947
• Hide or unhide the output https://github.com/zed-industries/zed/issues/15948