From 3b88ae8316c55a775ed49aa9b38ed0e8b6ced47d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Hlusi=C4=8Dka?= <Limeth@users.noreply.github.com>
Date: Thu, 1 Jan 2026 03:07:13 +0100
Subject: [PATCH] Add padding to GUI to align it to the screen

---
 firmware2/ui/main.slint | 64 ++++++++++++++++++++++++-----------------
 1 file changed, 37 insertions(+), 27 deletions(-)

diff --git a/firmware2/ui/main.slint b/firmware2/ui/main.slint
index 0ae7253..33c4f23 100644
--- a/firmware2/ui/main.slint
+++ b/firmware2/ui/main.slint
@@ -1,40 +1,50 @@
 import { Button, VerticalBox, LineEdit, GridBox } from "std-widgets.slint";
 
 export component AppWindow inherits Window {
-    y: 0px;
-    in-out property <int> counter: 42;
     default-font-family: "IBM Plex Sans";
     default-font-size: 16pt;
+    height: 368px;
+    width: 960px;
+    in-out property <int> counter: 42;
     callback request-increase-value();
-    GridBox {
-        height: 240px;
-        padding: 0px;
-        padding-top: 8px;
+    VerticalBox {
         width: 960px;
-        VerticalBox {
-            Text {
-                text: "Counter: \{root.counter}";
-            }
+        height: 368px;
+        padding: 0px;
+        // These off-by-one values might be caused by incorrect timings.
+        padding-top: 121px;
+        padding-bottom: 7px;
+        Rectangle {
+            background: #2c82ff;
+            border-color: #ffcf00;
+            border-width: 1px;
+            GridBox {
+                VerticalBox {
+                    Text {
+                        text: "Counter: \{root.counter}";
+                    }
 
-            Button {
-                text: "Increase value";
-                clicked => {
-                    root.request-increase-value();
+                    Button {
+                        text: "Increase value";
+                        clicked => {
+                            root.request-increase-value();
+                        }
+                    }
+
+                    LineEdit {
+                        input-type: InputType.password;
+                        text: "LineEdit";
+                    }
+                }
+
+                Button {
+                    text: "Button";
+                }
+
+                Button {
+                    text: "Button";
                 }
             }
-
-            LineEdit {
-                input-type: InputType.password;
-                text: "LineEdit";
-            }
-        }
-
-        Button {
-            text: "Button";
-        }
-
-        Button {
-            text: "Button";
         }
     }
 }