One example of many similar alignment problems involving a partially occluded text label and its adjacent input field

[Shaping]

Pharo version: 10 64-bit (stable)
OS: Windows 10 Pro

I am assuming, perhaps incorrectly, that Spec2 was created to solve such mundane formatting problems automatically on font change. Here, I suppose a series of columns may be needed to organize separately, left-to-right, the list box, the text labels, and the input fields. Then autosizing of those columns could occur automatically, for example, in the labels column, by scanning contents, checking text-sizes in pixels, and adjusting the width of the containing column accordingly.

Perhaps someone who knows how to use Spec2 can comment on exactly how this can be done (and why it hasn't already been done).

Here is a second example from Settings (it goes on and on...):

Note the many truncated labels on the left. This was caused by changing the font size from small to medium, and forcing everywhere the same default font, Fira Code in this case.

[Shaping]

I am trying to port to Pharo (for about 16 years). I want to do that now. The problem above practically prevents the port. Is the problem above fixed yet?

[estebanlm]

You cannot expect a framework to do magic, and if you assign a fixed width to your presenter (as is the case you are seeing in iceberg), you cannot hope the framework to figure out you want to expand that width (which is fixed) when you change your font.
If you take this example:

presenter := SpPresenter new.
presenter layout: (SpBoxLayout newTopToBottom
	vAlignStart;
	spacing: 5;
	add: (SpBoxLayout newLeftToRight 
		spacing: 5;
		add: 'Label 1' expand: false;
		add: presenter newTextInput;
		yourself);
	add: (SpBoxLayout newLeftToRight 
		spacing: 5;
		add: 'Label 2' expand: false;
		add: presenter newTextInput;
		yourself);
	add: (SpBoxLayout newLeftToRight 
		spacing: 5;
		add: 'Label 3' expand: false;
		add: presenter newTextInput;
		yourself);
	yourself).
	
presenter open.

you will have this:

but if you later do something like this:

app := SpApplication new.
app addStyleSheetFromString: '.application [ 
	.otherFont [
		Font { #name: EnvironmentFont(#code), #size: 14 } ] ]'.
presenter := SpPresenter newApplication: app.

presenter layout: (SpBoxLayout newTopToBottom
	vAlignStart;
	spacing: 5;
	add: (SpBoxLayout newLeftToRight 
		spacing: 5;
		add: (presenter newLabel label: 'Label 1'; addStyle: 'otherFont')  
			expand: false;
		add: presenter newTextInput;
		yourself);
	add: (SpBoxLayout newLeftToRight 
		spacing: 5;
		add: 'Label 2' expand: false;
		add: presenter newTextInput;
		yourself);
	add: (SpBoxLayout newLeftToRight 
		spacing: 5;
		add: 'Label 3' expand: false;
		add: presenter newTextInput;
		yourself);
	yourself).
	
presenter open.

you will have this result:

which is as expected.
The problem you are seeing is because the designer of the iceberg component (me) did not use an SpGridLayout to make the form but it used SpBoxLayout alternating vertical and horizontal alignments and fixed widths to simulate what the grid layout should do. And the reason why it was like that is because the grid layout did not exist when that component was made, there was just the box layout (and the reason of that is historical, old spec1 had just a single layout builder that was working more or less -but a lot worst- than the box layout).
Coincidentally, I am now working on improving the UI of iceberg and that's one of the things I will fix.

But the settings browser is another problem: is not made in Spec2 and is not migrated yet.
And yes, you will find a lot of this problems until we fix them ;)

[estebanlm]

A final note, note that if you use the right layout to do the job, things look as expected:

app := SpApplication new.
app addStyleSheetFromString: '.application [ 
	.otherFont [
		Font { #name: EnvironmentFont(#code), #size: 14 } ] ]'.
presenter := SpPresenter newApplication: app.

presenter layout: (SpGridLayout new 
	beColumnNotHomogeneous;
	column: 2 expand: true;
	build: [ :builder | builder
		add: (presenter newLabel label: 'Label 1'; addStyle: 'otherFont'); 
		add: presenter newTextInput;
		nextRow;
		add: 'Label 2'; 
		add: presenter newTextInput;
		nextRow;
		add: 'Label 3';
		add: presenter newTextInput ];
	yourself).
	
presenter open.

[astares]

I am trying to port to Pharo (for about 16 years). I want to do that now. The problem above practically prevents the port. Is the problem above fixed yet?

@Shaping
Really strange!

You want to have this right now? All is urgent and all needs to be perfect right now?

Yes, sometimes I'm impatient too - but I help and contribute since the days we forked Pharo in 2008. Others do the same and invest a lot of their time.

May I ask how many contributions did you make in these 16 years to move Pharo itself forward? Your profile does not look like you contribute a lot - there is not even a single public repository.

Remember: Pharo is an open source project and you can only expect things to work when there are people available who can spend their (normally free) time to do often boring work. You can help fixing it and moving it forward.

So it would be better to join and help, than just demand the changes or request something. If you do not have the knowledge (yet) or have no time available you can also put money on the table and join Pharo Association or Pharo Consortium to get things done so engineering time can get funded. You can also help to review or improve documentation, so we can grow community and put work onto more shoulders.

And yes: we all wish Pharo would be perfect right now. But it takes time to move on and improve. But if you dig deeper you will see that certain steps are hard but necessary (like the move from Spec1 to Spec2) and really change the game over time.

Thanks @estebanlm for the examples. Very helpful.

[Ducasse]

Thanks @esteban. We should harvest these examples in the FAQ.
Thanks @astares for your support!

[Ducasse]

I created
pharo-spec/Spec-QA#2