make sure long project titles don't overlap other controls in the IDE

HISTORY.md

@@ -35,6 +35,7 @@
     * fixed editing cells in multi-page list watchers
     * recursive calls to "broadcast and wait" execute smoothly again
     * expanding a collapsed comment or clicking on it now brings it to the front
+    * long project titles no longer overlap other buttons in the control bar
 * **Translation Updates:**
     * New Hebrew translation
     * Ukranian

snap.html

@@ -10,7 +10,7 @@
         <script src="src/blocks.js?version=2020-06-24"></script>
         <script src="src/threads.js?version=2020-06-27"></script>
         <script src="src/objects.js?version=2020-06-26"></script>
-        <script src="src/gui.js?version=2020-06-24"></script>
+        <script src="src/gui.js?version=2020-06-28"></script>
         <script src="src/paint.js?version=2020-05-17"></script>
         <script src="src/lists.js?version=2020-05-18"></script>
         <script src="src/byob.js?version=2020-06-08"></script>

src/gui.js

@@ -78,7 +78,7 @@ Animation, BoxMorph, BlockEditorMorph, BlockDialogMorph, Note*/
 
 // Global stuff ////////////////////////////////////////////////////////
 
-modules.gui = '2020-June-24';
+modules.gui = '2020-June-28';
 
 // Declarations
 
@@ -1076,7 +1076,8 @@ IDE_Morph.prototype.createControlBar = function () {
 
     this.controlBar.updateLabel = function () {
         var suffix = myself.world().isDevMode ?
-                ' - ' + localize('development mode') : '';
+                ' - ' + localize('development mode') : '',
+            txt;
 
         if (this.label) {
             this.label.destroy();
@@ -1084,8 +1085,7 @@ IDE_Morph.prototype.createControlBar = function () {
         if (myself.isAppMode) {
             return;
         }
-
-        this.label = new StringMorph(
+        txt = new StringMorph(
             (myself.projectName || localize('untitled')) + suffix,
             14,
             'sans-serif',
@@ -1095,11 +1095,22 @@ IDE_Morph.prototype.createControlBar = function () {
             MorphicPreferences.isFlat ? null : new Point(2, 1),
             myself.frameColor.darker(myself.buttonContrast)
         );
-        this.label.color = myself.buttonLabelColor;
-        this.label.fixLayout();
-        this.add(this.label);
+        txt.color = myself.buttonLabelColor;
+
+        this.label = new FrameMorph();
+        this.label.acceptsDrops = false;
+        this.label.alpha = 0;
+        txt.setPosition(this.label.position());
+        this.label.add(txt);
+        this.label.setExtent(
+            new Point(
+                steppingButton.left() - settingsButton.right() - padding * 2,
+                txt.height()
+            )
+        );
         this.label.setCenter(this.center());
         this.label.setLeft(this.settingsButton.right() + padding);
+        this.add(this.label);
     };
 };