Custom ChatGUI has internal overlap on long messages

[SourSkittIes (sour)]

Currently trying to achieve a custom ChatGUI and I have everything working decently except for overly long messages. (pictured)

It just overlaps within one line on individual long messages for some reason and I tried playing with the properties but it was to no avail unless there was one secret hidden property I wasn’t seeing for some reason.
I am using a MessageLabel with UIListLayouts with the heirarchy pictured

local StarterGui = game:GetService("StarterGui")
StarterGui:SetCoreGuiEnabled(Enum.CoreGuiType.Chat, false)
local replicatedStorage = game:GetService("ReplicatedStorage")
local players = game:GetService("Players")

local chatFrame = script.Parent:WaitForChild("Chat")
local messageTemplate = chatFrame:WaitForChild("MessageLabel") 
local chatEvent = replicatedStorage:WaitForChild("OnChatInputted")

local function addMessage(playerName, messageText)
	local newMessage = messageTemplate:Clone()
	newMessage.Parent = chatFrame
	newMessage.Text = playerName .. ": " .. messageText
	newMessage.Visible = true
	newMessage.TextWrapped = true
	newMessage.TextScaled = false
	newMessage.Size = UDim2.new(1, 0, 0, math.clamp(newMessage.TextBounds.Y, 25, 400)) 

	if #chatFrame:GetChildren() > 12 then
		chatFrame:GetChildren()[2]:Destroy() 
	end
end

chatEvent.OnClientEvent:Connect(addMessage)

This is the code I have to take the input from the textinput textbox to the chat frame and messagelabel.
Any help or pointers appreciated, thanks!

[scavengingbot]

That’s because the UIListlayout doesn’t have any space left to put other labels. You should put the UIListLayout inside of a scrollingframe and add your labes to the scrollingframe, then resize its canvassize to whatever you want.

So your hierarchy should look like this:

• Chat : Frame
  • ScrollingFrame : ScrollingFrame
    • UIListLayout : UIListLayout
    • Label1 : TextLabel
    • Label2: TextLabel
    • (…)

Hope this helps!