component resizable issue

[zhangsan-feng]

How to keep the width of the left sidebar unchanged when maximizing or minimizing the window like Zed
for example

This GIF is a code example from the document. (IDE Layout)
https://longbridge.github.io/gpui-component/docs/components/resizable#import
I found that my code has some zoom in and out issues, and then I checked the documentation and found that there are also such issues. How is zed implementing this?
my code

[huacnlee]

Try to use Dock.

cargo run --example dock

[zhangsan-feng]

https://github.com/zed-industries/zed/blob/main/crates/workspace/src/dock.rs
Is it this one?

[zhangsan-feng]

Try to use Dock.

cargo run --example dock

I saw that gpui can be implemented directly using native methods. I’m not sure if this is a bug in the component.

pub struct GroupAndUserWindow {
    left_panel_width: f32,
    min_width: f32,
    max_width: f32,
}

#[derive(Clone)]
struct PanelResizeHandle;

impl Render for PanelResizeHandle {
    fn render(&mut self,window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
        div()
    }
}

impl GroupAndUserWindow {
    pub fn new(_cx: &mut Context<Self>) -> Self {
        Self {
            left_panel_width: 250.0,
            min_width: 150.0,
            max_width: 600.0,

        }
    }
    fn handle_resize(&mut self, event: &DragMoveEvent<PanelResizeHandle>, cx: &mut Context<Self>) {
        let new_width = event.event.position.x;
        self.left_panel_width = f32::from(new_width.clamp(px(self.min_width), px(self.max_width)));
        cx.notify();
    }
}
impl Render for GroupAndUserWindow {

    fn render(&mut self,  window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
        let window_width = window.bounds().size.width;
      h_flex()
            .size_full()
            .child(
                div()
                    .w(px(self.left_panel_width))
                    .h_full()
                    .border_r_1()
                    .child(format!("宽度: {:.0}px", self.left_panel_width))
            )
            .child(
                div()
                    .id("resize_handle")
                    .w(px(4.0))
                    .bg(rgb(0x333333))
                    .h_full()

                    .cursor_col_resize()
                    .active(|s| s.bg(rgb(0x007acc)))
                    .on_drag(PanelResizeHandle, |this, size, window, app| {
                        app.new(|_| this.clone())
                    })
                    .on_drag_move(cx.listener(|this, event, window, cx|{
                        this.handle_resize(event, cx);
                    }))
            )
            .child(

                div()
                    .flex_grow()
                    .h_full()
                    .p_4()
                    .child(format!("主编辑区域 width {}",window_width.as_f32() - self.left_panel_width))
            )
    }
}