From a7582851b431ab9e93a3e4d33f723c7a1cfd228c Mon Sep 17 00:00:00 2001
From: E44 <129310925+programmer-44@users.noreply.github.com>
Date: Wed, 10 Jun 2026 20:10:15 +0200
Subject: [PATCH] fix(display): display cursor movements adapts to window
 resizing

closes #49
---
 shared/splash_screen.html | 55 +++++++++++++++++++++++++++++----------
 1 file changed, 41 insertions(+), 14 deletions(-)

diff --git a/shared/splash_screen.html b/shared/splash_screen.html
index ab49ec4..3224cb5 100644
--- a/shared/splash_screen.html
+++ b/shared/splash_screen.html
@@ -170,15 +170,8 @@
 
   <span id="version-label" aria-label="Version">%%APP-VERSION%%</span>
 
-  <div class="fade-in">
-    <div
-      class="cursor-x"
-      style="
-        position: absolute;
-        left: calc(50cqw + var(--mouse-start-x));
-        top: calc(50cqh + var(--mouse-start-y));
-      "
-    >
+  <div class="fade-in cursor-layer" aria-hidden="true">
+    <div class="cursor-x">
       <svg class="cursor-y" width="50" height="50" viewBox="0 0 24 24">
         <g
           stroke="#ffffff"
@@ -223,8 +216,6 @@
 
     --mouse-size: 50px;
     --mouse-bounce-delay: 5s;
-    --mouse-start-x: calc((35 * 100vw) / 1920);
-    --mouse-start-y: calc((60 * 100vh) / 1080);
 
     --dur-x: 16s;
     --dur-y: 9s;
@@ -254,8 +245,12 @@
     align-items: center;
     justify-content: center;
     z-index: 9999;
-    height: 100vh;
-    width: 100vw;
+
+    width: 100dvw;
+    height: 100dvh;
+    overflow: hidden;
+
+    container: splash / size;
 
     animation-name: splash-fade;
     animation-duration: 1s;
@@ -342,7 +337,23 @@
     animation: start-button-hover-press 1s ease-in-out 450ms forwards;
   }
 
+  .cursor-layer {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+    pointer-events: none;
+
+    --mouse-start-x: calc(100cqw * 35 / 1920);
+    --mouse-start-y: calc(100cqh * 60 / 1080);
+  }
+
   .cursor-x {
+    position: absolute;
+    left: calc(50cqw + var(--mouse-start-x));
+    top: calc(50cqh + var(--mouse-start-y));
+    width: var(--mouse-size);
+    height: var(--mouse-size);
+
     animation-name: move-mouse, mouse-bounceX;
     animation-duration: 1s, var(--dur-x);
     animation-delay: 0s, var(--mouse-bounce-delay);
@@ -354,6 +365,10 @@
   }
 
   .cursor-y {
+    width: 100%;
+    height: 100%;
+    display: block;
+
     animation-name: mouse-bounceY;
     animation-duration: var(--dur-y);
     animation-delay: var(--mouse-bounce-delay);
@@ -364,6 +379,10 @@
     will-change: transform;
   }
 
+  .cursor-y * {
+    vector-effect: non-scaling-stroke;
+  }
+
   @keyframes fade-in {
     to {
       opacity: 1;
@@ -383,7 +402,7 @@
       transform: translateX(0px);
     }
   }
-
+  
   @keyframes mouse-bounceX {
     0% {
       transform: translateX(0);
@@ -398,6 +417,10 @@
         calc(50cqw - var(--mouse-size) - var(--mouse-start-x))
       );
     }
+
+    100% {
+      transform: translateX(0);
+    }
   }
 
   @keyframes mouse-bounceY {
@@ -414,6 +437,10 @@
         calc(50cqh - var(--mouse-size) - var(--mouse-start-y))
       );
     }
+
+    100% {
+      transform: translateY(0);
+    }
   }
 
   @keyframes start-button-hover-press {