Skip to content

Improvements to markdown "Exit full screen" button

What does this MR do and why?

Improvements to markdown "Exit full screen" button

  • Align copy with normal markdown editing experience: The button to enter full screen says "Go full screen." The button to exit full screen has been changed from "Leave zen mode" to "Exit full screen". Zen mode is not a term that is presented to the user otherwise.
  • Align button style with normal markdown experience. The button should be styled like an icon button.
  • Use a tooltip. The button to enter full screen mode uses a tooltip, and this button should use one as well -- especially since this button is the only clickable affordance in the entire UI that the user can use to escape this focus mode.
  • Fix alignment. The button was made too tall because it inherited a line height from a parent.
  • Increase size. The button was too small compared to the larger text editor in full screen mode.
  • Make the button more comfortable on mobile by selectively applying the btn-sm class when the viewport is in the xs breakpoint range

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

State Before After
At rest gdk.test_3000_free-tier-group_free-tier-project_-issues_1__4 gdk.test_3000_free-tier-group_free-tier-project_-issues_1__9
At rest when viewport is xs (<576px) gdk.test_3000_free-tier-group_free-tier-project_-issues_1__5 gdk.test_3000_free-tier-group_free-tier-project_-issues_1__7
Hovering gdk.test_3000_free-tier-group_free-tier-project_-issues_1__3 gdk.test_3000_free-tier-group_free-tier-project_-_issues_1
Hovering when viewport is xs (<576px)
(obviously this only applies to desktop environments, no hover on mobile)
gdk.test_3000_free-tier-group_free-tier-project_-issues_1__6 image

How to set up and validate locally

  1. Check out this branch
  2. Edit markdown anywhere in the GDK (an issue description, comment, MR description, etc)
  3. Click the "Go full screen" button at the top right of the markdown editor
  4. You will see the larger exit button at the top right, and hovering or focusing it will show a tooltip with "Exit full screen". On hover or focus, the button will have the usual default tertiary button hover/focus styles.

Merge request reports