How To Make A resizeing and moveble gui

im making a game where your on a computer and i need help making a movable and resize able ui
like the one in this video i made

i want it to stop at a certain size like in the video where it couldnt go smaller then that
and it couldnt go bigger then a certain size

and how you can only move the app around with the tab at the top

im still new to coding the best i can do was make the moving gui but i couldnt find a way to make the resize mechanism

local dragger = {}; 
local resizer = {};

do
	local mouse = game:GetService("Players").LocalPlayer:GetMouse();
	local inputService = game:GetService('UserInputService');
	local heartbeat = game:GetService("RunService").Heartbeat;
	-- // credits to Ririchi / Inori for this cute drag function :)
	function dragger.new(frame)
	    local s, event = pcall(function()
	    	return frame.MouseEnter
	    end)

	    if s then
	    	frame.Active = true;

	    	event:connect(function()
	    		local input = frame.InputBegan:connect(function(key)
	    			if key.UserInputType == Enum.UserInputType.MouseButton1 then
	    				local objectPosition = Vector2.new(mouse.X - frame.AbsolutePosition.X, mouse.Y - frame.AbsolutePosition.Y);
	    				while heartbeat:wait() and inputService:IsMouseButtonPressed(Enum.UserInputType.MouseButton1) do
	    					frame:TweenPosition(UDim2.new(0, mouse.X - objectPosition.X + (frame.Size.X.Offset * frame.AnchorPoint.X), 0, mouse.Y - objectPosition.Y + (frame.Size.Y.Offset * frame.AnchorPoint.Y)), 'Out', 'Quad', 0.1, true);
	    				end
	    			end
	    		end)

	    		local leave;
	    		leave = frame.MouseLeave:connect(function()
	    			input:disconnect();
	    			leave:disconnect();
	    		end)
	    	end)
	    end
	end
	
	function resizer.new(p, s)
		p:GetPropertyChangedSignal('AbsoluteSize'):connect(function()
			s.Size = UDim2.new(s.Size.X.Scale, s.Size.X.Offset, s.Size.Y.Scale, p.AbsoluteSize.Y);
		end)
	end
end
script.Parent.Active = true
script.Parent.Draggable = true

this is the dragging/moving ui script
if you have any ideas just tell me
i can only get it to work with the entire frame and not a tab at the top
and i couldnt make a resize script

Just set the GUI’s draggable property to true in the script. It’s deprecated but it still works.

i have “script.Parent.Draggable = true” at the bottom i just mainly need help with the resizing script

You can use math.clamp to set the minimal and the maximum amount.

ok so this is the best i can do

local Gui = script.Parent
local Con = Gui.Con
local Over = Gui.Overlay

Con.Drag.MouseButton1Down:connect(function()
	Over.Visible = true
	local Move = Over.MouseMoved:connect(function(X,Y)
		local x = X-Con.AbsolutePosition.X-(Con.Drag.Size.X.Offset/2)
		local y = math.floor(((Y-(Con.Drag.Size.Y.Offset/2))/20)+0.5)*20
		if x < 400 then x = 400 end
		if y < 100 then y = 100 end
		Con.Size = UDim2.new(0,x,0,y)
		local Z = 0
	end)
	local Up
	local Leave
	Up = Over.MouseButton1Up:connect(function()
		Move:disconnect()
		Up:disconnect()
		Leave:disconnect()
		Over.Visible = false
	end)
	Leave = Over.MouseLeave:connect(function()
		Move:disconnect()
		Up:disconnect()
		Leave:disconnect()
		Over.Visible = false
	end)
end)

this is the resizable gui script but i cant make anything better then this my coding skills wont let me go any farther since i wanted a tab to move the note pad around the tab wont scale with the rest of it as you can see in the video

Is the title bar the parent of frame below it? If so you could just change the bottom frames size to UDim.new(1, 0, 0, Y) and re-size the title bar for adjusting the width of the frame.

Please include the hierarchy when making UI related posts.

everything in notepad
this is all the stuff and how its parented

the localscript is the move script