other: clean up help text spacing + help text dialog sizing (#1865)

* other: clean up help text spacing + help text dialog sizing

* use 'safer' saturating, I think it gets optimized out...?

* semicolon + typo

src/canvas.rs

@@ -11,7 +11,7 @@ mod widgets;
 use tui::{
     Frame, Terminal,
     backend::Backend,
-    layout::{Constraint, Direction, Layout, Rect},
+    layout::{Constraint, Direction, Flex, Layout, Rect},
     text::Span,
     widgets::Paragraph,
 };
@@ -122,35 +122,61 @@ impl Painter {
             if app_state.help_dialog_state.is_showing_help {
                 let gen_help_len = GENERAL_HELP_TEXT.len() as u16 + 3;
                 let border_len = terminal_height.saturating_sub(gen_help_len) / 2;
-                let vertical_dialog_chunk = Layout::default()
+                let [_, vertical_dialog_chunk, _] = Layout::default()
                     .direction(Direction::Vertical)
                     .constraints([
                         Constraint::Length(border_len),
                         Constraint::Length(gen_help_len),
                         Constraint::Length(border_len),
                     ])
-                    .split(terminal_size);
+                    .areas(terminal_size);
 
-                let middle_dialog_chunk = Layout::default()
+                // An approximate proxy for the max line length to use.
+                const MAX_TEXT_LENGTH: u16 = const {
+                    let mut max = 0;
+
+                    let mut i = 0;
+                    while i < HELP_TEXT.len() {
+                        let section = HELP_TEXT[i];
+                        let mut j = 0;
+                        while j < section.len() {
+                            let line = section[j];
+                            if line.len() > max {
+                                max = line.len();
+                            }
+
+                            j += 1;
+                        }
+
+                        i += 1;
+                    }
+
+                    max as u16
+                };
+
+                let dialog_width = vertical_dialog_chunk.width;
+                let [middle_dialog_chunk] = if dialog_width < MAX_TEXT_LENGTH {
+                    Layout::default()
                         .direction(Direction::Horizontal)
-                    .constraints(if terminal_width < 100 {
+                        .constraints([Constraint::Percentage(100)])
-                        // TODO: [REFACTOR] The point we start changing size at currently hard-coded
+                        .areas(vertical_dialog_chunk)
-                        // in.
-                        [
-                            Constraint::Percentage(0),
-                            Constraint::Percentage(100),
-                            Constraint::Percentage(0),
-                        ]
                 } else {
-                        [
+                    // We calculate this so that the margins never have to split an odd number.
-                            Constraint::Percentage(15),
+                    let len = if (dialog_width.saturating_sub(MAX_TEXT_LENGTH)) % 2 == 0 {
-                            Constraint::Percentage(70),
+                        MAX_TEXT_LENGTH
-                            Constraint::Percentage(15),
+                    } else {
-                        ]
+                        // It can only be 1 if the difference is greater than 1, so this is fine.
-                    })
+                        MAX_TEXT_LENGTH + 1
-                    .split(vertical_dialog_chunk[1]);
+                    };
 
-                self.draw_help_dialog(f, app_state, middle_dialog_chunk[1]);
+                    Layout::default()
+                        .direction(Direction::Horizontal)
+                        .constraints([Constraint::Length(len)])
+                        .flex(Flex::SpaceAround)
+                        .areas(vertical_dialog_chunk)
+                };
+
+                self.draw_help_dialog(f, app_state, middle_dialog_chunk);
             } else if app_state.process_kill_dialog.is_open() {
                 // FIXME: For width, just limit to a max size or full width. For height, not sure. Maybe pass max and let child handle?
                 let horizontal_padding = if terminal_width < 100 { 0 } else { 5 };

src/constants.rs

@@ -25,24 +25,20 @@ const HELP_CONTENTS_TEXT: [&str; 10] = [
 
 // TODO [Help]: Search in help?
 // TODO [Help]: Move to using tables for easier formatting?
-pub(crate) const GENERAL_HELP_TEXT: [&str; 32] = [
+pub(crate) const GENERAL_HELP_TEXT: [&str; 28] = [
     "1 - General",
     "q, Ctrl-c            Quit",
     "Esc                  Close dialog windows, search, widgets, or exit expanded mode",
     "Ctrl-r               Reset display and any collected data",
     "f                    Freeze/unfreeze updating with new data",
     "Ctrl-Left,           ",
-    "Shift-Left,      Move widget selection left",
+    "Shift-Left, H, A     Move widget selection left",
-    "H, A             ",
     "Ctrl-Right,          ",
-    "Shift-Right,     Move widget selection right",
+    "Shift-Right, L, D    Move widget selection right",
-    "L, D             ",
     "Ctrl-Up,             ",
-    "Shift-Up,        Move widget selection up",
+    "Shift-Up, K, W       Move widget selection up",
-    "K, W             ",
     "Ctrl-Down,           ",
-    "Shift-Down,      Move widget selection down",
+    "Shift-Down, J, S     Move widget selection down",
-    "J, S             ",
     "Left, h              Move left within widget",
     "Down, j              Move down within widget",
     "Up, k                Move up within widget",
@@ -62,7 +58,7 @@ pub(crate) const GENERAL_HELP_TEXT: [&str; 32] = [
 
 const CPU_HELP_TEXT: [&str; 2] = [
     "2 - CPU widget",
-    "Mouse scroll     Scrolling over an CPU core/average shows only that entry on the chart",
+    "Mouse scroll         Scrolling over a CPU core/average shows only that entry on the chart",
 ];
 
 const PROCESS_HELP_TEXT: [&str; 20] = [