Make errors scrollable when too long

plugin/src/Components/ErrorPanel.lua

@@ -6,10 +6,14 @@ local Theme = require(Plugin.Theme)
 
 local Panel = require(Plugin.Components.Panel)
 local FitText = require(Plugin.Components.FitText)
+local FitScrollingFrame = require(Plugin.Components.FitScrollingFrame)
 local FormButton = require(Plugin.Components.FormButton)
 
 local e = Roact.createElement
 
+local BUTTON_HEIGHT = 60
+local HOR_PADDING = 8
+
 local ErrorPanel = Roact.Component:extend("ErrorPanel")
 
 function ErrorPanel:render()
@@ -24,17 +28,31 @@ function ErrorPanel:render()
 			Padding = UDim.new(0, 8),
 		}),
 
-		Text = e(FitText, {
+		ErrorContainer = e(FitScrollingFrame, {
-			LayoutOrder = 1,
+			containerProps = {
-			FitAxis = "Y",
+				BackgroundTransparency = 1,
-			Size = UDim2.new(1, 0, 0, 0),
+				BorderSizePixel = 0,
-			Padding = Vector2.new(12, 6),
+				Size = UDim2.new(1, -HOR_PADDING * 2, 1, -BUTTON_HEIGHT),
-			Font = Theme.ButtonFont,
+				Position = UDim2.new(0, HOR_PADDING, 0, 0),
-			TextSize = 18,
+				ScrollBarImageColor3 = Theme.PrimaryColor,
-			Text = errorMessage,
+				VerticalScrollBarInset = Enum.ScrollBarInset.ScrollBar,
-			TextWrap = true,
+				ScrollingDirection = Enum.ScrollingDirection.Y,
-			TextColor3 = Theme.PrimaryColor,
+			},
-			BackgroundTransparency = 1,
+		}, {
+			Text = e(FitText, {
+				Size = UDim2.new(1, 0, 0, 0),
+
+				LayoutOrder = 1,
+				TextXAlignment = Enum.TextXAlignment.Left,
+				TextYAlignment = Enum.TextYAlignment.Top,
+				FitAxis = "Y",
+				Font = Theme.ButtonFont,
+				TextSize = 18,
+				Text = errorMessage,
+				TextWrap = true,
+				TextColor3 = Theme.PrimaryColor,
+				BackgroundTransparency = 1,
+			}),
 		}),
 
 		DismissButton = e(FormButton, {

plugin/src/Components/FitScrollingFrame.lua

@@ -0,0 +1,33 @@
+local Roact = require(script:FindFirstAncestor("Rojo").Roact)
+
+local Dictionary = require(script.Parent.Parent.Dictionary)
+
+local e = Roact.createElement
+
+local FitScrollingFrame = Roact.Component:extend("FitScrollingFrame")
+
+function FitScrollingFrame:init()
+	self.sizeBinding, self.setSize = Roact.createBinding(UDim2.new())
+end
+
+function FitScrollingFrame:render()
+	local containerProps = self.props.containerProps
+	local layoutProps = self.props.layoutProps
+
+	local children = Dictionary.merge(self.props[Roact.Children], {
+		["$Layout"] = e("UIListLayout", Dictionary.merge({
+			SortOrder = Enum.SortOrder.LayoutOrder,
+			[Roact.Change.AbsoluteContentSize] = function(instance)
+				self.setSize(UDim2.new(0, 0, 0, instance.AbsoluteContentSize.Y))
+			end,
+		}, layoutProps)),
+	})
+
+	local fullContainerProps = Dictionary.merge(containerProps, {
+		CanvasSize = self.sizeBinding,
+	})
+
+	return e("ScrollingFrame", fullContainerProps, children)
+end
+
+return FitScrollingFrame