Fix EditorTitleBar excessive width by WhalesState · Pull Request #109396 · godotengine/godot

WhalesState · 2025-08-07T15:10:50Z

Screencast.From.2025-08-07.20-20-24.mp4

Summary of Changes:

EditorScrollBox Extracted for Reuse:
- The EditorScrollBox (introduced in Fix BottomPanel excessive width. #97878) has been extracted into its own class to allow reuse across the editor. This helps address excessive width issues.
Improved Layout in EditorTitleBar:
- Refactored the layout using three expanding containers instead of relying on spacer size calculations. This simplifies alignment and makes future layout changes easier:
  [ left_hb ] [ center_hb ] [ right_hb ]
New Minimum Editor Size:
- The minimum size of the editor window is now set to 640×480. This change required adjusting many UI elements to fit within the new constraints. (Most of those adjustments are already done locally).
Selective Use of EditorScrollBox:
- The new EditorScrollBox has been applied to the main menus and screen buttons, but not to right_hb, which includes the EditorRunBar and plugin-specific controls.
  Note: it’s currently difficult to keep the main screen buttons centered when many plugins are added to the right container.

Requires testing on Android Editor to confirm compatibility and layout integrity on smaller screens.

Note: The change to the Renderer Button shown in the demo video is not included in this PR. That change is part of Use renderer icons instead of text to reduce the topbar width. #109357, and is shown in the video only to demonstrate the final result when both PRs are merged.
Note: The Pause and Stop button changes shown in the video have been removed from this PR. They will be moved to a separate PR if needed.

KoBeWi · 2025-08-07T18:02:12Z

For the main screen buttons, I was wondering if we shouldn't change them to TabBar/TabContainer, which would eventually allow to use main screen as a dock slot. Related: #106164

arkology · 2025-08-07T18:27:49Z

For main screen buttons (2D, 3D, ect.) this is 100% improvement (existing buttons will not break layout at editor minimum size and buttons added by plugins will not make it worse).
Other changes I think require more discussion.
In my opinion the end goal of all this changes (including #102301) is to fit editor on a quarter (at least) of the screen (fullhd monitor). For android - being able to use editor in portrait mode.

WhalesState · 2025-08-07T18:49:32Z

For the main screen buttons, I was wondering if we shouldn't change them to TabBar/TabContainer, which would eventually allow to use main screen as a dock slot. Related: #106164

I already have an old change that allows reparenting the TabBar of the TabContainer which may help with this, The only issue is that all the Main Screen plugins have a very large width due to their top bar minimum width which will make it harder to align two of them horizontally.

I already have some changes locally that can reduce their width and was thinking about reusing the new EditorScrollBar container introduced in this PR to move the select buttons to the left of the 2D/3D Editors like how they are done in Blender, I remember i have seen a feature request asking for that too.

WhalesState · 2025-08-07T19:20:39Z

For main screen buttons (2D, 3D, ect.) this is 100% improvement (existing buttons will not break layout at editor minimum size and buttons added by plugins will not make it worse). Other changes I think require more discussion. In my opinion the end goal of all this changes (including #102301) is to fit editor on a quarter (at least) of the screen (fullhd monitor). For android - being able to use editor in portrait mode.

Yes the main goal is to support smaller screens for the editor to be able to increase the editor scale or tile the editor window without issues, and the only issue we have now are bottom panels and the main screen editor plugins that are preventing that, if we follow the same approach here Improve and reduce animation player/track editor width. #109361 by having a HFlowContainer with two children LeftHBoxContainer and RightHBoxContainer we can eliminate most of those issues in a clean way, and we will be left with the EditorTitleBar preventing that which this PR fixes and it can go with only reusing the new Container for main screen buttons only, and also we can optionally allow disabling the button's text in the EditorSettings like this.

bruvzg · 2025-08-07T19:51:15Z

This pretty much breaks editor title on macOS.

Window name is no longer visible.
Large portions of the title are not responding to drag.
Tabs seems off center.
Resizing is not quite uniform.

Screen.Recording.2025-08-07.at.22.44.00.mov

Title bar element alignment before the change, window name and all empty areas are draggable:

bruvzg · 2025-08-07T20:32:50Z

Some notes:

There's set_center_control method in the EditorTitleBar used with main_editor_button_hb to force center it regardless of other controls. Current implementation require a direct child of EditorTitleBar as argument, so it won't work when it wrapped in the new container, and it also depends on main_editor_button_hb being fixed size to work. Forced centering supposed to work only if there's plenty of free space on both sides, so it probably can be adjusted.

Window title can be added to the menu scroll container, since only one of two can be visible at the same time (menu bar still need to be in the scene tree, but will be zero size and invisible).

Window drag can be fixed by setting PASS mouse filter on all new containers.

WhalesState · 2025-08-07T20:51:36Z

Window name is no longer visible.

I have applied a fix, please test again to confirm it.

Large portions of the title are not responding to drag.

I have applied a fix, some containers was using mouse filter stop and changed them to pass, please confirm it.

Tabs seems off center.

This is a result of reducing the editor size to 640x480, happens on all platforms because the main screen and bottom panels plugins still doesn't support the new size efficiently.

Resizing is not quite uniform.

I gave the main screen buttons a higher stretch ratio on MACOS since there's no longer a menu. please check with EditorDebugger plugin for the best stretch ratio that fits MACOS.

WhalesState · 2025-08-07T20:53:41Z

Some notes:

There's set_center_control method in the EditorTitleBar used with main_editor_button_hb to force center it regardless of other controls. Current implementation require a direct child of EditorTitleBar as argument, so it won't work when it wrapped in the new container, and it also depends on main_editor_button_hb being fixed size to work. Forced centering supposed to work only if there's plenty of free space on both sides, so it probably can be adjusted.

Window title can be added to the menu scroll container, since only one of two can be visible at the same time (menu bar still need to be in the scene tree, but will be zero size and invisible).

Window drag can be fixed by setting PASS mouse filter on all new containers.

We may not need this anymore after this PR since it doesn't require the old ways of centering the main screen buttons and it's managed automatically by only using 3 containers and their expanding methods, the MainScreenButtons now have the higher expand ratio and is still affected by the EditorRunBar and the Renderer Button which are all part of the right hbox now.

bruvzg · 2025-08-07T20:59:36Z

It's not always 3 controls, there are extra spacers (left/right_menu_spacer) added on macOS to account for window buttons, these spacers are always different width, so this will introduce misalignment.

I'll retest it tomorrow.

bruvzg · 2025-08-07T21:03:11Z

I guess these extra spacers can be replaced by extra margins on side containers, these only exist to reserve empty space, actual window buttons are native elements and controlled/drawn by OS.

WhalesState · 2025-08-07T21:11:54Z

It's not always 3 controls, there are extra spacers (left/right_menu_spacer) added on macOS to account for window buttons, these spacers are always different width, so this will introduce misalignment.

Removed the right spacer since it's useless now after this change and moved the left spacer into the left HBox container is an internal child since it's only used for MACOS to show the title label, so they are now only 3 children for the EditorTitleBar.

Note: we also can add the label directly to the left hbox and we remove the left spacer too.

The new EditorScrollBox can't work with spacers since it doesn't have a minimum size and it needs to expand to fill the available space to be functional.

Also for testing i have used Zylan.EditorDebugger plugin to hide the CIE and the game editor top HFlowContainer because they was preventing resizing down the window.

bruvzg · 2025-08-08T04:45:11Z

Removed the right spacer since it's useles

It's not useless, if OS language is right-to-left and Godot language is left-to-right (or vice versa) buttons will be over the right spacer.

bruvzg · 2025-08-08T05:01:33Z

Dragging seems to work.

Title still not visible.

And main tabs still off center, it does not matter if there are a same number of controls on the both sides as long as spacers are different fixed size it will be off:

[  X  -  +  ][    left container    ][   center container   ][    right container   ][ ]
                                           /\                                           
                                         center

WhalesState · 2025-08-08T21:00:00Z

[ X - + ][ left container ][ center container ][ right container ][ ]
/\
center

It's so hard to access a mac and it will be great if you can help me by downloading EditorDebugger from asset store then enabling inspecting elements in the plugin and you inspect the title bar with F12 to be able to change the label or container settings in editor inspector to find a quick fix.

The reason why they are not centered is that they are no longer 3 containers, it should be like this to work on mac similar to other platforms.
[ left container ] [ center container ] [ right container ]
[ [ X - + ] scene-name - Godot ] [ 2D 3D Game Assets ] [ play buttons [ right spacer ] ]

Also for RTL layout i tested it and it works fine in all other platforms.

WhalesState · 2025-08-12T05:46:55Z

+	Button *button = get_left_button();
+	button->set_button_icon(theme_cache.arrow_left);
+	button->set_accessibility_name(TTRC("Scroll Left"));
+	button->set_tooltip_text(TTRC("Scroll Left\nHold Ctrl to scroll to the begin.\nHold Shift to scroll one page."));


On RTL layout it says scroll to the begin instead of end, and to fix this it will result in 4 translated lines instead of just 2, so we can consider replacing both translations to say Hold Ctrl to scroll to the far left and Hold Ctrl to scroll to the far right.

…op bar. Co-authored-by: Pāvels Nadtočajevs <7645683+bruvzg@users.noreply.github.com> Co-authored-by: A Thousand Ships <96648715+AThousandShips@users.noreply.github.com> Co-authored-by: Tomasz Chabora <kobewi4e@gmail.com>

Repiteo · 2025-11-13T23:18:32Z

Needs rebase

kitbdev · 2025-11-14T20:59:58Z

+#endif
 	} else {
+#ifndef MACOS_ENABLED
+		menu_scroll_box = memnew(EditorScrollBox);


I think putting the menu buttons into a Scroll Box is a weird UX, I haven't seen menu buttons be scrollable like this.
It is also inconsistent, since to save space it can already be collapsed to a main menu button with an Editor Setting, there doesn't need to be 2 different ways to allow it to be smaller.

Ideally we would just switch to the collapsed main menu when there isn't enough space.
However I think it would need custom code to detect when it is too small (or something like godotengine/godot-proposals#12397), so this can be changed later in a future PR.

Main screen plugins might eventually get converted to docks, so the top buttons would become a TabBar.

akien-mga · 2025-12-09T14:11:37Z

This hasn't been rebased in a month, so this should probably be salvaged by another contributor.
It's too late to merge for 4.6 but should be mergeable in the 4.7 dev cycle if it's updated.

KoBeWi · 2025-12-09T14:16:13Z

#113051 would effectively replace it if it's merged (like what happened with bottom panel xd).

WhalesState · 2026-03-02T01:30:17Z

This hasn't been rebased in a month, so this should probably be salvaged by another contributor. It's too late to merge for 4.6 but should be mergeable in the 4.7 dev cycle if it's updated.

Sorry for the delay. I can rebase the PR and resolve the conflicts if needed.

But TBH, I actually prefer the dock-able main screens approach over this PR. This change was mainly a workaround to reduce the editor window width, but several other editor plugins would still require proper adjustments to fully support smaller layouts.

So in the long term, the dock-able solution feels cleaner since it doesn't require a new temporary editor class.

#113051 would effectively replace it if it's merged (like what happened with bottom panel xd).

To avoid unnecessary conflicts, it might be better to focus on testing and resolving the Android crash in #113051 instead.

Review is now stale

Repiteo · 2026-06-17T16:40:33Z

Superseded by #113051; thanks for your contribution!

AThousandShips added enhancement topic:editor usability labels Aug 7, 2025

AThousandShips added this to the 4.x milestone Aug 7, 2025

WhalesState mentioned this pull request Aug 7, 2025

Replace editor renderer dropdown with icon next to version button #103042

Closed

1 task

WhalesState force-pushed the editor-scroll-box branch 2 times, most recently from 2801488 to 1fc93ee Compare August 7, 2025 17:28

WhalesState marked this pull request as ready for review August 7, 2025 17:28

WhalesState requested review from a team as code owners August 7, 2025 17:28

WhalesState requested a review from a team August 7, 2025 17:28

WhalesState requested a review from a team as a code owner August 7, 2025 17:28

WhalesState commented Aug 7, 2025

View reviewed changes

Comment thread doc/classes/EditorScrollBox.xml Outdated

WhalesState force-pushed the editor-scroll-box branch from 1fc93ee to 692cbdd Compare August 7, 2025 20:47

WhalesState force-pushed the editor-scroll-box branch from 692cbdd to 5a795c6 Compare August 7, 2025 21:50

WhalesState force-pushed the editor-scroll-box branch 2 times, most recently from ab8f084 to 402ed20 Compare August 12, 2025 05:37

WhalesState commented Aug 12, 2025

View reviewed changes

WhalesState force-pushed the editor-scroll-box branch from 402ed20 to 2226350 Compare August 12, 2025 07:10

WhalesState force-pushed the editor-scroll-box branch from 2226350 to f339fb5 Compare September 30, 2025 07:38

WhalesState force-pushed the editor-scroll-box branch from f339fb5 to c4cb22f Compare September 30, 2025 07:44

arkology mentioned this pull request Oct 20, 2025

Shrinking window can hide some edge controls #102359

Open

kitbdev reviewed Nov 14, 2025

View reviewed changes

syntaxerror247 mentioned this pull request Nov 19, 2025

Android Editor: Adjust script editor size for virtual keyboard #112766

Merged

akien-mga modified the milestones: 4.6, 4.7, 4.x Dec 9, 2025

akien-mga added needs work salvageable labels Dec 9, 2025

Repiteo requested a review from a team as a code owner February 17, 2026 20:10

AdriaandeJongh self-requested a review March 5, 2026 14:30

AdriaandeJongh removed their request for review March 20, 2026 10:22

Repiteo closed this Jun 17, 2026

Repiteo removed this from the 4.x milestone Jun 17, 2026

Repiteo added the archived label Jun 17, 2026

AThousandShips removed the needs work label Jun 17, 2026

Uh oh!

Uh oh!

Conversation

WhalesState commented Aug 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

KoBeWi commented Aug 7, 2025

Uh oh!

arkology commented Aug 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

WhalesState commented Aug 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

WhalesState commented Aug 7, 2025

Uh oh!

Uh oh!

bruvzg commented Aug 7, 2025

Uh oh!

bruvzg commented Aug 7, 2025

Uh oh!

WhalesState commented Aug 7, 2025

Uh oh!

WhalesState commented Aug 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bruvzg commented Aug 7, 2025

Uh oh!

bruvzg commented Aug 7, 2025

Uh oh!

WhalesState commented Aug 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bruvzg commented Aug 8, 2025

Uh oh!

bruvzg commented Aug 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

WhalesState commented Aug 8, 2025

Uh oh!

WhalesState Aug 12, 2025

Choose a reason for hiding this comment

Uh oh!

Repiteo commented Nov 13, 2025

Uh oh!

kitbdev Nov 14, 2025

Choose a reason for hiding this comment

Uh oh!

KoBeWi Nov 14, 2025

Choose a reason for hiding this comment

Uh oh!

akien-mga commented Dec 9, 2025

Uh oh!

KoBeWi commented Dec 9, 2025

Uh oh!

WhalesState commented Mar 2, 2026

Uh oh!

Repiteo commented Jun 17, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

WhalesState commented Aug 7, 2025 •

edited

Loading

arkology commented Aug 7, 2025 •

edited

Loading

WhalesState commented Aug 7, 2025 •

edited

Loading

WhalesState commented Aug 7, 2025 •

edited

Loading

WhalesState commented Aug 7, 2025 •

edited

Loading

bruvzg commented Aug 8, 2025 •

edited

Loading