From fa654c65207ffc025c9d5a21728b0522355aa814 Mon Sep 17 00:00:00 2001 From: Jason Jean Date: Sat, 17 May 2025 10:24:13 -0400 Subject: [PATCH] =?UTF-8?q?fix(core):=20prefer=20vertical=20layout=20categ?= =?UTF-8?q?orically=20if=20there=20are=20less=20tha=E2=80=A6=20(#31221)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit …n 75 characters of width ## Current Behavior Auto layout is always based on an aspect ratio which lead to horizontal layout even when there is very little horizontal space. ## Expected Behavior Auto layout prefers vertical layout with less than 75 characters of width which will allow 50 characters (75 * 2/3) for terminal output. It should be enough to show a URL in most cases: ![image](https://github.com/user-attachments/assets/0804d7ff-02aa-45e1-89f8-bd86b478f88e) ![image](https://github.com/user-attachments/assets/f2f04e3a-c306-4dea-bfca-66052dc28f20) ## Related Issue(s) Fixes # --- .../native/tui/components/layout_manager.rs | 28 ++++++++++++ ...tests__extremely_narrow_screen_layout.snap | 44 +++++++++++++++++++ ...s__visual_tests__narrow_screen_layout.snap | 44 +++++++++++++++++++ ..._tests__slightly_narrow_screen_layout.snap | 44 +++++++++++++++++++ 4 files changed, 160 insertions(+) create mode 100644 packages/nx/src/native/tui/components/snapshots/nx__native__tui__components__layout_manager__tests__visual_tests__extremely_narrow_screen_layout.snap create mode 100644 packages/nx/src/native/tui/components/snapshots/nx__native__tui__components__layout_manager__tests__visual_tests__narrow_screen_layout.snap create mode 100644 packages/nx/src/native/tui/components/snapshots/nx__native__tui__components__layout_manager__tests__visual_tests__slightly_narrow_screen_layout.snap diff --git a/packages/nx/src/native/tui/components/layout_manager.rs b/packages/nx/src/native/tui/components/layout_manager.rs index e228baecc2..60b565a3d6 100644 --- a/packages/nx/src/native/tui/components/layout_manager.rs +++ b/packages/nx/src/native/tui/components/layout_manager.rs @@ -400,6 +400,11 @@ impl LayoutManager { /// - Number of tasks (single task prefers vertical layout) /// - Minimum dimensions requirements fn is_vertical_layout_preferred(&self, terminal_width: u16, terminal_height: u16) -> bool { + // Screen is pretty narrow so always prefer vertical layout + if terminal_width < 75 { + return true; + } + // Calculate aspect ratio (width/height) let aspect_ratio = terminal_width as f32 / terminal_height as f32; @@ -865,6 +870,29 @@ mod tests { insta::assert_snapshot!(terminal.backend()); } + /// Visual test for narrow screen rendering (width < 75) + #[test] + fn test_visualize_narrow_screen_layout() { + // Create layout with auto mode, which should pick vertical layout for narrow screens + let mut layout_manager = LayoutManager::new(5); + layout_manager.set_mode(LayoutMode::Auto); + layout_manager.set_task_list_visibility(TaskListVisibility::Visible); + layout_manager.set_pane_arrangement(PaneArrangement::Single); + layout_manager.set_task_count(5); + + // Test with a narrow screen (width < 75) + let terminal = render_layout(74, 40, &layout_manager); + insta::assert_snapshot!("narrow_screen_layout", terminal.backend()); + + // Also test with extremely narrow screen + let terminal = render_layout(50, 40, &layout_manager); + insta::assert_snapshot!("extremely_narrow_screen_layout", terminal.backend()); + + // Also test with slightly narrow screen + let terminal = render_layout(80, 40, &layout_manager); + insta::assert_snapshot!("slightly_narrow_screen_layout", terminal.backend()); + } + // These tests will run even without the snapshot feature enabled // to verify layout calculations are correct diff --git a/packages/nx/src/native/tui/components/snapshots/nx__native__tui__components__layout_manager__tests__visual_tests__extremely_narrow_screen_layout.snap b/packages/nx/src/native/tui/components/snapshots/nx__native__tui__components__layout_manager__tests__visual_tests__extremely_narrow_screen_layout.snap new file mode 100644 index 0000000000..1ec5bbd5a4 --- /dev/null +++ b/packages/nx/src/native/tui/components/snapshots/nx__native__tui__components__layout_manager__tests__visual_tests__extremely_narrow_screen_layout.snap @@ -0,0 +1,44 @@ +--- +source: packages/nx/src/native/tui/components/layout_manager.rs +expression: terminal.backend() +--- +"┌Task List───────────────────────────────────────┐" +"│ │" +"│ │" +"│ │" +"│ │" +"│ │" +"│ │" +"│ │" +"│ │" +"│ │" +"│ │" +"│ │" +"└────────────────────────────────────────────────┘" +" " +"┌Terminal Pane 1─────────────────────────────────┐" +"│ │" +"│ │" +"│ │" +"│ │" +"│ │" +"│ │" +"│ │" +"│ │" +"│ │" +"│ │" +"│ │" +"│ │" +"│ │" +"│ │" +"│ │" +"│ │" +"│ │" +"│ │" +"│ │" +"│ │" +"│ │" +"│ │" +"│ │" +"│ │" +"└────────────────────────────────────────────────┘" diff --git a/packages/nx/src/native/tui/components/snapshots/nx__native__tui__components__layout_manager__tests__visual_tests__narrow_screen_layout.snap b/packages/nx/src/native/tui/components/snapshots/nx__native__tui__components__layout_manager__tests__visual_tests__narrow_screen_layout.snap new file mode 100644 index 0000000000..5d08f4695a --- /dev/null +++ b/packages/nx/src/native/tui/components/snapshots/nx__native__tui__components__layout_manager__tests__visual_tests__narrow_screen_layout.snap @@ -0,0 +1,44 @@ +--- +source: packages/nx/src/native/tui/components/layout_manager.rs +expression: terminal.backend() +--- +"┌Task List───────────────────────────────────────────────────────────────┐" +"│ │" +"│ │" +"│ │" +"│ │" +"│ │" +"│ │" +"│ │" +"│ │" +"│ │" +"│ │" +"│ │" +"└────────────────────────────────────────────────────────────────────────┘" +" " +"┌Terminal Pane 1─────────────────────────────────────────────────────────┐" +"│ │" +"│ │" +"│ │" +"│ │" +"│ │" +"│ │" +"│ │" +"│ │" +"│ │" +"│ │" +"│ │" +"│ │" +"│ │" +"│ │" +"│ │" +"│ │" +"│ │" +"│ │" +"│ │" +"│ │" +"│ │" +"│ │" +"│ │" +"│ │" +"└────────────────────────────────────────────────────────────────────────┘" diff --git a/packages/nx/src/native/tui/components/snapshots/nx__native__tui__components__layout_manager__tests__visual_tests__slightly_narrow_screen_layout.snap b/packages/nx/src/native/tui/components/snapshots/nx__native__tui__components__layout_manager__tests__visual_tests__slightly_narrow_screen_layout.snap new file mode 100644 index 0000000000..07500b8ca6 --- /dev/null +++ b/packages/nx/src/native/tui/components/snapshots/nx__native__tui__components__layout_manager__tests__visual_tests__slightly_narrow_screen_layout.snap @@ -0,0 +1,44 @@ +--- +source: packages/nx/src/native/tui/components/layout_manager.rs +expression: terminal.backend() +--- +"┌Task List───────────────┐ ┌Terminal Pane 1───────────────────────────────────┐" +"│ │ │ │" +"│ │ │ │" +"│ │ │ │" +"│ │ │ │" +"│ │ │ │" +"│ │ │ │" +"│ │ │ │" +"│ │ │ │" +"│ │ │ │" +"│ │ │ │" +"│ │ │ │" +"│ │ │ │" +"│ │ │ │" +"│ │ │ │" +"│ │ │ │" +"│ │ │ │" +"│ │ │ │" +"│ │ │ │" +"│ │ │ │" +"│ │ │ │" +"│ │ │ │" +"│ │ │ │" +"│ │ │ │" +"│ │ │ │" +"│ │ │ │" +"│ │ │ │" +"│ │ │ │" +"│ │ │ │" +"│ │ │ │" +"│ │ │ │" +"│ │ │ │" +"│ │ │ │" +"│ │ │ │" +"│ │ │ │" +"│ │ │ │" +"│ │ │ │" +"│ │ │ │" +"│ │ │ │" +"└────────────────────────┘ └──────────────────────────────────────────────────┘"