From eb81fdfb2c95eb6ec74c4d3ec699a3c2b5f5f885 Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Sun, 24 Apr 2022 21:48:27 -0500
Subject: [PATCH] Fixed separators getting cut off if the tab on the left can
 be scrolled This also required some cleanup around the stick CSS

---
 src/components/Game.vue          | 13 +++----------
 src/components/layout/Sticky.vue | 13 +------------
 src/features/tabs/TabFamily.vue  | 23 ++++++-----------------
 3 files changed, 10 insertions(+), 39 deletions(-)

diff --git a/src/components/Game.vue b/src/components/Game.vue
index ca992ad..570706f 100644
--- a/src/components/Game.vue
+++ b/src/components/Game.vue
@@ -11,7 +11,6 @@
                 />
                 <component :is="tab" :index="index" v-else />
             </div>
-            <div class="separator" v-if="index !== tabs.length - 1"></div>
         </div>
     </div>
 </template>
@@ -66,14 +65,8 @@ function gatherLayerProps(layer: GenericLayer) {
     flex-grow: 1;
 }
 
-.separator {
-    position: absolute;
-    right: -4px;
-    top: 0;
-    bottom: 0;
-    width: 8px;
-    background: var(--outline);
-    z-index: 1;
+.tab + .tab > .inner-tab {
+    border-left: solid 4px var(--outline);
 }
 </style>
 
@@ -82,7 +75,7 @@ function gatherLayerProps(layer: GenericLayer) {
     height: 4px;
     border: none;
     background: var(--outline);
-    margin: var(--feature-margin) -10px;
+    margin: var(--feature-margin) 0;
 }
 
 .tab .modal-body hr {
diff --git a/src/components/layout/Sticky.vue b/src/components/layout/Sticky.vue
index 5413d36..4a598d4 100644
--- a/src/components/layout/Sticky.vue
+++ b/src/components/layout/Sticky.vue
@@ -43,18 +43,7 @@ onMounted(() => {
 .sticky {
     position: sticky;
     background: var(--background);
-    margin-left: -10px;
-    margin-right: -10px;
-    padding-left: 10px;
-    padding-right: 10px;
-    width: 100%;
+    width: calc(100% - 2px);
     z-index: 3;
 }
-
-.modal-body .sticky {
-    margin-left: 0;
-    margin-right: 0;
-    padding-left: 0;
-    padding-right: 0;
-}
 </style>
diff --git a/src/features/tabs/TabFamily.vue b/src/features/tabs/TabFamily.vue
index 72ccd8b..4d52ab8 100644
--- a/src/features/tabs/TabFamily.vue
+++ b/src/features/tabs/TabFamily.vue
@@ -168,29 +168,22 @@ export default defineComponent({
     margin-bottom: 20px;
 }
 
-.tab-family-container .sticky {
-    margin-left: -3px !important;
-    margin-right: -3px !important;
-}
-
 .tab-buttons-container {
-    width: calc(100% - 14px);
     z-index: 4;
 }
 
 .tab-buttons-container:not(.floating) {
-    border-top: solid 4px;
     border-bottom: solid 4px;
     border-color: inherit;
 }
 
+:not(.layer-tab):not(.modal-body) > .tab-family-container > .tab-buttons-container:not(.floating) {
+    width: calc(100% + 6px);
+    margin-left: -3px;
+}
+
 .tab-buttons-container:not(.floating) .tab-buttons {
-    width: calc(100% + 14px);
-    margin-left: -7px;
-    margin-right: -7px;
-    box-sizing: border-box;
     text-align: left;
-    padding-left: 14px;
     margin-bottom: -4px;
 }
 
@@ -239,11 +232,7 @@ export default defineComponent({
     > .tab-family-container
     > .tab-buttons-container:not(.floating):first-child
     .tab-buttons {
-    padding-left: 2px;
-}
-
-.tab-buttons-container:not(.floating):first-child {
-    border-top: 0;
+    padding-left: 0;
 }
 
 .minimizable > .tab-buttons-container:not(.floating):first-child {