Voters list style fixes

src/components/Nav/ProfileSettingsNavigation/ProfileSettingsNavigation.module.scss

@@ -1,6 +1,5 @@
 .navigationHeader {
   @include font-size(1.8rem);
-
   font-weight: bold;
   margin-top: 1.1em;
 }
@@ -8,12 +7,25 @@
 .navigation {
   @include font-size(1.4rem);
 
+  @include media-breakpoint-down(md) {
+    display: flex;
+
+    li {
+      margin-right: 2.4rem;
+    }
+  }
+
+  a {
+    border: none;
+  }
+
   .active {
     a {
-      text-decoration: none;
-      color: var(--default-color-invert);
-      background: var(--background-color-invert);
+      border-bottom: 2px solid;
       cursor: inherit;
+      font-weight: bold;
+      pointer-events: none;
+      text-decoration: none;
     }
   }
 }

src/components/_shared/Popup/Popup.module.scss

@@ -31,7 +31,6 @@
 
   &.bordered {
     @include font-size(1.6rem);
-
     border: 2px solid #000;
     padding: 2.4rem;
 
@@ -46,7 +45,6 @@
 
   &.tiny {
     @include font-size(1.4rem);
-
     box-shadow: 0 4px 60px rgb(0 0 0 / 10%);
     padding: 1rem;
 
@@ -60,9 +58,13 @@
   }
 
   &.horizontalAnchorCenter {
+    left: -24px;
+
+    @include media-breakpoint-up(md) {
       left: 50%;
       transform: translateX(-50%);
     }
+  }
 
   &.horizontalAnchorRight {
     right: 0;

src/components/_shared/VotersList/VotersList.module.scss

@@ -17,14 +17,18 @@
       align-items: center;
       margin-right: 1.2rem;
 
-      a {
+      a:link {
         text-decoration: none;
         border: none;
+
+        &:hover {
+          background: #000;
+          color: #fff;
+        }
       }
 
       .userpic {
-        width: 24px;
-        height: 24px;
+        margin-right: 0.8rem;
       }
     }
   }

src/components/_shared/VotersList/VotersList.tsx

@@ -22,7 +22,11 @@ export const VotersList = (props: Props) => {
             {(reaction) => (
               <li class={styles.item}>
                 <div class={styles.user}>
-                  <Userpic name={reaction.createdBy.name} userpic={reaction.createdBy.userpic} />
+                  <Userpic
+                    name={reaction.createdBy.name}
+                    userpic={reaction.createdBy.userpic}
+                    class={styles.userpic}
+                  />
                   <a href={`/author/${reaction.createdBy.slug}`}>{reaction.createdBy.name || ''}</a>
                 </div>
                 {reaction.kind === ReactionKind.Like ? (