Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 83.77%. Comparing base (52f65d8) to head (800f1f1).
⚠️ Report is 2 commits behind head on main.

@@            Coverage Diff             @@
##             main    #6042      +/-   ##
==========================================
- Coverage   83.77%   83.77%   -0.01%     
==========================================
  Files         329      329              
  Lines       34559    34560       +1     
  Branches     9574     9576       +2     
==========================================
  Hits        28952    28952              
- Misses       5178     5179       +1     
  Partials      429      429              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

Looks pretty good to me! But I would suggest the following changes:

/* index-MUJPC5U5.css | https://deploy-preview-6042--perf-html.netlify.app/index-MUJPC5U5.css */

.settingsMenuLink {
  /* padding: 6px 14px; */
  /* font-weight: 600; */
  padding: 4px 14px;
}

.settingsMenuPanel {
  /* font-size: 13px; */
  /* font-weight: 400; */
  font-size: 12px;
}

.arrowPanelContent {
  /* --internal-approx-distance-from-top: 60px; */
  /* --internal-approx-distance-to-bottom: 100px; */
  --internal-approx-distance-from-top: 20px;
  --internal-approx-distance-to-bottom: 5px;
}

This reduces the font-size to something that's less aggressive, and makes it so that the panel doesn't get squished as early when you resize the browser.

The word "Docs" now looks a bit out of place. I think we should change it to "Documentation", now that we're no longer as space constrained horizontally.

Oh and how would you feel about putting a <i class="open-in-new"></i> icon in every link in that menu, just like we had for the old Docs button?

Thanks for your feedback, @mstange!

I've only now noticed that the arrow looks super weird.

However, there is no easy way to make it look good because the cog is at the very top right corner. I can make it look like this compromising the margin on the right.

Or I can completely remove the arrow sacrificing consistency with other popovers.

What would you prefer @mstange, @canova?

Let's keep the arrow and compromise the right margin a bit. We could also make the arrow a bit smaller, for all panels of this type.

Done ✅
Thanks for the feedback, @mstange! I've now added the changes. Also, slightly reduced the size of the arrow (15px -> 10px) - looks better everywhere to me.

The links are still bold for me in the deploy preview, is that intended?

The links are still bold for me in the deploy preview, is that intended?

They are semi-bold, to be precise :) It is intended, but I can remove it. I think it's just matter of taste, and I like it more this way. Shall I remove the semi-boldness?

Sorry for not chiming it sooner, I like the new menu a lot! It's a clear improvement to what we had before!

I think I would prefer the text without being bold or semi-bold too.

Also looking at the theme picker, its size is a bit disproportional to the popup now. What do you think about making its width the same as the items below it for a start? We can think about improving that in follow-ups further if we want to.

For example I'm thinking of something like this:

@mstange @canova Done! ✅