fix(board): correct container gap

chore(board): simplify style organization

Author: nikku

packages/board/src/Taskboard.scss

@@ -46,6 +46,7 @@
   overflow-x: auto;
 
   margin-top: 0;
+  padding: 0 var(--container-gap);
   gap: var(--container-gap);
 }
 
@@ -57,13 +58,13 @@
   border-radius: .25rem;
   background: #ebecf0;
 
-  --container-gap: .7rem;
-
   &.collapsed {
     min-width: 3rem;
 
     flex: 0;
   }
+
+  margin-bottom: var(--container-gap);
 }
 
 .taskboard-column-items {
@@ -143,6 +144,10 @@
   padding: 0 .25em;
 }
 
-.card-container + .card-container {
-  margin-top: var(--container-gap);
+.card-container {
+  margin: var(--container-gap);
+}
+
+.card-container:first-child {
+  margin-top: 0;
 }

packages/board/src/components/HintList.svelte

@@ -64,18 +64,27 @@
     max-height: 200px;
     overflow-y: auto;
     padding: 0;
+    margin: 0;
   }
 
   .hint-list:not(:first-child) {
     margin-top: 0;
   }
 
   .hint-list li {
-    margin: 0;
+    margin: 0 var(--container-gap);
+  }
+
+  .hint-list li:first-child {
+    margin-top: var(--container-gap);
+  }
+
+  .hint-list li:last-child {
+    margin-bottom: var(--container-gap);
   }
 
   .hint-list li a {
-    padding: .25rem .35rem;
+    padding: calc(var(--container-gap) / 2) var(--container-gap);
     width: 100%;
     display: block;
     border-radius: 5px;

packages/board/src/style/_style.scss

@@ -43,16 +43,4 @@
 // @import "bootstrap/scss/utilities/_screenreaders";
 // @import "bootstrap/scss/utilities/_sizing";
 @import "bootstrap/scss/utilities/_spacing";
-// @import "bootstrap/scss/print";
-
-
-// theme customizations
-
-html {
-  font-size: .9rem;
-}
-
-
-.avatar img {
-  vertical-align: unset;
-}
+// @import "bootstrap/scss/print";

packages/board/src/style/_bootstrap.scss packages/board/src/style/bootstrap.scsspackages/board/src/style/_bootstrap.scss renamed to packages/board/src/style/bootstrap.scss

@@ -1,16 +1,39 @@
 @import "./variables";
-@import "./_bootstrap";
-
-@import "./_style";
+@import "./bootstrap";
 
 @import "@bpmn-io/draggle/dist/dragula";
 
-/* Fix drag container scrolling */
+html,
+body {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+// fix drag container scrolling
 .gu-mirror {
   pointer-events: none;
 }
 
+// theme customizations
+
 .navbar-brand {
   padding: 0;
   margin: 0;
+}
+
+html {
+  font-size: .9rem;
+}
+
+.avatar img {
+  vertical-align: unset;
+}
+
+.scroll-container-h,
+.scroll-container-v {
+  --container-gap: 0.5rem;
+
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, .25) transparent;
 }