fix w-full h-full and span sizing inheritance

Scripts/AutoSizingFlexContainer.gd

@@ -5,6 +5,7 @@ extends FlexContainer
 signal flex_resized
 
 var bgcolor: Color = Color(0,0,0,0)
+var content_size: Vector2 = Vector2.ZERO
 
 func set_background_color(color: Color) -> void:
 	bgcolor = color
@@ -14,11 +15,21 @@ func _notification(what: int) -> void:
 	super._notification(what)
 
 	if what == NOTIFICATION_DRAW and bgcolor.a > 0:
-		draw_rect(Rect2(Vector2.ZERO, size), bgcolor)
+		draw_rect(Rect2(Vector2.ZERO, content_size), bgcolor)
 
 # This is the overridden layout logic for the auto-sizing container
 func _resort() -> void:
-	#size_flags_horizontal = Control.SIZE_SHRINK_CENTER
+	# Check if we should fill horizontally (for w-full)
+	if has_meta("should_fill_horizontal"):
+		size_flags_horizontal = Control.SIZE_FILL
+	else:
+		size_flags_horizontal = Control.SIZE_SHRINK_CENTER
+	
+	# Check if we should fill vertically (for h-full)  
+	if has_meta("should_fill_vertical"):
+		size_flags_vertical = Control.SIZE_FILL
+	else:
+		size_flags_vertical = Control.SIZE_SHRINK_CENTER
 	
 	if debug_draw:
 		_draw_rects.clear()
@@ -74,11 +85,38 @@ func _resort() -> void:
 		_root.mark_dirty_and_propogate()
 
 
-	var auto_size_width = not has_meta("custom_css_width")
-	var auto_size_height = not has_meta("custom_css_height")
+	var auto_size_width = not has_meta("custom_css_width") and not has_meta("should_fill_horizontal")
+	var auto_size_height = not has_meta("custom_css_height") and not has_meta("should_fill_vertical")
 
-	var available_width = NAN if auto_size_width else size.x
-	var available_height = NAN if auto_size_height else size.y
+	var available_width = NAN
+	var available_height = NAN
+	
+	if not auto_size_width:
+		if has_meta("should_fill_horizontal"):
+			# For w-full, use the full parent size if available
+			var parent_container = get_parent()
+			if parent_container and parent_container.size.x > 0:
+				available_width = parent_container.size.x
+			elif size.x > 0:
+				available_width = size.x
+			else:
+				# Fallback: try to get from custom_minimum_size
+				available_width = custom_minimum_size.x if custom_minimum_size.x > 0 else NAN
+		else:
+			available_width = size.x
+	
+	if not auto_size_height:
+		if has_meta("should_fill_vertical"):
+			# For h-full, use the full parent size if available
+			var parent_container = get_parent()
+			if parent_container and parent_container.size.y > 0:
+				available_height = parent_container.size.y
+			elif size.y > 0:
+				available_height = size.y
+			else:
+				available_height = custom_minimum_size.y if custom_minimum_size.y > 0 else NAN
+		else:
+			available_height = size.y
 
 	_root.calculate_layout(available_width, available_height, 1) # 1 = LTR direction
 
@@ -92,25 +130,58 @@ func _resort() -> void:
 	var custom_w = 0.0
 	if has_meta("custom_css_width"):
 		custom_w = float(get_meta("custom_css_width"))
+	elif has_meta("should_fill_horizontal"):
+		# Use the same logic as available_width calculation
+		var parent_container = get_parent()
+		if parent_container and parent_container.size.x > 0:
+			custom_w = parent_container.size.x
+		elif size.x > 0:
+			custom_w = size.x
+		else:
+			custom_w = custom_minimum_size.x if custom_minimum_size.x > 0 else 0.0
 
 	var custom_h = 0.0
 	if has_meta("custom_css_height"):
 		custom_h = float(get_meta("custom_css_height"))
+	elif has_meta("should_fill_vertical"):
+		# Use the same logic as available_height calculation
+		var parent_container = get_parent()
+		if parent_container and parent_container.size.y > 0:
+			custom_h = parent_container.size.y
+		elif size.y > 0:
+			custom_h = size.y
+		else:
+			custom_h = custom_minimum_size.y if custom_minimum_size.y > 0 else 0.0
 
 	var needed_size = Vector2(
 		max(custom_w, computed_size.x),
 		max(custom_h, computed_size.y)
 	)
+	
+	# Store the actual content size for background drawing
+	content_size = needed_size
 
 	# Construct the new minimum size for this container
 	var new_min_size = custom_minimum_size
 	if auto_size_width:
 		new_min_size.x = needed_size.x
+	else:
+		# For w-full, ensure minimum size matches the needed size
+		new_min_size.x = needed_size.x
 	if auto_size_height:
 		new_min_size.y = needed_size.y
+	else:
+		# For h-full, ensure minimum size matches the needed size  
+		new_min_size.y = needed_size.y
 
 	if not custom_minimum_size.is_equal_approx(new_min_size):
 		custom_minimum_size = new_min_size
+		
+		# For w-full/h-full, also force the actual size if SIZE_FILL isn't working
+		if has_meta("should_fill_horizontal") and size.x < new_min_size.x:
+			size.x = new_min_size.x
+		if has_meta("should_fill_vertical") and size.y < new_min_size.y:
+			size.y = new_min_size.y
 
 	# Apply the calculated layout to each child control
 	for flex_data in _flex_list:

Scripts/Constants.gd

@@ -252,7 +252,7 @@ var HTML_CONTENT = """<head>
 	<p>Keep track of your to-do list</p>
 
 	<!-- Task List -->
-	<div style="flex flex-col gap-2 w-64 bg-[#f8fafc] items-center justify-center">
+	<div style="flex flex-col gap-2 w-80 bg-[#f8fafc] items-center justify-center">
 		<span style="flex justify-between items-center bg-[#e2e8f0] w-full h-8">
 			<span>✅ Finish homework</span>
 			<button>Delete</button>

Scripts/StyleManager.gd

@@ -172,9 +172,19 @@ static func apply_flex_container_properties(node: FlexContainer, styles: Diction
 		node._root.set_gap(0, parse_flex_value(styles["column-gap"]))
 	
 	if styles.has("width"):
-		node.set_meta("custom_css_width", parse_size(styles["width"]))
+		var width_val = styles["width"]
+		if width_val == "full":
+			# For flex containers, w-full should expand to fill parent
+			node.set_meta("should_fill_horizontal", true)
+		else:
+			node.set_meta("custom_css_width", parse_size(width_val))
 	if styles.has("height"):
-		node.set_meta("custom_css_height", parse_size(styles["height"]))
+		var height_val = styles["height"]
+		if height_val == "full":
+			# For flex containers, h-full should expand to fill parent
+			node.set_meta("should_fill_vertical", true)
+		else:
+			node.set_meta("custom_css_height", parse_size(height_val))
 	if styles.has("background-color"):
 		node.set_meta("custom_css_background_color", styles["background-color"])
 	node.update_layout()