diff --git a/ui/round/css/_app-layout.scss b/ui/round/css/_app-layout.scss
index 49fb803df92d..2479f581cf3b 100644
--- a/ui/round/css/_app-layout.scss
+++ b/ui/round/css/_app-layout.scss
@@ -61,7 +61,7 @@
 
     .rclock-bottom {
       grid-area: 6 / 1 / 8 / 2;
-      margin-top: $col1-bottom-clock-top-margin;
+      margin-top: -$col1-bottom-clock-shift-up;
     }
 
     cg-board {
diff --git a/ui/round/css/_constants.scss b/ui/round/css/_constants.scss
index 3f02298e63df..3b10925a3e5a 100644
--- a/ui/round/css/_constants.scss
+++ b/ui/round/css/_constants.scss
@@ -1,17 +1,16 @@
 // layout
-$col1-player-clock-height: 50px;
-$bottom-clock-shift-up-percent: 0.06;
 // todo:
-    // use this new percent variable to ideally clean up code a bit.
     // review your changes, see if they make sense
     // take screenshots of the clocks, and compare against screenshots of master.
         // look at positionings of username and material too.
-$col1-bottom-clock-top-margin: -3px;
-$col1-bottom-clock-height: 47px;
-$col1-user-height: $col1-player-clock-height * 3 / 5;
-$col1-mat-height: $col1-player-clock-height * 2 / 5;
-$col1-bottom-user-height: $col1-bottom-clock-height * 3 / 5;
-$col1-bottom-mat-height: $col1-bottom-clock-height * 2 / 5;
+$user-to-clock-size: 3 / 5;
+$col1-player-clock-height: 50px;
+$col1-bottom-clock-shift-up: 3px;
+$col1-bottom-clock-technical-height: $col1-player-clock-height - $col1-bottom-clock-shift-up;
+$col1-user-height: $col1-player-clock-height * $user-to-clock-size;
+$col1-mat-height: $col1-player-clock-height - $col1-user-height;
+$col1-bottom-user-height: $col1-bottom-clock-technical-height * $user-to-clock-size;
+$col1-bottom-mat-height: $col1-bottom-clock-technical-height - $col1-bottom-user-height;
 $col1-moves-height: 4em;
 $move-tag: 'kwdb';
 $rmoves-tag: 'rm6';