Overhaul settings panel layout

- make the panel larger
- place settings widgets in a scroll panel
- arrange settings widgets in two columns
- make tabs in TD vertical

mods/ts/chrome.yaml

@@ -702,6 +702,9 @@ dropdown-separators:
 		separator-pressed: 766, 2, 1, 19
 		separator-disabled: 513, 258, 1, 19
 
+separator:
+	Inherits: button
+
 logos:
 	Inherits: ^LoadScreen
 	Regions:

mods/ts/chrome/settings-hotkeys.yaml

@@ -2,143 +2,100 @@ Container@HOTKEYS_PANEL:
 	Logic: HotkeysSettingsLogic
 		HotkeyGroups:
 			Game Commands:
-				Template: TWO_COLUMN
 				Types: OrderGenerator, World, Menu
 			Viewport Commands:
-				Template: TWO_COLUMN
 				Types: Viewport
 			Observer / Replay Commands:
-				Template: TWO_COLUMN
 				Types: Observer, Replay
 			Unit Commands:
-				Template: THREE_COLUMN
 				Types: Unit
 			Unit Stance Commands:
-				Template: TWO_COLUMN
 				Types: Stance
 			Production Commands:
-				Template: THREE_COLUMN
 				Types: Production, ProductionSlot
 			Support Power Commands:
-				Template: THREE_COLUMN
 				Types: SupportPower
 			Music Commands:
-				Template: TWO_COLUMN
 				Types: Music
 			Chat Commands:
-				Template: TWO_COLUMN
 				Types: Chat
 			Depth Preview Debug:
-				Template: TWO_COLUMN
 				Types: DepthDebug
-	Width: PARENT_RIGHT - 10
+	Width: PARENT_RIGHT
 	Height: PARENT_BOTTOM
 	Children:
 		ScrollPanel@HOTKEY_LIST:
-			X: 15
-			Y: 40
-			Width: PARENT_RIGHT - 30
-			TopBottomSpacing: 4
-			ItemSpacing: 4
-			Height: 190
+			Width: PARENT_RIGHT
+			Height: PARENT_BOTTOM - 65
+			TopBottomSpacing: 5
+			ItemSpacing: 5
 			Children:
-				ScrollItem@HEADER:
-					BaseName: scrollheader
-					Width: 528
-					Height: 13
+				Container@HEADER:
+					Width: PARENT_RIGHT - 24 - 10
+					Height: 18
+					Children:
+						Background@BACKGROUND:
+							Width: PARENT_RIGHT
+							Height: 13
+							Background: separator
+						Label@LABEL:
+							Width: PARENT_RIGHT
+							Height: 13
+							Font: TinyBold
+							Align: Center
+				Container@TEMPLATE:
+					Width: (PARENT_RIGHT - 24) / 2 - 10
+					Height: 30
 					Visible: false
 					Children:
-						Label@LABEL:
-							Font: TinyBold
-							Width: PARENT_RIGHT
-							Height: 10
-							Align: Center
-						ScrollItem@HEADER:
-							Width: 528
-							Height: 13
-							Visible: false
-							Children:
-								Label@LABEL:
-									Font: TinyBold
-									Width: PARENT_RIGHT
-									Height: 10
-									Align: Center
-						Container@TEMPLATES:
-							Children:
-								Container@TWO_COLUMN:
-									Width: 262
-									Height: 25
-									Visible: false
-									Children:
-										Label@FUNCTION:
-											Y: 0 - 1
-											Width: PARENT_RIGHT - 85
-											Height: 25
-											Align: Right
-										Button@HOTKEY:
-											X: PARENT_RIGHT - WIDTH
-											Width: 80
-											Height: 25
-											Align: Left
-											TooltipContainer: SETTINGS_TOOLTIP_CONTAINER
-								Container@THREE_COLUMN:
-									Width: 173
-									Height: 25
-									Visible: false
-									Children:
-										Label@FUNCTION:
-											Y: 0 - 1
-											Width: PARENT_RIGHT - 84
-											Height: 25
-											Align: Right
-										Button@HOTKEY:
-											X: PARENT_RIGHT - WIDTH + 1
-											Width: 80
-											Height: 25
-											Align: Left
-											TooltipContainer: SETTINGS_TOOLTIP_CONTAINER
+						Label@FUNCTION:
+							Y: 0 - 1
+							Width: PARENT_RIGHT - 120 - 5
+							Height: 25
+							Align: Right
+						Button@HOTKEY:
+							X: PARENT_RIGHT - WIDTH
+							Width: 120
+							Height: 25
+							TooltipContainer: SETTINGS_TOOLTIP_CONTAINER
 		Background@HOTKEY_DIALOG_ROOT:
-			X: 15
-			Y: 230
-			Width: PARENT_RIGHT - 30
+			Y: PARENT_BOTTOM - HEIGHT
+			Width: PARENT_RIGHT
 			Height: 65
 			Background: dialog3
 			Children:
 				Label@HOTKEY_LABEL:
 					X: 15
 					Y: 19
-					Width: 219 - 15 - 10
+					Width: 200
 					Height: 25
 					Font: Bold
 					Align: Right
 				HotkeyEntry@HOTKEY_ENTRY:
-					X: 219
+					X: 15 + 200 + 5
 					Y: 20
-					Width: 170
+					Width: 300
 					Height: 25
 				Container@NOTICES:
-					X: 219
+					X: 15 + 200 + 5
 					Y: 42
-					Width: 170
+					Width: 300
 					Height: 25
 					Children:
 						Label@DEFAULT_NOTICE:
 							Width: PARENT_RIGHT
 							Height: PARENT_BOTTOM
 							Font: Tiny
-							Align: Left
 							Text: This is the default
 						Label@ORIGINAL_NOTICE:
 							Width: PARENT_RIGHT
 							Height: PARENT_BOTTOM
 							Font: Tiny
-							Align: Left
 							Text: The default is "{0}"
 						Label@DUPLICATE_NOTICE:
 							Width: PARENT_RIGHT
 							Height: PARENT_BOTTOM
 							Font: Tiny
-							Align: Left
 							Text: This is already used for "{0}"
 				Button@OVERRIDE_HOTKEY_BUTTON:
 					X: PARENT_RIGHT - 3 * WIDTH - 30