From e7e1a4d66337525764b0b3a3531b468388e522b4 Mon Sep 17 00:00:00 2001
From: Adrien <me@adrien.run>
Date: Thu, 23 May 2024 08:45:51 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Use=20of=20border-box=20box=20si?=
 =?UTF-8?q?zing?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This makes calculating the size of the UI components easier, especially those which have padding, margin or border.
---
 src/ui/_base.scss                 | 9 +++++++++
 src/ui/components/_panel.scss     | 5 +++--
 src/ui/components/login.scss      | 2 +-
 src/ui/components/modal.scss      | 2 +-
 src/ui/components/text_input.scss | 9 +++------
 5 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/ui/_base.scss b/src/ui/_base.scss
index 2ee904d..9bf236c 100644
--- a/src/ui/_base.scss
+++ b/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;
diff --git a/src/ui/components/_panel.scss b/src/ui/components/_panel.scss
index ef24da3..9dc3efd 100644
--- a/src/ui/components/_panel.scss
+++ b/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));
-    width: calc(100% - (2 * $padding-h) - (2 * $border-big-width));
+    height: 100%;
+    width: 100%;
+
     flex-shrink: 0;
 
     border: $border-big;
diff --git a/src/ui/components/login.scss b/src/ui/components/login.scss
index 0c23b7e..8953a3a 100644
--- a/src/ui/components/login.scss
+++ b/src/ui/components/login.scss
@@ -73,7 +73,7 @@
         overflow: hidden;
 
         &__content {
-            height: calc(100% + (2 * $border-normal-width));
+            height: 100%;
             aspect-ratio: 1;
         }
     }
diff --git a/src/ui/components/modal.scss b/src/ui/components/modal.scss
index c6db37a..6c7ae37 100644
--- a/src/ui/components/modal.scss
+++ b/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%;
             }
 
diff --git a/src/ui/components/text_input.scss b/src/ui/components/text_input.scss
index d83cba6..ce09044 100644
--- a/src/ui/components/text_input.scss
+++ b/src/ui/components/text_input.scss
@@ -3,17 +3,14 @@
 %base-text-input {
     $horizontal-padding: 1vw;
 
-    height: calc(100% - (2 * $border-normal-width));
-    width: calc(100% - (2 * $horizontal-padding));
+    height: 100%;
+    width: 100%;
 
     border: $border-normal;
     border-color: get-color(primary, 90);
     border-radius: $border-radius;
 
-    padding-left: $horizontal-padding;
-    padding-right: $horizontal-padding;
-    padding-top: 0px;
-    padding-bottom: 0px;
+    padding: 0px $horizontal-padding;
 }
 
 %base-input {