Replace the raw literal with a design token or a feature-scoped CSS variable (e.g. defined once and referenced here). Raw pixel widths for panel dimensions should be expressed via the design-system token layer so they adapt with Nova and avoid magic numbers per the area CSS conventions.

I think I disagree with the AI review here. This seems unnecessarily convoluted, especially since the pre-nova / nova split is temporary. Putting a hardcoded value in a variable that's used just once in the same rule where it's defined doesn't make it a design token, so I think we can simplify this to:

width: 360px;
@media not -moz-pref("browser.nova.enabled") {
 width: 400px;
}

Note that making pre-nova the conditional block makes it easier to clean this up down the road.

It would also be great if there was an actual design token to use here instead of the , but I don't think we have that. However can we make this a bit smarter by using so the panel adapts to the text size? The figma appears to be using if I'm reading it correctly; I suspect this means we want here because what matters is the text size in the panel, not the text size at the document root.

I've updated the AI review prompt with this feedback, thanks!

https://github.com/msujaws/qreviews/commit/479cf115a1f82a9545e64b22c506e064655ec044

Looks like this hasn't been addressed yet:

It would also be great if there was an actual design token to use here instead of the , but I don't think we have that. However can we make this a bit smarter by using so the panel adapts to the text size? The figma appears to be using if I'm reading it correctly; I suspect this means we want here because what matters is the text size in the panel, not the text size at the document root.

I can update this. When I look at the Figma, though, I'm seeing 22.5rem, which seems correct based on a 16px font-size. Do you have a link to the Figma where are you seeing 24rem?

@dao, after taking a closer look, the panel is using for the font property which by default will probably be around 12px or 13px depending on the platform. 28em or 30em seems more suitable in that case. When you say using will make it a bit smarter could you elaborate on that? I want to verify as many scenarios as possible, especially with other locales to ensure larger/long text is accounted for.