sublime_text icon indicating copy to clipboard operation
sublime_text copied to clipboard

Find panel: different height of UI elements

Open ratijas opened this issue 4 years ago • 2 comments

Problem description

UI elements in the Find panel have different height, and it's bugging me.

  • Text panel is the tallest, even at its minimum;
  • Buttons on the left are the shortest;
  • Buttons of the right are of the average height.

A picture is worth a thousand words, so here it goes:

ST3 - height of the Find panel

ST3 - height of the Find panel

Let's zoom way in:

ST3 - height of the Find panel - zoom

Preferred solution

Align buttons, make them all the same height. Set their hight to the text field's minimal height.

Alternatives

None

Additional Information (optional)

My setup might be relevant. Below is my font info and preferences.

  • Version 3.2.2
  • Build 3211

Note: this is a stripped version of my Preferences.sublime-settings. I only left what seems relevant.

{
	"caret_extra_bottom": 0,
	"caret_extra_top": 0,
	"caret_extra_width": 2,
	"caret_style": "smooth",
	"color_scheme": "Packages/Color Scheme - Default/Mariana.sublime-color-scheme",
	"copy_with_empty_selection": false,
	"dpi_scale": 1.0,
	"font_face": "Fira Code",
	"font_size": 12,
	"ignored_packages":
	[
		"Vintage"
	],
	"move_to_limit_on_up_down": true,
	"theme": "Adaptive.sublime-theme",
	"ui_scale": 1.0,
}

ratijas avatar Oct 17 '20 12:10 ratijas

Some more additional info

Height of the Find/Where/Replace text fields does not depend on the current theme or color scheme, but it depends on current font_face and font_size preferences.

For example, the diff is smaller when using "Andale Mono"/12. But if you make it as large as "Hack"/26, then the text field would be almost twice as tall as those buttons around it.

On the other hand, even with font as small as 9 units, the line height is less than required and the text is padded with an empty space (i.e. slightly stretched vertically), it is still 1-2px taller than it should be:

Small font - tall text field

So, my new suggested solution is this:

Preferred solution №2

When minimal text field's height (which is ultimately related to the current font's line height) is about the size of the buttons (which depends on the ui_scale, for what is worth), then snap those buttons' height to the text field height.

Let's say, about 10dip (device-independent pixels) would be good enough. Whenever text field's height is no more than 10dip away from the buttons' default height — just stretch the buttons and vertical-venter align their content.

ratijas avatar Oct 17 '20 19:10 ratijas

In Sublime Text 4, I can customize theme to work around on this. Example:

{
	"variables":
	{

	},
	"rules":
	[
		{
			"class": "text_line_control",
			"content_margin": 2,
		}
	],
}
Screen Shot 2022-08-10 at 10 02 17

trinhanhngoc avatar Aug 10 '22 03:08 trinhanhngoc