From 951dbbd87f3268cc4ecf539eee1d60c27546c6e5 Mon Sep 17 00:00:00 2001
From: Aleksander <aleksander@oo8.dev>
Date: Tue, 30 Jun 2026 17:26:52 +0200
Subject: [PATCH] dash-frontend: Welcome screen: Improve UX

---
 dash-frontend/assets/gui/dashboard.xml          |  2 +-
 dash-frontend/assets/gui/tab/welcome.xml        | 16 +++++++++-------
 dash-frontend/assets/gui/tab/welcome_common.xml |  2 +-
 dash-frontend/assets/gui/tab/welcome_page_0.xml |  2 ++
 dash-frontend/src/frontend.rs                   | 10 +++++++++-
 dash-frontend/src/tab/mod.rs                    |  9 +++++++++
 6 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/dash-frontend/assets/gui/dashboard.xml b/dash-frontend/assets/gui/dashboard.xml
index 8f2b05f4..c1ac0ddb 100644
--- a/dash-frontend/assets/gui/dashboard.xml
+++ b/dash-frontend/assets/gui/dashboard.xml
@@ -98,11 +98,11 @@
             <div
               id="content"
               flex_direction="column"
-              padding="16"
               gap="8"
               width="100%"
               height="100%"
             >
+              <!-- padding set at runtime -->
               <!-- filled-in at runtime -->
             </div>
           </div>
diff --git a/dash-frontend/assets/gui/tab/welcome.xml b/dash-frontend/assets/gui/tab/welcome.xml
index 19a22bca..dbc9de7f 100644
--- a/dash-frontend/assets/gui/tab/welcome.xml
+++ b/dash-frontend/assets/gui/tab/welcome.xml
@@ -4,18 +4,20 @@
   </template>
   
   <elements>
-    <div flex_direction="column" flex_grow="1" gap="16" align_items="center" overflow_y="hidden">
+    <div position="relative" flex_grow="1">
       <!-- Content -->
-      <div id="content" flex_direction="column" flex_grow="1" align_items="center" justify_content="center" gap="16" overflow_y="scroll" width="100%">
+      <div position="absolute" id="content" flex_direction="column" flex_grow="1" align_items="center" justify_content="center" gap="16" width="100%" height="100%">
         <!-- filled-in at runtime -->
       </div>
       <!-- Page buttons -->
-      <div flex_direction="row" gap="8" align_items="center">
-        <Button id="btn_prev" width="32" height="32" round="100%" sprite_src_builtin="dashboard/arrow_left.svg" />
-        <div id="pips" gap="4" align_items="center">
-          <!-- filled-in at runtime -->
+      <div position="absolute" align_self="end" justify_self="end" width="100%" flex_direction="column" align_items="center" margin_bottom="8">
+        <div flex_direction="row" gap="8" align_items="center">
+          <Button id="btn_prev" width="32" height="32" round="100%" sprite_src_builtin="dashboard/arrow_left.svg" />
+          <div id="pips" gap="4" align_items="center">
+            <!-- filled-in at runtime -->
+          </div>
+          <Button id="btn_next" width="32" height="32" round="100%" sprite_src_builtin="dashboard/arrow_right.svg" />
         </div>
-        <Button id="btn_next" width="32" height="32" round="100%" sprite_src_builtin="dashboard/arrow_right.svg" />
       </div>
     </div>
   </elements>
diff --git a/dash-frontend/assets/gui/tab/welcome_common.xml b/dash-frontend/assets/gui/tab/welcome_common.xml
index 97a8134c..58cb89fd 100644
--- a/dash-frontend/assets/gui/tab/welcome_common.xml
+++ b/dash-frontend/assets/gui/tab/welcome_common.xml
@@ -14,5 +14,5 @@
 
   <macro name="video_overlay_component" looping="1" width="100%" height="auto" max_height="100%" aspect_ratio="1.777777" position="relative"/>
 
-  <macro name="video_overlay_content" new_pass="1" position="absolute" width="100%" height="100%"/>
+  <macro name="video_overlay_content" new_pass="1" position="absolute" width="100%" height="100%" padding_bottom="32"/>
 </layout>
diff --git a/dash-frontend/assets/gui/tab/welcome_page_0.xml b/dash-frontend/assets/gui/tab/welcome_page_0.xml
index ae29c5d2..d5961ae6 100644
--- a/dash-frontend/assets/gui/tab/welcome_page_0.xml
+++ b/dash-frontend/assets/gui/tab/welcome_page_0.xml
@@ -9,5 +9,7 @@
     
     <label size="20" margin_top="16" text="Let us guide you through your first steps."/>
     <label size="20" text="Press &quot;Next&quot; button below to get started."/>
+
+    <div height="42"/> <!-- empty space -->
   </elements>
 </layout>
diff --git a/dash-frontend/src/frontend.rs b/dash-frontend/src/frontend.rs
index 0b1f9bb0..4de9329c 100644
--- a/dash-frontend/src/frontend.rs
+++ b/dash-frontend/src/frontend.rs
@@ -5,12 +5,14 @@ use glam::Vec2;
 use wgui::{
 	assets::{AssetPath, AssetProvider},
 	components::button::ComponentButton,
+	event::StyleSetRequest,
 	font_config::WguiFontConfig,
 	globals::WguiGlobals,
 	i18n::Translation,
-	layout::{Layout, LayoutParams, LayoutUpdateParams, LayoutUpdateResult, WidgetID},
+	layout::{Layout, LayoutParams, LayoutTask, LayoutUpdateParams, LayoutUpdateResult, WidgetID},
 	parser::{Fetchable, ParseDocumentParams, ParserState},
 	renderer_vk::text::custom_glyph::CustomGlyphData,
+	taffy::{self},
 	task::Tasks,
 	theme::WguiTheme,
 	widget::{label::WidgetLabel, rectangle::WidgetRectangle, sprite::WidgetSprite},
@@ -392,6 +394,12 @@ impl<T: 'static> Frontend<T> {
 		let widget_content = self.state.fetch_widget(&self.layout.state, "content")?;
 		self.layout.remove_children(widget_content.id);
 
+		let padding = tab_type.get_preferred_padding();
+		self.layout.tasks.push(LayoutTask::SetWidgetStyle(
+			widget_content.id,
+			StyleSetRequest::Padding(taffy::Rect::length(padding)),
+		));
+
 		let (tab_translation, icon_path) = match tab_type {
 			TabType::Welcome => ("GETTING_STARTED", "dashboard/welcome.svg"),
 			TabType::Home => ("HOME_SCREEN", "dashboard/home.svg"),
diff --git a/dash-frontend/src/tab/mod.rs b/dash-frontend/src/tab/mod.rs
index 915019dc..9418c843 100644
--- a/dash-frontend/src/tab/mod.rs
+++ b/dash-frontend/src/tab/mod.rs
@@ -17,6 +17,15 @@ pub enum TabType {
 	Welcome,
 }
 
+impl TabType {
+	pub fn get_preferred_padding(&self) -> f32 {
+		match self {
+			TabType::Welcome => 0.0,
+			_ => 16.0,
+		}
+	}
+}
+
 pub trait Tab<T> {
 	#[allow(dead_code)]
 	fn get_type(&self) -> TabType;