Use TextBox scrolling instead of TextScaled (#10)

* Use TextBox scrolling instead of TextScaled

* Run stylua

src/App/Components/Input.luau

@@ -6,6 +6,7 @@ local Util = Components.Util
 local Fusion = require(Argon.Packages.Fusion)
 
 local Theme = require(App.Theme)
+local default = require(Util.default)
 local stripProps = require(Util.stripProps)
 
 local New = Fusion.New
@@ -29,6 +30,7 @@ local COMPONENT_ONLY_PROPS = {
 type Props = {
 	Changed: ((text: string) -> ())?,
 	Finished: ((text: string) -> ())?,
+	AutomaticSize: Enum.AutomaticSize?,
 	Font: Fusion.CanBeState<Font>?,
 	Color: Fusion.CanBeState<Color3>?,
 	PlaceholderColor: Fusion.CanBeState<Color3>?,
@@ -40,16 +42,18 @@ return function(props: Props): TextBox
 	local text = Value("")
 
 	return Hydrate(New("TextBox") {
+		AutomaticSize = default(props.AutomaticSize, Enum.AutomaticSize.None),
 		FontFace = props.Font or Theme.Fonts.Regular,
 		TextColor3 = props.Color or Theme.Colors.Text,
 		PlaceholderColor3 = props.PlaceholderColor or Theme.Colors.TextDimmed,
 		TextXAlignment = Enum.TextXAlignment.Left,
-		AutomaticSize = props.Scaled and Enum.AutomaticSize.None or Enum.AutomaticSize.XY,
 		TextSize = Theme.TextSize.Large,
 		BorderSizePixel = 0,
 		BackgroundTransparency = 1,
-		TextScaled = props.Scaled,
 		PlaceholderText = "...",
+		TextScaled = props.Scaled,
+		-- If the text is not scaled, enable ClipsDescendants so text scrolling works correctly.
+		ClipsDescendants = not props.Scaled,
 
 		[OnChange "Text"] = function(text)
 			if props.Changed then

src/App/Pages/NotConnected.luau

@@ -20,6 +20,7 @@ local List = require(Components.List)
 local Text = require(Components.Text)
 local Box = require(Components.Box)
 
+local New = Fusion.New
 local Value = Fusion.Value
 local Computed = Fusion.Computed
 local Children = Fusion.Children
@@ -38,13 +39,19 @@ return function(props: Props): { Instance }
 		List {},
 		Box {
 			Size = UDim2.new(1, 0, 0, Theme.CompSizeY.Large),
+			AutomaticSize = Enum.AutomaticSize.None,
+
 			[Children] = {
+				List {
+					Spacing = 4,
+					FillDirection = Enum.FillDirection.Horizontal,
+					VerticalAlignment = Enum.VerticalAlignment.Center,
+				},
 				Input {
 					Size = UDim2.fromScale(0.75, 1),
 					Font = Theme.Fonts.Mono,
 					PlaceholderText = "localhost",
 					Text = hostInput,
-					Scaled = true,
 
 					Changed = function(text)
 						hostInput:set(filterHost(text))
@@ -53,8 +60,23 @@ return function(props: Props): { Instance }
 					Finished = function(host)
 						props.App:setHost(host ~= "" and host or Config:getDefault("Host"))
 					end,
+
+					[Children] = {
+						New "UIFlexItem" {
+							FlexMode = Enum.UIFlexMode.Fill,
+						},
+					},
+				},
+				Text {
+					AutomaticSize = Enum.AutomaticSize.XY,
+					AnchorPoint = Vector2.new(1, 0.5),
+					Position = UDim2.fromScale(0, 0.5),
+					Text = ":",
+					Font = Theme.Fonts.Mono,
+					Color = Theme.Colors.TextDimmed,
 				},
 				Input {
+					AutomaticSize = Enum.AutomaticSize.X,
 					AnchorPoint = Vector2.new(1, 0),
 					Position = UDim2.fromScale(1, 0),
 					Size = UDim2.fromScale(0, 1),
@@ -69,16 +91,6 @@ return function(props: Props): { Instance }
 					Finished = function(port)
 						props.App:setPort(port ~= "" and tonumber(port) or Config:getDefault("Port"))
 					end,
-
-					[Children] = {
-						Text {
-							AnchorPoint = Vector2.new(1, 0.5),
-							Position = UDim2.fromScale(0, 0.5),
-							Text = ": ",
-							Font = Theme.Fonts.Mono,
-							Color = Theme.Colors.TextDimmed,
-						},
-					},
 				},
 				Padding {
 					Padding = 10,

src/App/Widgets/Help.luau

@@ -63,6 +63,7 @@ local function Link(text: string, url: string)
 				[Children] = {
 					Padding {},
 					Input {
+						AutomaticSize = Enum.AutomaticSize.XY,
 						Text = url,
 						TextEditable = false,
 						TextSize = Theme.TextSize.Large,

src/App/Widgets/Settings.luau

@@ -197,7 +197,6 @@ local function Entry(props: EntryProps): Frame
 				Input {
 					Size = UDim2.fromScale(1, 1),
 					Text = props.Binding,
-					Scaled = setting == "Host",
 					PlaceholderText = Config:getDefault(setting),
 
 					Changed = function(text)