UX: Modernize spacing a bit (#145)

scss/box-view.scss

@@ -18,20 +18,23 @@
 }
 
 .has-full-page-chat .chat-replying-indicator-container {
-  margin-bottom: var(--d-border-radius-large);
-  @include breakpoint(tablet) {
+  margin-bottom: var(--main-grid-gap);
+  @include breakpoint(medium) {
     margin-bottom: 0;
   }
 }
 
 .has-full-page-chat .chat-selection-management {
-  margin-bottom: var(--d-border-radius-large);
-  @include breakpoint(tablet) {
+  margin-bottom: var(--main-grid-gap);
+  @include breakpoint(medium) {
     margin-bottom: 0;
   }
 }
 
 .experimental-screen {
+  @include breakpoint(medium) {
+    display: none;
+  }
   max-width: unset !important;
   width: 100%;
   display: block;
@@ -83,7 +86,7 @@
   }
   &__bottom-left {
     transform: rotate(-90deg);
-    bottom: var(--d-border-radius-large);
+    bottom: var(--main-grid-gap);
     left: var(--left-distance);
     @media screen and (max-width: 768px) {
       bottom: calc(var(--d-border-radius-large) * 2);
@@ -91,7 +94,7 @@
   }
   &__bottom-right {
     transform: rotate(180deg);
-    bottom: var(--d-border-radius-large);
+    bottom: var(--main-grid-gap);
     left: calc(var(--right-distance) - var(--d-border-radius-large));
     @media screen and (max-width: 768px) {
       bottom: calc(var(--d-border-radius-large) * 2);
@@ -104,7 +107,7 @@
     background-color: var(--background-color);
     bottom: 0;
     left: var(--left-distance);
-    height: var(--d-border-radius-large);
+    height: var(--main-grid-gap);
     @media screen and (max-width: 768px) {
       height: calc(var(--d-border-radius-large) * 2);
     }

scss/header.scss

@@ -2,7 +2,7 @@
   box-shadow: none;
   background: var(--background-color);
   @include breakpoint(extra-large, $rule: min-width) {
-    padding-bottom: 1em;
+    padding-bottom: var(--main-grid-gap);
   }
 }
 

scss/main.scss

@@ -1,5 +1,5 @@
 :root {
-  --main-grid-gap: 2em;
+  --main-grid-gap: 0.5em;
 }
 
 html:not(:has(.has-full-page-chat)) {