[feat] Resize the Properties panel

[drfarrell]

Allow the user to resize the right Properties panel to a maximum width no greater than 1/3 of the full app window.

This is pretty much exactly what #164 was.

[AkshatSharma5]

/assign Also, can you please clarify the issue with a screenshot or something similar please.

[drfarrell]

Sure thing! Assigned it to you.

Here you can see the resizing works on the left panel but not the right one. That's what this issue is for.

[drfarrell]

Hey @AkshatSharma5 how's it going? Need any help?

[vijayksingh]

hey @drfarrell it doesn't look like @AkshatSharma5 isn't working on this atm, can i assign it to myself and work on this ?

[Kitenite]

@vijayksingh , go for it!

[vijayksingh]

@Kitenite have one question the implementation has been changed as mentioned in #164 There is a new ResizablePanel component which has been introduced but this component has left side alignment hardcoded.

I don't think this should be the responsibility of this component and would like to move the side as prop outside of this component.

What do you say ?

  <div
            className={clsx('absolute top-10 left-0 w-60 min-w-60 max-w-96')}
            ref={panelRef}
            style={{ width: `${panelWidth}px` }}
            id="layer-tab-id"
        >
            {children}
            <div
                className="top-0 h-full w-2 absolute right-0 cursor-ew-resize z-50 flex items-center justify-center"
                onMouseDown={startResize}
            />
        </div>

[Kitenite]

Hey @vijayksingh I agree, We can expose the side as a side: "left" | "right" property such that it can be reused for both panels. This was the intention for ResizablePanel to be.