fix label sizing in containers, radius for div, swap manual bg draw to Panel

Scenes/Tags/p.tscn

@@ -3,15 +3,11 @@
 [ext_resource type="Script" uid="uid://cg6kjvlx3an1j" path="res://Scripts/Tags/p.gd" id="1_pnbfg"]
 [ext_resource type="Theme" uid="uid://bn6rbmdy60lhr" path="res://Scenes/Styles/BrowserText.tres" id="2_1glvj"]
 
-[node name="P" type="VBoxContainer"]
+[node name="RichTextLabel" type="RichTextLabel"]
 anchors_preset = 10
 anchor_right = 1.0
+offset_bottom = 19.0
 grow_horizontal = 2
-script = ExtResource("1_pnbfg")
-
-[node name="RichTextLabel" type="RichTextLabel" parent="."]
-layout_mode = 2
-size_flags_horizontal = 3
 focus_mode = 2
 mouse_default_cursor_shape = 1
 theme = ExtResource("2_1glvj")
@@ -20,3 +16,4 @@ bbcode_enabled = true
 text = "Placeholder"
 fit_content = true
 selection_enabled = true
+script = ExtResource("1_pnbfg")

Scenes/main.tscn

@@ -204,7 +204,7 @@ stretch_mode = 5
 custom_minimum_size = Vector2(0, 5)
 layout_mode = 2
 
-[node name="SmoothScrollContainer" type="ScrollContainer" parent="VBoxContainer"]
+[node name="ScrollContainer" type="ScrollContainer" parent="VBoxContainer"]
 layout_mode = 2
 size_flags_vertical = 3
 script = ExtResource("10_d1ilt")
@@ -214,7 +214,7 @@ drag_with_mouse = false
 allow_overdragging = false
 metadata/_custom_type_script = "uid://bgqglerkcylxx"
 
-[node name="WebsiteContainer" type="VBoxContainer" parent="VBoxContainer/SmoothScrollContainer"]
+[node name="WebsiteContainer" type="VBoxContainer" parent="VBoxContainer/ScrollContainer"]
 unique_name_in_owner = true
 custom_minimum_size = Vector2(200, 200)
 layout_mode = 2

Scripts/AutoSizingFlexContainer.gd

@@ -4,18 +4,45 @@ extends FlexContainer
 
 signal flex_resized
 
-var bgcolor: Color = Color(0,0,0,0)
 var content_size: Vector2 = Vector2.ZERO
+var background_panel: Panel = null
 
-func set_background_color(color: Color) -> void:
-	bgcolor = color
-	queue_redraw()
-
-func _notification(what: int) -> void:
-	super._notification(what)
-
-	if what == NOTIFICATION_DRAW and bgcolor.a > 0:
-		draw_rect(Rect2(Vector2.ZERO, content_size), bgcolor)
+func update_background_panel():
+	var needs_background = has_meta("custom_css_background_color") or has_meta("custom_css_border_radius")
+	
+	if needs_background:
+		if not background_panel:
+			background_panel = Panel.new()
+			background_panel.name = "BackgroundPanel"
+			background_panel.mouse_filter = Control.MOUSE_FILTER_IGNORE
+			add_child(background_panel)
+			move_child(background_panel, 0)  # Ensure it's behind content
+		
+		# Set panel size to match container
+		background_panel.set_anchors_and_offsets_preset(Control.PRESET_FULL_RECT)
+		
+		# Create StyleBoxFlat for background and border radius
+		var style_box = StyleBoxFlat.new()
+		
+		if has_meta("custom_css_background_color"):
+			style_box.bg_color = get_meta("custom_css_background_color")
+		else:
+			style_box.bg_color = Color.TRANSPARENT
+		
+		if has_meta("custom_css_border_radius"):
+			var radius_str = get_meta("custom_css_border_radius")
+			var radius = StyleManager.parse_radius(radius_str)
+			style_box.corner_radius_top_left = radius
+			style_box.corner_radius_top_right = radius
+			style_box.corner_radius_bottom_left = radius
+			style_box.corner_radius_bottom_right = radius
+		
+		background_panel.add_theme_stylebox_override("panel", style_box)
+	
+	elif background_panel:
+		# Remove background panel if no longer needed
+		background_panel.queue_free()
+		background_panel = null
 
 # This is the overridden layout logic for the auto-sizing container
 func _resort() -> void:
@@ -40,6 +67,10 @@ func _resort() -> void:
 		var c = get_child(i)
 		if not c is Control or c.is_set_as_top_level():
 			continue
+		
+		# Skip background panel from flex calculations
+		if c.name == "BackgroundPanel":
+			continue
 
 		var cid = c.get_instance_id()
 		var target_index = _find_index_from_flex_list(_flex_list, cid)
