Skip to content

Fix padding on new nav search lists

What does this MR do and why?

Describe in detail what your merge request does and why.

Increases the right padding on Nav Item Project and Group titles so that it does not overlap with the remove button.

Screenshots or screen recordings

Before After
not edit mode Screenshot_2023-04-20_at_14.28.58 Screenshot_2023-04-20_at_12.51.02
project edit mode while hovering Screenshot_2023-04-20_at_14.29.07 Screenshot_2023-04-20_at_12.51.15
group edit mode while hovering Screenshot_2023-04-20_at_14.27.04 Screenshot_2023-04-20_at_12.51.46
search mode Screenshot_2023-04-20_at_14.27.29 Screenshot_2023-04-20_at_12.52.21

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

  1. In order to force a long name to test, within app/assets/javascripts/super_sidebar/utils.js change formatContextSwitcherItems on line 76 to be the following:
export const formatContextSwitcherItems = (items) =>
  items.map(({ id, name: title, namespace, avatarUrl: avatar, webUrl: link }) => ({
    id,
    title: 'long long test title very long',
    subtitle: 'subtitle long long test title very long',
    avatar,
    link,
  }));
  1. Open the context Switcher within the super sidebar

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #404644 (closed)

Edited by James Rushford

Merge request reports