Sidebar sizes - icons and font - are way too big

Really not sure what is going on here but the sizes are way too big and I can't scroll down here to see everything (second and third image).

25" ultra-wide monitor (~60cm x ~30cm).
Windows machine, 2560px x 1080px - scale 100%.

This also extends to other specific tools like Logging (the word behind is Details but maybe that one is already fitting to the other sizes, not sure):

Definitely, the details session is also bigger than the messages.

@Piinks

@Piinks @goderbauer did something change with the Flutter framework recently that would affect text styling in this way?

Nothing comes immediately to mind. Do we know when this approximately started to happen?

I could not answer that since I have recently discovered the sidebar (by the Observable Flutter stream) and had never used it previously.

maybe this is caused by the high definition screen, which apply a scale factor devtools failed to apply the same behavier as the code editor?

I don't think so. My scale is 100%. I do have another monitor for 16:9 (the one I mentioned is 21:9) which is 1920x1080 and that monitor does have by default the suggestion for 125% scale. But even when setting it to 100% (both set to this now) and restarting vscode doesn't seem to fix this.

That comment did give me another idea though. Can it be because of the two-monitor setup? One (the 16:9) is smaller (in height as well, I mean, not just the ratio fact) than the other, maybe something is not getting calculated correctly here?

Hi Everyone,
I'm having the same issues with Scale Resolution set to 100%. Is there any solution for it?

Could this be happening because I have a two monitor setup with different DPI?

I've also been seeing this with the Property Editor embedded in VS Code. I will try to see if I find a difference based on the monitors I'm using.

Should we be scaling any UI elements by the font factor at all?

I'm not sure if you mean in VS Code, or generally. Generally for scaling in VS Code (the UI etc.), you use the zoom settings:

This also zooms the editor. I think the intention of using the font size in VS Code at all was to try and get a better default for those that might have increased their size for accessibility, however I'm not really sure if that works (because if you need the whole UI larger, you'd probably use the zoom and not the font size).

Perhaps it'd be interesting to remove the scaling that causes some elements to be bigger and get some screenshots (of both the sidebar and some screens like the inspector)?

This also zooms the editor. I think the intention of using the font size in VS Code at all was to try and get a better default for those that might have increased their size for accessibility, however I'm not really sure if that works (because if you need the whole UI larger, you'd probably use the zoom and not the font size).

Yes, after playing around with zooming and changing the font size with VS Code, IntelliJ, and in the browser, here is what I've discovered:

In browser:
There is no way for a user to change the font size, but that is okay because native browser zoom also zooms DevTools

In VS Code:

Changing the zoom: changing the zoom in VS Code increases/decreases the size of everything. It also changes the zoom of the embedded DevTools frames.
Changing the font size: Changing the font size in VS Code only changes the font size in the code editor itself, it does not change the font size across the rest of the IDE.

DevTools is currently being passed the font size and scaling to match that.

In IntelliJ:
There are three settings that affect the sizing of elements:

Editor > font: only affects the font size in the code editor itself (the same behavior as VS Code's font size setting)
Appearance > font: only affects the font size for everywhere other than the code editor itself. Also scales all the buttons, UI elements to match.
Appearance > Zoom: Behaves the same as Appearance > font, increases the font size for everywhere other than the code editor itself. Also scales all the buttons, UI elements to match.

DevTools is currently being passed Editor > font and scaling to match that.

Proposal:

Based on this, I think it would make sense to:

Do not pass in the font size in VS Code (or ignore it from DevTools). VS Code scales DevTools as expected by zooming.
In IntelliJ, pass either the Appearance > font and/or Appearance > zoom setting (depending on which are set). DevTools should scale accordingly based on those settings. (I don't know exactly how DevTools is embedded in IntelliJ, but another option might be to set the devicePixelRatio based on the IntelliJ settings to the IFRAME, the devicePixelRatio is what Flutter uses to determine the zoom).

Do not pass in the font size in VS Code (or ignore it from DevTools). VS Code scales DevTools as expected by zooming.

Removing it from VS Code probably makes most sense.. it can ship sooner and avoids confusion from passing something that's not used.

But does that solve the whole problem? Isn't part of the issue that some of the elements are larger than the standard size and looked out of place? (or did that only occur because of the explicit font size?)

@kenzieschmoll

Removing it from VS Code probably makes most sense.. it can ship sooner and avoids confusion from passing something that's not used.

SGTM to remove passing the font size from VS Code! @kenzieschmoll is that good with you?

But does that solve the whole problem? Isn't part of the issue that some of the elements are larger than the standard size and looked out of place? (or did that only occur because of the explicit font size?)

I think that's only because we are applying scaleByFontFactor to some UI elements but not others. So some aren't being scaled at all, whereas others are being scaled to the font size passed in by the editor. (So we will still need to fix this for IntelliJ. since zooming in IntelliJ doesn't zoom DevTools).

@kenzieschmoll

SGTM to remove passing the font size from VS Code! @kenzieschmoll is that good with you?

Yes sounds good. We can leave all the scaleByFontFactor code in DevTools for now since we may still need this for IntelliJ / Android Studio.

I don't know exactly how DevTools is embedded in IntelliJ, but another option might be to set the devicePixelRatiobased on the IntelliJ settings to the IFRAME, the devicePixelRatio is what Flutter flutter-team-archive/engine#33695 the zoom.

Is this what is done in VS code? @jwren do you know if we can do something similar with jx browser?

Oh hmm, I skimmed the MDN Web docs, devicePixelRatio is read-only so we wouldn't be able to change it. I do think it's possible we might be able to solve this by modifying the CSS of the IFRAME in intellij.

I've removed the fontSize parameter from VS Code. I also compared the default font size in the inspector tree to a number of other different labels in the VS Code UI and confirmed that they are approximately the same size by default (and scale together):

@DanTup

I've Dart-Code/Dart-Code#5406. I also compared the default font size in the inspector tree to a number of other different labels in the VS Code UI and confirmed that they are approximately the same size by default (and scale together)

Thanks @DanTup ! I'm preparing a similar change in IntelliJ so hopefully we can remove all the scaling logic in DevTools

@elliette

Update from @elliette: This is partially resolved but is blocked on the next version of the IntelliJ plugin being released. The next step once IntelliJ is released is to go through DevTools and clean up all uses of sizeByFontFactor.

@kenzieschmoll

@kenzieschmoll thank you for the updates. Do you know what is the ETA for stable?

@River-Szasz

Hi @River-Szasz - if you are using VS Code, the fix should already be in version 3.106 or later. For Android Studio/IntelliJ it will be included in the next release.

Navigation Menu

Repository navigation

Sidebar sizes - icons and font - are way too big #8243

9 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Sidebar sizes - icons and font - are way too big #8243

Description

Activity

FMorschel commented on Aug 29, 2024

kenzieschmoll commented on Aug 30, 2024

goderbauer commented on Aug 30, 2024

FMorschel commented on Aug 30, 2024

hpp0hpp commented on Nov 11, 2024

FMorschel commented on Nov 11, 2024

pndychrg commented on Dec 9, 2024

FMorschel commented on Dec 9, 2024

elliette commented on Dec 19, 2024

9 remaining items

DanTup commented on Jan 30, 2025

elliette commented on Jan 30, 2025

DanTup commented on Jan 30, 2025

elliette commented on Jan 30, 2025

kenzieschmoll commented on Jan 30, 2025

elliette commented on Jan 30, 2025

DanTup commented on Feb 5, 2025

elliette commented on Feb 5, 2025

kenzieschmoll commented on Mar 3, 2025

River-Szasz commented on Mar 22, 2025

elliette commented on Mar 24, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions