💄 Use of border-box box sizing

This makes calculating the size of the UI components easier, especially those which have padding, margin or border.

src/ui/_base.scss

@@ -194,9 +194,18 @@ $transition-duration: 300ms;
     font-weight: bold;
 }
 
+// Cf. https://css-tricks.com/box-sizing/
+html {
+  box-sizing: border-box;
+}
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
 body {
     height: 100vh;
     width: 100vw;
+
     margin: 0px;
     padding: 0px;
     outline: 0px;

src/ui/components/_panel.scss

@@ -5,8 +5,9 @@ $panel-aspect-ratio: 1/1.618;
 @mixin panel($padding-v: 2%, $padding-h: 2%) {
     padding: $padding-v $padding-h;
 
-    height: calc(100% - (2 * $padding-v) - (2 * $border-big-width));
+    height: 100%;
-    width: calc(100% - (2 * $padding-h) - (2 * $border-big-width));
+    width: 100%;
+
     flex-shrink: 0;
 
     border: $border-big;

src/ui/components/login.scss

@@ -73,7 +73,7 @@
         overflow: hidden;
 
         &__content {
-            height: calc(100% + (2 * $border-normal-width));
+            height: 100%;
             aspect-ratio: 1;
         }
     }

src/ui/components/modal.scss

@@ -67,7 +67,7 @@ $modal-max-height: 55vh;
             border-radius: $border-radius;
 
             &__placeholder {
-                width: calc(100% + (2 * $border-normal-width));
+                width: 100%;
                 height: 100%;
             }
 

src/ui/components/text_input.scss

@@ -3,17 +3,14 @@
 %base-text-input {
     $horizontal-padding: 1vw;
 
-    height: calc(100% - (2 * $border-normal-width));
+    height: 100%;
-    width: calc(100% - (2 * $horizontal-padding));
+    width: 100%;
 
     border: $border-normal;
     border-color: get-color(primary, 90);
     border-radius: $border-radius;
 
-    padding-left: $horizontal-padding;
+    padding: 0px $horizontal-padding;
-    padding-right: $horizontal-padding;
-    padding-top: 0px;
-    padding-bottom: 0px;
 }
 
 %base-input {