diff --git a/src/ui/layouts/conversations.rs b/src/ui/layouts/conversations.rs index 80cb846..ee9c37d 100644 --- a/src/ui/layouts/conversations.rs +++ b/src/ui/layouts/conversations.rs @@ -210,22 +210,7 @@ fn LayoutBig() -> Element { } pub fn Conversations() -> Element { - let mut view_size = use_signal(|| None::<(f64, f64)>); - - // TODO: Make the layout reactive (on window resize) - let layout = { - move || { - if let Some((width, height)) = view_size.read().as_ref() { - let component_width = height * WIDGET_HEIGHT_RATIO * ASPECT_RATIO; - let breakpoint_width = component_width * 2_f64; - - if *width >= breakpoint_width { - return rsx! { LayoutBig {} }; - } - } - rsx! {LayoutSmall {}} - } - }(); + let mut layout = use_signal(|| None::); rsx! { style { {STYLE_SHEET} }, @@ -236,14 +221,22 @@ pub fn Conversations() -> Element { div { class: ClassName::CONVERSATIONS_VIEW, - onmounted: move |cx| { - async move { - let data = cx.data(); - if let Ok(client_rect) = data.get_client_rect().await { - view_size.set(Some((client_rect.size.width, client_rect.size.height))); + onresized: move |cx| { + let data = cx.data(); + let mut use_big_layout = false; + + if let Ok(size) = data.get_border_box_size() { + if let Some(size) = size.first() { + // Use LayoutBig if the layout can contain 2 panels side by side + let component_width = size.height * WIDGET_HEIGHT_RATIO * ASPECT_RATIO; + let breakpoint_width = component_width * 2_f64; + use_big_layout = size.width > breakpoint_width; } } + + layout.set(rsx! { if use_big_layout { LayoutBig {} } else { LayoutSmall {} }}); + }, {layout}