Fix app border

kadiryazici · kadiryazici · commit 39dd0cf04e47 · 2023-02-09T17:49:45.000+03:00
diff --git a/index.html b/index.html
@@ -8,6 +8,8 @@
 
   <body>
     <div id="app"></div>
+    <!-- Using border on html or body does not look good because of vibrancy -->
+    <div id="app-border"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/src/assets/main.scss b/src/assets/main.scss
@@ -31,9 +31,8 @@ html {
   height: 100%;
   width: 100%;
   overflow: hidden;
-  @include borderRadiusOverflowHidden(8px);
   outline: none;
-  border: 1px solid var(--app-border);
+  @include borderRadiusOverflowHidden(8px);
 }
 
 body {
@@ -59,3 +58,13 @@ button, a {
   color: currentColor;
 }
 
+#app-border {
+  pointer-events: none;
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  border: 1px solid var(--app-border);
+  @include borderRadiusOverflowHidden(8px);
+}
