onboarding: Ensure scrollbar is shown at the proper edge (#54392)

galuis116 and Danilo Leal created 3 weeks ago

Self-Review Checklist:

- [x] I've reviewed my own diff for quality, security, and reliability
- [x] Unsafe blocks (if any) have justifying comments
- [x] The content is consistent with the [UI/UX
checklist](https://github.com/zed-industries/zed/blob/main/CONTRIBUTING.md#uiux-checklist)
- [x] Tests cover the new/changed behavior
- [x] Performance impact has been considered and is acceptable

Closes #54391

Release Notes:

- Fixed onboarding UI scrollbar placement so the vertical scrollbar now
appears at the right edge of the onboarding pane, while keeping
onboarding content centered.

---------

Co-authored-by: Danilo Leal <[e-mail]>

Change summary

crates/onboarding/src/onboarding.rs | 20 +++++++++-----------
1 file changed, 9 insertions(+), 11 deletions(-)

Detailed changes

crates/onboarding/src/onboarding.rs

@@ -288,21 +288,20 @@ impl Render for Onboarding {
                 window.focus_prev(cx);
                 cx.notify();
             }))
+            .vertical_scrollbar_for(&self.scroll_handle, window, cx)
             .child(
                 div()
-                    .max_w(Rems(48.0))
+                    .id("page-content")
                     .size_full()
-                    .mx_auto()
+                    .overflow_y_scroll()
                     .child(
                         v_flex()
-                            .id("page-content")
-                            .m_auto()
-                            .p_12()
-                            .size_full()
-                            .max_w_full()
                             .min_w_0()
+                            .max_w(rems_from_px(780.))
+                            .w_full()
+                            .mx_auto()
+                            .p_12()
                             .gap_6()
-                            .overflow_y_scroll()
                             .child(
                                 h_flex()
                                     .w_full()
@@ -342,10 +341,9 @@ impl Render for Onboarding {
                                     }),
                             )
                             .child(Divider::horizontal().color(ui::DividerColor::BorderVariant))
-                            .child(self.render_page(cx))
-                            .track_scroll(&self.scroll_handle),
+                            .child(self.render_page(cx)),
                     )
-                    .vertical_scrollbar_for(&self.scroll_handle, window, cx),
+                    .track_scroll(&self.scroll_handle),
             )
     }
 }