fix(GUI): fix some widget alignments and font scaling issues

[Lyrth]

Description

Was supposed to only fix the watches tab, but I guess other parts of the GUI needed some tiny bits of attention too.

Fixes general alignment issues in the Console, Live View, and Watches tabs.

• Removed the weird gap underneath the Console log output, seems that it used to be meant for something else, but for now should probably fill that gap.
• Fixed the bottom panel of the LiveView splitter panels getting cut and extending beyond the window (seen with font scaling >= 1.0). I think one time I wondered if I'm missing a property entry because it might be hidden away outside the window.
  • The bottom of the pane appears at around font scaling <= 0.7-ish though, so the spacing under the pane seem to vary depending on scaling. Fixed by using ImGui::GetContentRegionAvail instead of GetContentRegionMaxAbs, works with scaling.
• Made the bottom and right borders of the primary panes in Console, Live View, and Watches tab have the same distance from the window border. Tiny detail, but why not. Also works fine with scaling, although should this distance also scale with GUI scaling? Probably sounds too complicated (will also need to deal with other spacings, like between widgets).

Changes specific to the Live View tab

• Fixed the Copy Search Result button's alignment according to scaling. Used to go beyond the window for scaling > 1, and leaves some padding for scaling < 1. This requires a bit of text duplication though (not ImGui ID), so will need to change the string in two places if it needs to be edited (a var seems overkill? And putting a string somewhere else than where it's used in feels awkward, especially for immediate-mode layouting).
• Have the splitter panels scale when the window is resized. Now the panel height ratio will be kept; e.g. a 25% top and 75% bottom Live View layout will remain that way no matter the window height, unless you bring the window down to a very short size - each panel is limited to some minimum height (from ImGui::GetFrameHeight), so it'll just expand as 50%/50% when bringing the window back to normal size. Probably also fixes the times I get extremely thin panels, and the splitter going beyond the unreachable.

Changes specific to the Watches tab

• Put a space between the tab title's icon and name.
• Remove the table's ImGuiTableFlags_NoPadOuterX flag because it makes widgets touch the table borders.
• Controls column width fixed, also works with scaling.
• Put "Save" as the heading for the rightmost column (it was confusing what the checkbox is for at first), also width fixed.
• Replaced the watch history show/hide button with an ImGui::Selectable, as it's much simpler to use (it's a struggle to align text in a tiny button). Also used font icons for + and -.

_{my buton tex no senter :(}

• History multiline text box is now ImGui::GetTextLineHeight times 10 lines high to account for font scaling, instead of a fixed 200px.

Fixes #420

Note

These changes were tested on Windows 10, 100% system DPI scaling, default title bar height of 31. (Why the latter matters, I'll elaborate later at the bottom).
Probably need to check if behavior changes on Windows 11 or other environments with a different window manager (Linux?), although I don't currently have access to either.

Type of change

• Bug fix (non-breaking change which fixes an issue)

How has this been tested?

Have GUI console enabled, and check the Console, Live View, and Watches tabs. Add two watches from any random properties. Tests done on font scale factors 2.0, 1.0, 0.4.

Checklist

• I have performed a self-review of my own code.
• I have commented my code, particularly in hard-to-understand areas.
• I have made corresponding changes to the documentation.
• I have added the necessary description of this PR to the changelog, and I have followed the same format as other entries.
• Any dependent changes have been merged and published in downstream modules.

Screenshots

Before/After

0.4 scale

1.0 scale

2.0 scale

Screen recording of Watches tab and Live View splitter resizing.

Warning: some flashing.

lyr_080324_J3tlcaHSxh.mp4

Notes

What do the numbers mean?

You'll often find 31 used throughout the sizes. This is Windows 10's default native title bar height (for me, at least).

For some reason ImGui does not reduce its own viewport height to compensate for the native title bar. So for example my entire window's height is 793px, border to border. The ImGui viewport height (inside the window, excluding the border and title bar) will still be 793px high, but the actual visible area is only 793px - 31px = 762px, as if the entire ImGui viewport is shifted down and the bottom 31 pixels get hidden beyond the window border.

As for the numbers,

• TextEditor, watch_render_frame
  • -16.0f = -8 left window margin + -8 right window margin
  • -31.0f + -8.0f = -31 title bar offset + -8 bottom window margin
• LiveView_InfoPanel, ImGui_Splitter, LiveView_TreeView: -16.0f = -8 left window margin + -8 right window margin
• ##Search by name via ImGui::PushItemWidth
  • 8.0f = spacing between text box on the left and the button on the right
  • 16.0f = 8 left window margin + 8 right window margin
  • FramePadding.x * 2.0f = button inside padding, left and right
  • ImGui::CalcTextSize = text width
• split_pane_height
  • ImGui::GetContentRegionAvail().y = remaining space from current pos to bottom of ImGui viewport (beyond the window)
  • -31.0f + -8.0f = -31 title bar offset + -8 bottom window margin
  • -4.0f = height of splitter bar
• Controls column
  • ImGui::GetFrameHeight * 3.0f = three square controls
  • 4.0f = 2.0f px spacers between controls, x2
• Save column: ImGui::GetFrameHeight = one square control
• Each ##history textbox
  • -2.0f = right margin from column right edge
  • ImGui::GetTextLineHeight() * 10.0f 10 text lines + ImGui::GetStyle().FramePadding.y * 2.0f top and bottom padding

Note

Currently, the pull requests makes an assumption that the title bar-caused offset will always be 31. On the unfortunate case that the title bar is seen as less than 31px high, or even zero (on Linux maybe), the most severe effect should only be padding appearing on the bottom. This is only my assumption though, I likely don't know of edge cases where ImGui behaves in a weirder way regarding this in more specific environments.

_^p.s.

_{Pardon the overly detailed post for this small PR. Was bored and felt like doing a semi-technical document lol}

[aoqia194]

I really hope this addresses the issue with watches and how most of the watches table is cut off. If it does then this is so poggers and if not I can include a screenshot example.

[Buckminsterfullerene02]

Need to test myself but this is indeed poggers, such as the properties view in live view section being cut off at the bottom, that was already really annoying.

[UE4SS]

This looks good with Proton on Linux.
I don't feel like merging this with the Linux PR to see if it looks good natively.

[Buckminsterfullerene02]

Works great!