- set a mixin (short-border-vertical).

- FB fix

src/client/js/components/TopOfTableContents.jsx

@@ -76,6 +76,7 @@ const TopOfTableContents = (props) => {
           id="seen-user-list"
           data-user-ids-str="{{ page.seenUsers|slice(-15)|default([])|reverse|join(',') }}"
           data-sum-of-seen-users="{{ page.seenUsers.length|default(0) }}"
+          className="grw-seen-user-list ml-1 pl-1"
         >
         </div>
       </div>

src/client/js/components/User/SeenUserList.jsx

@@ -20,7 +20,7 @@ const SeenUserList = (props) => {
   const toggle = () => setPopoverOpen(!popoverOpen);
   const { pageContainer } = props;
   return (
-    <div className="grw-seen-user-list pl-2 ml-2">
+    <div>
       <Button id="po-seen-user" color="link" className="px-2">
         <span className="mr-1 footstamp-icon"><FootstampIcon /></span>
         <span className="seen-user-count">{pageContainer.state.countOfSeenUsers}</span>

src/client/styles/scss/_mixins.scss

@@ -221,6 +221,23 @@
   transition-duration: 300ms;
 }
 
+@mixin short-border-vertical($borderColor) {
+  position: relative;
+  &:not(:first-child) {
+    &::before {
+      position: absolute;
+      top: 12.5%;
+      left: 0;
+      z-index: 1;
+      width: 100%;
+      height: 75%;
+      margin-left: -1px;
+      content: '';
+      border-left: 1px solid $borderColor;
+    }
+  }
+}
+
 @mixin three-stranded-button($textColor, $borderColor, $bgColorHoverAndActive, $bgColor: white) {
   display: inline-flex;
   align-items: center;
@@ -232,21 +249,31 @@
   white-space: nowrap;
   background-color: $bgColor;
   border-color: $borderColor;
+
+  @include short-border-vertical($borderColor);
+
+  &.view-button,
+  &.edit-button {
+    .grw-three-stranded-button-icon {
+      margin-right: -0.25rem;
+    }
+  }
+  &.hackmd-button {
+    font-size: 12px;
+    letter-spacing: -0.6px;
+
+    .grw-three-stranded-button-icon {
+      margin-right: -0.1rem;
+    }
+  }
   &:not(:first-child) {
     margin-left: 0;
     border-left: none;
-    &::before {
-      position: absolute;
-      z-index: 2;
-      width: 100%;
-      height: 80%;
-      margin-left: -1px;
-      content: '';
-      border-left: 1px solid $borderColor;
-    }
     &::after {
       position: absolute;
-      z-index: 1;
+      top: 0;
+      left: 0;
+      z-index: 0;
       width: 100%;
       height: 100%;
       margin-left: -1px;
@@ -255,6 +282,9 @@
       transition: border-color 0.15s ease-in-out;
     }
   }
+  &:not(:last-child) {
+    border-right: none;
+  }
   &:hover,
   &:active {
     color: $textColor;
@@ -264,9 +294,6 @@
       border-color: $bgColorHoverAndActive;
     }
   }
-  &:not(:last-child) {
-    border-right: none;
-  }
   &:focus {
     box-shadow: none;
   }

src/client/styles/scss/_toc.scss

@@ -13,8 +13,6 @@
     font-weight: bolder;
   }
   .grw-seen-user-list {
-    border-left: 1px solid;
-
     .btn {
       white-space: nowrap;
     }

src/client/styles/scss/style-app.scss

@@ -69,23 +69,6 @@
   cursor: not-allowed;
 }
 
-.btn-group.grw-three-stranded-button {
-  .view-button,
-  .edit-button {
-    .grw-three-stranded-button-icon {
-      margin-right: -0.25rem;
-    }
-  }
-
-  .hackmd-button {
-    font-size: 12px;
-    letter-spacing: -0.6px;
-
-    .grw-three-stranded-button-icon {
-      margin-right: -0.1rem;
-    }
-  }
-}
 // TODO: reactify and replace with `grw-not-available-for-guest`
 .edit-button.edit-button-disabled {
   cursor: not-allowed;
@@ -95,6 +78,10 @@
   cursor: not-allowed !important;
 }
 
+// #seen-user-list {
+//   @include applyshort-border-vertical(red);
+// }
+
 /*
  * Helper Classes
  */

src/client/styles/scss/theme/_apply-colors.scss

@@ -274,7 +274,7 @@ pre:not(.hljs):not(.CodeMirror-line) {
     fill: $color-link;
   }
   .grw-seen-user-list {
-    border-color: $bordercolor-toc;
+    @include short-border-vertical($bordercolor-toc);
 
     .btn {
       color: $color-seen-user;