Add smart margin container which takes screen safe areas into acocunt (Fixes #330)

14 files changed, 101 insertions, 34 deletions

diff --git a/client/menu/about.tscn b/client/menu/about.tscn
index c51f0273..152b2e0e 100644
--- a/client/menu/about.tscn
+++ b/client/menu/about.tscn
@@ -1,9 +1,10 @@
-[gd_scene load_steps=6 format=3 uid="uid://bpaenm8c6nmo8"]
+[gd_scene load_steps=7 format=3 uid="uid://bpaenm8c6nmo8"]
 
 [ext_resource type="Script" uid="uid://pcu87stpkgd8" path="res://menu/about.gd" id="1_0acu0"]
 [ext_resource type="Material" uid="uid://2j8a0c0a2ta5" path="res://menu/theme/materials/blur_material.tres" id="1_ai5pk"]
 [ext_resource type="StyleBox" uid="uid://bw4jamyna1top" path="res://menu/theme/style/panel_style_sidebar.tres" id="2_pya1x"]
 [ext_resource type="FontFile" uid="uid://bo4vh5xkpvrh1" path="res://menu/theme/fonts/font-sansita-swashed.woff2" id="4_kx3j7"]
+[ext_resource type="Script" uid="uid://byshs20og68tn" path="res://menu/smart_margin_container.gd" id="4_t51wf"]
 
 [sub_resource type="FontVariation" id="FontVariation_o2r3e"]
 base_font = ExtResource("4_kx3j7")
@@ -34,6 +35,7 @@ theme_override_constants/margin_left = 20
 theme_override_constants/margin_top = 20
 theme_override_constants/margin_right = 20
 theme_override_constants/margin_bottom = 20
+script = ExtResource("4_t51wf")
 
 [node name="options" type="VBoxContainer" parent="side/margin"]
 layout_mode = 2
diff --git a/client/menu/credits.tscn b/client/menu/credits.tscn
index 60e30dd3..a9b56d67 100644
--- a/client/menu/credits.tscn
+++ b/client/menu/credits.tscn
@@ -1,7 +1,8 @@
-[gd_scene load_steps=6 format=3 uid="uid://7mqbxa054bjv"]
+[gd_scene load_steps=7 format=3 uid="uid://7mqbxa054bjv"]
 
 [ext_resource type="Theme" uid="uid://b0qmvo504e457" path="res://menu/theme/theme/theme.tres" id="1_16kk6"]
 [ext_resource type="Script" uid="uid://c3eimx76ucpsp" path="res://menu/credits.gd" id="2_alvab"]
+[ext_resource type="Script" uid="uid://byshs20og68tn" path="res://menu/smart_margin_container.gd" id="3_i6qat"]
 [ext_resource type="Material" uid="uid://beea1pc5nt67r" path="res://menu/theme/materials/dark_blur_material.tres" id="3_nwoiv"]
 [ext_resource type="Script" uid="uid://cmncjc06kadpe" path="res://menu/auto_setup/blur_setup.gd" id="4_8sii3"]
 [ext_resource type="Script" uid="uid://bd7bylb2t2m0" path="res://menu/auto_setup/scroll_container_custom.gd" id="4_bfcw8"]
@@ -24,6 +25,7 @@ anchor_right = 1.0
 anchor_bottom = 1.0
 grow_horizontal = 2
 grow_vertical = 2
+script = ExtResource("3_i6qat")
 
 [node name="Panel" type="Panel" parent="OuterMargin"]
 material = ExtResource("3_nwoiv")
diff --git a/client/menu/error.gd b/client/menu/error.gd
index 58e437f0..0630b38c 100644
--- a/client/menu/error.gd
+++ b/client/menu/error.gd
@@ -17,7 +17,7 @@ extends Menu
 
 func _ready():
 	super()
-	$Panel/contents/mesage.text = Global.error_message
+	$Panel/SmartMarginContainer/contents/mesage.text = Global.error_message
 
 func _on_return_pressed():
 	replace_menu("res://menu/main.tscn")
diff --git a/client/menu/error.tscn b/client/menu/error.tscn
index e4e024de..f999429d 100644
--- a/client/menu/error.tscn
+++ b/client/menu/error.tscn
@@ -1,10 +1,11 @@
-[gd_scene load_steps=6 format=3 uid="uid://cimgn07lbcs4v"]
+[gd_scene load_steps=7 format=3 uid="uid://cimgn07lbcs4v"]
 
 [ext_resource type="Theme" uid="uid://b0qmvo504e457" path="res://menu/theme/theme/theme.tres" id="1_cabdu"]
 [ext_resource type="PackedScene" uid="uid://l4vm07dtda4j" path="res://menu/menu_background.tscn" id="2_5fxol"]
 [ext_resource type="Script" uid="uid://bl0n4atrdcogm" path="res://menu/error.gd" id="2_dbe41"]
 [ext_resource type="PackedScene" uid="uid://bg2d78ycorcqk" path="res://menu/scene_transition.tscn" id="4_1nbt3"]
 [ext_resource type="Material" uid="uid://beea1pc5nt67r" path="res://menu/theme/materials/dark_blur_material.tres" id="4_hxkkd"]
+[ext_resource type="Script" uid="uid://byshs20og68tn" path="res://menu/smart_margin_container.gd" id="5_rfcg2"]
 
 [node name="ErrorMenu" type="Control"]
 layout_mode = 3
@@ -27,37 +28,37 @@ anchor_bottom = 1.0
 grow_horizontal = 2
 grow_vertical = 2
 
-[node name="contents" type="VBoxContainer" parent="Panel"]
+[node name="SmartMarginContainer" type="MarginContainer" parent="Panel"]
 layout_mode = 1
-anchors_preset = 8
-anchor_left = 0.5
-anchor_top = 0.5
-anchor_right = 0.5
-anchor_bottom = 0.5
-offset_left = -176.5
-offset_top = -49.5
-offset_right = 176.5
-offset_bottom = 49.5
+anchors_preset = 15
+anchor_right = 1.0
+anchor_bottom = 1.0
 grow_horizontal = 2
 grow_vertical = 2
+script = ExtResource("5_rfcg2")
+metadata/_custom_type_script = "uid://byshs20og68tn"
+
+[node name="contents" type="VBoxContainer" parent="Panel/SmartMarginContainer"]
+layout_mode = 2
+alignment = 1
 
-[node name="title" type="Label" parent="Panel/contents"]
+[node name="title" type="Label" parent="Panel/SmartMarginContainer/contents"]
 layout_mode = 2
 theme_override_font_sizes/font_size = 61
 text = "Error"
 horizontal_alignment = 1
 
-[node name="mesage" type="Label" parent="Panel/contents"]
+[node name="mesage" type="Label" parent="Panel/SmartMarginContainer/contents"]
 layout_mode = 2
 theme_override_font_sizes/font_size = 24
 text = "This should be the error message."
 horizontal_alignment = 1
 
-[node name="Control" type="Control" parent="Panel/contents"]
+[node name="Control" type="Control" parent="Panel/SmartMarginContainer/contents"]
 custom_minimum_size = Vector2(0, 15.805)
 layout_mode = 2
 
-[node name="return" type="Button" parent="Panel/contents"]
+[node name="return" type="Button" parent="Panel/SmartMarginContainer/contents"]
 layout_mode = 2
 size_flags_horizontal = 4
 text = "Return to Main Menu"
@@ -66,4 +67,4 @@ text = "Return to Main Menu"
 visible = false
 layout_mode = 1
 
-[connection signal="pressed" from="Panel/contents/return" to="." method="_on_return_pressed"]
+[connection signal="pressed" from="Panel/SmartMarginContainer/contents/return" to="." method="_on_return_pressed"]
diff --git a/client/menu/ingame.tscn b/client/menu/ingame.tscn
index ca8f67c8..099c535a 100644
--- a/client/menu/ingame.tscn
+++ b/client/menu/ingame.tscn
@@ -1,4 +1,4 @@
-[gd_scene load_steps=11 format=3 uid="uid://lxlgtjm8hw7v"]
+[gd_scene load_steps=12 format=3 uid="uid://lxlgtjm8hw7v"]
 
 [ext_resource type="Theme" uid="uid://b0qmvo504e457" path="res://menu/theme/theme/theme.tres" id="1_2vmyh"]
 [ext_resource type="Script" uid="uid://dyi2xohgxeybb" path="res://menu/ingame.gd" id="2_0h3no"]
@@ -6,6 +6,7 @@
 [ext_resource type="Script" uid="uid://cmncjc06kadpe" path="res://menu/auto_setup/blur_setup.gd" id="4_b6bm7"]
 [ext_resource type="FontFile" uid="uid://bo4vh5xkpvrh1" path="res://menu/theme/fonts/font-sansita-swashed.woff2" id="4_scupw"]
 [ext_resource type="StyleBox" uid="uid://bw4jamyna1top" path="res://menu/theme/style/panel_style_sidebar.tres" id="4_vr8y1"]
+[ext_resource type="Script" uid="uid://byshs20og68tn" path="res://menu/smart_margin_container.gd" id="6_poj4k"]
 
 [sub_resource type="Animation" id="Animation_8sedy"]
 length = 0.001
@@ -77,6 +78,7 @@ theme_override_constants/margin_left = 20
 theme_override_constants/margin_top = 20
 theme_override_constants/margin_right = 20
 theme_override_constants/margin_bottom = 20
+script = ExtResource("6_poj4k")
 
 [node name="Options" type="VBoxContainer" parent="Side/Margin"]
 layout_mode = 2
diff --git a/client/menu/lobby.tscn b/client/menu/lobby.tscn
index a1381209..1921aabb 100644
--- a/client/menu/lobby.tscn
+++ b/client/menu/lobby.tscn
@@ -1,4 +1,4 @@
-[gd_scene load_steps=16 format=3 uid="uid://bc50la65ntifb"]
+[gd_scene load_steps=17 format=3 uid="uid://bc50la65ntifb"]
 
 [ext_resource type="Theme" uid="uid://b0qmvo504e457" path="res://menu/theme/theme/theme.tres" id="1_u18ke"]
 [ext_resource type="Script" uid="uid://bssjvsu44l0fn" path="res://menu/lobby.gd" id="2_7657i"]
@@ -8,6 +8,7 @@
 [ext_resource type="Texture2D" uid="uid://j75dbytlbju" path="res://menu/icons/arrow_pressed.svg" id="4_eapmn"]
 [ext_resource type="Script" uid="uid://cmncjc06kadpe" path="res://menu/auto_setup/blur_setup.gd" id="5_am8pt"]
 [ext_resource type="Texture2D" uid="uid://b33qmctbpf48g" path="res://menu/icons/arrow_hover.svg" id="5_odwav"]
+[ext_resource type="Script" uid="uid://byshs20og68tn" path="res://menu/smart_margin_container.gd" id="6_7mu2u"]
 [ext_resource type="Texture2D" uid="uid://by3qsrpxnfq4w" path="res://menu/icons/arrow_focus.svg" id="6_tulu3"]
 [ext_resource type="FontFile" uid="uid://5ixo6b3bd3km" path="res://menu/theme/fonts/font-josefin-sans.woff2" id="8_cwbpa"]
 [ext_resource type="Texture2D" uid="uid://bsx6fo7mv2u6a" path="res://menu/controller_buttons/x.svg" id="9_q14bw"]
@@ -66,6 +67,7 @@ script = ExtResource("5_am8pt")
 
 [node name="MarginContainer" type="MarginContainer" parent="Sidebar/Bottom"]
 layout_mode = 2
+script = ExtResource("6_7mu2u")
 
 [node name="VBoxContainer" type="VBoxContainer" parent="Sidebar/Bottom/MarginContainer"]
 layout_mode = 2
diff --git a/client/menu/main.gd b/client/menu/main.gd
index e66a178b..dd8d7019 100644
--- a/client/menu/main.gd
+++ b/client/menu/main.gd
@@ -16,6 +16,7 @@
 extends Menu
 
 @onready var quit_button = $side/margin/options/first/quit
+@onready var margin_container: MarginContainer = $side/margin
 
 func _ready():
 	super()
diff --git a/client/menu/main.tscn b/client/menu/main.tscn
index a11744be..10dfcc21 100644
--- a/client/menu/main.tscn
+++ b/client/menu/main.tscn
@@ -1,4 +1,4 @@
-[gd_scene load_steps=9 format=3 uid="uid://dbj8508whxgwv"]
+[gd_scene load_steps=10 format=3 uid="uid://dbj8508whxgwv"]
 
 [ext_resource type="Theme" uid="uid://b0qmvo504e457" path="res://menu/theme/theme/theme.tres" id="1_3qfu3"]
 [ext_resource type="Script" uid="uid://bpiynadrmdd37" path="res://menu/main.gd" id="2_xjnc3"]
@@ -7,6 +7,7 @@
 [ext_resource type="Script" uid="uid://cmncjc06kadpe" path="res://menu/auto_setup/blur_setup.gd" id="5_0mn56"]
 [ext_resource type="FontFile" uid="uid://bo4vh5xkpvrh1" path="res://menu/theme/fonts/font-sansita-swashed.woff2" id="5_k7bqq"]
 [ext_resource type="StyleBox" uid="uid://bw4jamyna1top" path="res://menu/theme/style/panel_style_sidebar.tres" id="5_qlyeo"]
+[ext_resource type="Script" uid="uid://byshs20og68tn" path="res://menu/smart_margin_container.gd" id="7_btdj1"]
 
 [sub_resource type="FontVariation" id="FontVariation_htgmg"]
 base_font = ExtResource("5_k7bqq")
@@ -40,6 +41,7 @@ theme_override_constants/margin_left = 20
 theme_override_constants/margin_top = 20
 theme_override_constants/margin_right = 20
 theme_override_constants/margin_bottom = 20
+script = ExtResource("7_btdj1")
 
 [node name="options" type="VBoxContainer" parent="side/margin"]
 layout_mode = 2
diff --git a/client/menu/play.tscn b/client/menu/play.tscn
index db3a6bad..6a7d5fdd 100644
--- a/client/menu/play.tscn
+++ b/client/menu/play.tscn
@@ -1,8 +1,9 @@
-[gd_scene load_steps=8 format=3 uid="uid://c8url5fpttbem"]
+[gd_scene load_steps=9 format=3 uid="uid://c8url5fpttbem"]
 
 [ext_resource type="Theme" uid="uid://b0qmvo504e457" path="res://menu/theme/theme/theme.tres" id="1_cckds"]
 [ext_resource type="Script" uid="uid://b126k2228nj4s" path="res://menu/play.gd" id="2_phxx0"]
 [ext_resource type="Material" uid="uid://2j8a0c0a2ta5" path="res://menu/theme/materials/blur_material.tres" id="3_fsbt7"]
+[ext_resource type="Script" uid="uid://byshs20og68tn" path="res://menu/smart_margin_container.gd" id="4_gst6r"]
 [ext_resource type="Script" uid="uid://bd7bylb2t2m0" path="res://menu/auto_setup/scroll_container_custom.gd" id="5_cm120"]
 [ext_resource type="FontFile" uid="uid://bo4vh5xkpvrh1" path="res://menu/theme/fonts/font-sansita-swashed.woff2" id="5_ojpbf"]
 
@@ -38,6 +39,7 @@ theme_override_constants/margin_left = 20
 theme_override_constants/margin_top = 20
 theme_override_constants/margin_right = 20
 theme_override_constants/margin_bottom = 20
+script = ExtResource("4_gst6r")
 
 [node name="options" type="VBoxContainer" parent="side/margin"]
 layout_mode = 2
diff --git a/client/menu/popup.tscn b/client/menu/popup.tscn
index 76bcb784..bb40bc45 100644
--- a/client/menu/popup.tscn
+++ b/client/menu/popup.tscn
@@ -1,8 +1,9 @@
-[gd_scene load_steps=5 format=3 uid="uid://lwtym0pbc17g"]
+[gd_scene load_steps=6 format=3 uid="uid://lwtym0pbc17g"]
 
 [ext_resource type="Theme" uid="uid://b0qmvo504e457" path="res://menu/theme/theme/theme.tres" id="1_m0d0r"]
 [ext_resource type="Script" uid="uid://bevyiytj5tawr" path="res://menu/popup.gd" id="2_1h10j"]
 [ext_resource type="Material" uid="uid://beea1pc5nt67r" path="res://menu/theme/materials/dark_blur_material.tres" id="3_iouvy"]
+[ext_resource type="Script" uid="uid://byshs20og68tn" path="res://menu/smart_margin_container.gd" id="3_j0ajn"]
 [ext_resource type="Script" uid="uid://cmncjc06kadpe" path="res://menu/auto_setup/blur_setup.gd" id="4_e4iqk"]
 
 [node name="Popup" type="Control"]
@@ -16,32 +17,36 @@ theme = ExtResource("1_m0d0r")
 script = ExtResource("2_1h10j")
 support_anim = false
 
-[node name="CenterContainer" type="CenterContainer" parent="."]
+[node name="MarginContainer" type="MarginContainer" parent="."]
 layout_mode = 1
 anchors_preset = 15
 anchor_right = 1.0
 anchor_bottom = 1.0
 grow_horizontal = 2
 grow_vertical = 2
+script = ExtResource("3_j0ajn")
 
-[node name="Panel" type="PanelContainer" parent="CenterContainer"]
+[node name="CenterContainer" type="CenterContainer" parent="MarginContainer"]
+layout_mode = 2
+
+[node name="Panel" type="PanelContainer" parent="MarginContainer/CenterContainer"]
 material = ExtResource("3_iouvy")
 layout_mode = 2
 script = ExtResource("4_e4iqk")
 
-[node name="MarginContainer" type="MarginContainer" parent="CenterContainer/Panel"]
+[node name="MarginContainer" type="MarginContainer" parent="MarginContainer/CenterContainer/Panel"]
 layout_mode = 2
 
-[node name="VBoxContainer" type="VBoxContainer" parent="CenterContainer/Panel/MarginContainer"]
+[node name="VBoxContainer" type="VBoxContainer" parent="MarginContainer/CenterContainer/Panel/MarginContainer"]
 layout_mode = 2
 theme_override_constants/separation = 16
 
-[node name="Message" type="Label" parent="CenterContainer/Panel/MarginContainer/VBoxContainer"]
+[node name="Message" type="Label" parent="MarginContainer/CenterContainer/Panel/MarginContainer/VBoxContainer"]
 custom_minimum_size = Vector2(400, 0)
 layout_mode = 2
 horizontal_alignment = 1
 autowrap_mode = 3
 
-[node name="HBoxContainer" type="HBoxContainer" parent="CenterContainer/Panel/MarginContainer/VBoxContainer"]
+[node name="HBoxContainer" type="HBoxContainer" parent="MarginContainer/CenterContainer/Panel/MarginContainer/VBoxContainer"]
 layout_mode = 2
 alignment = 1
diff --git a/client/menu/settings.gd b/client/menu/settings.gd
index 60113eb4..32da54cc 100644
--- a/client/menu/settings.gd
+++ b/client/menu/settings.gd
@@ -16,6 +16,7 @@
 extends Menu
 
 @onready var container = $OuterGap/Panel/InnerGap/VBoxContainer
+@onready var outer_gap = $OuterGap
 
 func _ready():
 	super()
@@ -24,10 +25,12 @@ func _ready():
 	container.move_child(row, 1)
 
 func _process(_dt):
-	# TODO probably bad perfance, only update on change
+	var os := OS.get_name()
+	if os == "iOS" or os == "Android": return
+	# TODO probably bad performance, only update on change
 	var margin = max((self.size.x - 1200) / 2, 20)
-	$OuterGap.add_theme_constant_override("margin_left", margin)
-	$OuterGap.add_theme_constant_override("margin_right", margin)
+	outer_gap.add_theme_constant_override("margin_left", margin)
+	outer_gap.add_theme_constant_override("margin_right", margin)
 
 func _on_back_pressed():
 	exit()
diff --git a/client/menu/settings.tscn b/client/menu/settings.tscn
index dfb27d7d..66571533 100644
--- a/client/menu/settings.tscn
+++ b/client/menu/settings.tscn
@@ -1,8 +1,9 @@
-[gd_scene load_steps=5 format=3 uid="uid://8ic77jmadadj"]
+[gd_scene load_steps=6 format=3 uid="uid://8ic77jmadadj"]
 
 [ext_resource type="Theme" uid="uid://b0qmvo504e457" path="res://menu/theme/theme/theme.tres" id="1_foq3a"]
 [ext_resource type="Script" uid="uid://bbqmsf8u5rhtn" path="res://menu/settings.gd" id="2_3hgm8"]
 [ext_resource type="Material" uid="uid://beea1pc5nt67r" path="res://menu/theme/materials/dark_blur_material.tres" id="3_8nykw"]
+[ext_resource type="Script" uid="uid://byshs20og68tn" path="res://menu/smart_margin_container.gd" id="3_lwjig"]
 [ext_resource type="Script" uid="uid://cmncjc06kadpe" path="res://menu/auto_setup/blur_setup.gd" id="4_v6q3y"]
 
 [node name="SettingsMenu" type="Control"]
@@ -23,6 +24,8 @@ anchor_right = 1.0
 anchor_bottom = 1.0
 grow_horizontal = 2
 grow_vertical = 2
+theme_override_constants/margin_left = 80
+script = ExtResource("3_lwjig")
 
 [node name="Panel" type="Panel" parent="OuterGap"]
 material = ExtResource("3_8nykw")
diff --git a/client/menu/smart_margin_container.gd b/client/menu/smart_margin_container.gd
new file mode 100644
index 00000000..43fd4c4f
--- /dev/null
+++ b/client/menu/smart_margin_container.gd
@@ -0,0 +1,41 @@
+# Hurry Curry! - a game about cooking
+# Copyright (C) 2025 Hurry Curry! contributors
+#
+# This program is free software: you can redistribute it and/or modify
+# it under the terms of the GNU Affero General Public License as published by
+# the Free Software Foundation, version 3 of the License only.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU Affero General Public License for more details.
+#
+# You should have received a copy of the GNU Affero General Public License
+# along with this program.  If not, see <https://www.gnu.org/licenses/>.
+#
+extends MarginContainer
+class_name SmartMarginContainer
+# A smart margin container which automatically 
+
+func _ready() -> void:
+	var os := OS.get_name()
+	if os == "iOS" or os == "Android":
+		update_margins()
+
+func update_margins() -> void:
+	var screen_safe_rect := Rect2(DisplayServer.get_display_safe_area())
+	var viewport_transform := get_viewport().get_final_transform()
+	var viewport_safe_rect := screen_safe_rect * viewport_transform.affine_inverse()
+	var viewport_full_rect := get_viewport().get_visible_rect()
+	var left := viewport_safe_rect.position.x - viewport_full_rect.position.x
+	var top := viewport_safe_rect.position.y - viewport_full_rect.position.y
+	var right := viewport_full_rect.end.x - viewport_safe_rect.end.x
+	var bottom := viewport_full_rect.end.y - viewport_safe_rect.end.y
+	print("OLD: ", get_theme_constant("margin_left"))
+	begin_bulk_theme_override()
+	add_theme_constant_override('margin_left', roundi(left) + get_theme_constant("margin_left"))
+	add_theme_constant_override('margin_top', roundi(top) + get_theme_constant("margin_top"))
+	add_theme_constant_override('margin_right', roundi(right) + get_theme_constant("margin_right"))
+	add_theme_constant_override('margin_bottom', roundi(bottom) + get_theme_constant("margin_bottom"))
+	end_bulk_theme_override()
+	print("NEW: ", get_theme_constant("margin_left"))
diff --git a/client/menu/smart_margin_container.gd.uid b/client/menu/smart_margin_container.gd.uid
new file mode 100644
index 00000000..c5246aed
--- /dev/null
+++ b/client/menu/smart_margin_container.gd.uid
@@ -0,0 +1 @@
+uid://byshs20og68tn