@@ -151,10 +182,9 @@ func _resort() -> void:
 			_draw_debug_rect(Rect2(offset, rect_size), Color(1, 0, 0, 0.8))
 
 
-	if has_meta("custom_css_background_color"):
-		set_background_color(get_meta("custom_css_background_color"))
-
-	queue_redraw()
+	# Update background panel if needed
+	update_background_panel()
+	
 	emit_signal("flex_resized")
 
 func calculate_available_dimension(is_width: bool) -> float:

Scripts/StyleManager.gd

@@ -46,6 +46,17 @@ static func apply_element_styles(node: Control, element: HTMLParser.HTMLElement,
 		elif node is VBoxContainer or node is HBoxContainer or node is Container:
 			# Hcontainer nodes (like ul, ol)
 			SizingUtils.apply_container_dimension_sizing(node, width, height)
+		elif node is HTMLP:
+			# Only apply sizing if element has explicit size, otherwise preserve natural sizing
+			var element_styles = parser.get_element_styles_internal(element, "")
+			if element_styles.has("width") or element_styles.has("height"):
+				var orig_h_flag = node.size_flags_horizontal
+				var orig_v_flag = node.size_flags_vertical
+				SizingUtils.apply_regular_control_sizing(node, width, height)
+				if not element_styles.has("width"):
+					node.size_flags_horizontal = orig_h_flag
+				if not element_styles.has("height"):
+					node.size_flags_vertical = orig_v_flag
 		else:
 			# regular controls
 			SizingUtils.apply_regular_control_sizing(node, width, height)
@@ -53,11 +64,14 @@ static func apply_element_styles(node: Control, element: HTMLParser.HTMLElement,
 		if label and label != node:
 			label.anchors_preset = Control.PRESET_FULL_RECT
 
-	# Apply background color
-	if styles.has("background-color"):
+	# Apply background color and border radius
+	if styles.has("background-color") or styles.has("border-radius"):
 		var target_node_for_bg = node if node is FlexContainer else label
 		if target_node_for_bg:
-			target_node_for_bg.set_meta("custom_css_background_color", styles["background-color"])
+			if styles.has("background-color"):
+				target_node_for_bg.set_meta("custom_css_background_color", styles["background-color"])
+			if styles.has("border-radius"):
+				target_node_for_bg.set_meta("custom_css_border_radius", styles["border-radius"])
 			if target_node_for_bg.has_method("add_background_rect"):
 				target_node_for_bg.call_deferred("add_background_rect")
 

Scripts/Tags/button.gd

@@ -1,3 +1,4 @@
+class_name HTMLButton
 extends Control
 
 var current_element: HTMLParser.HTMLElement

Scripts/Tags/p.gd

@@ -1,7 +1,12 @@
-extends Control
-
-@onready var rich_text_label: RichTextLabel = $RichTextLabel
+class_name HTMLP
+extends RichTextLabel
 
 func init(element: HTMLParser.HTMLElement, parser: HTMLParser = null) -> void:
-	var label: RichTextLabel = $RichTextLabel
-	label.text = "[font_size=24]%s[/font_size]" % element.get_bbcode_formatted_text(parser)
+	text = "[font_size=24]%s[/font_size]" % element.get_bbcode_formatted_text(parser)
+	
+	# NOTE: estimate width/height because FlexContainer removes our anchor preset (sets 0 width)  
+	var plain_text = element.get_collapsed_text()
+	var estimated_height = 30
+	var estimated_width = min(400, max(100, plain_text.length() * 12))
+	
+	custom_minimum_size = Vector2(estimated_width, estimated_height)

Scripts/Tags/span.gd

@@ -1,3 +1,4 @@
+class_name HTMLSpan
 extends RichTextLabel
 
 @onready var rich_text_label: RichTextLabel = self

Scripts/Utils/SizingUtils.gd

@@ -26,7 +26,7 @@ static func should_skip_sizing(node: Control, element, parser) -> bool:
 	
 	# Button sizing rules: Skip sizing only when button has no explicit size 
 	# AND parent doesn't have explicit width (auto-inherited sizing)
-	if node.get_script() and node.get_script().get_path().ends_with("button.gd"):
+	if node is HTMLButton:
 		# If button has explicit size, don't skip sizing
 		if element_styles.has("width") or element_styles.has("height"):
 			return false
@@ -43,9 +43,9 @@ static func should_skip_sizing(node: Control, element, parser) -> bool:
 	
 	# Span sizing rules: Always skip sizing for spans since they're inline elements
 	# (flex containers use AutoSizingFlexContainer, not span.gd)
-	elif node.get_script() and node.get_script().get_path().ends_with("span.gd"):
+	elif node is HTMLSpan:
 		return true
-	
+
 	return false
 
 static func apply_container_dimension_sizing(node: Control, width, height) -> void: