Fix profiles not loading.

src/context/intermediate/popovers/UserProfile.module.scss

@@ -57,13 +57,13 @@
     gap: 8px;
     display: flex;
     padding: 0 1.5em;
-    font-size: .875rem;
+    font-size: 0.875rem;
 
     > div {
         padding: 8px;
         cursor: pointer;
         border-bottom: 2px solid transparent;
-        transition: border-bottom .3s;
+        transition: border-bottom 0.3s;
 
         &[data-active="true"] {
             border-bottom: 2px solid var(--foreground);
@@ -81,7 +81,10 @@
     height: 100%;
     display: flex;
     padding: 1em 1.5em;
+
     max-width: 560px;
+    max-height: 240px;
+
     overflow-y: auto;
     flex-direction: column;
     background: var(--primary-background);
@@ -141,7 +144,7 @@
         display: flex;
         cursor: pointer;
         align-items: center;
-        transition: background-color .1s;
+        transition: background-color 0.1s;
         color: var(--secondary-foreground);
         border-radius: var(--border-radius);
         background-color: var(--secondary-background);

src/context/intermediate/popovers/UserProfile.tsx

@@ -75,13 +75,14 @@ export const UserProfile = observer(
             if (!user_id) return;
             if (typeof profile !== "undefined") setProfile(undefined);
             if (typeof mutual !== "undefined") setMutual(undefined);
-        }, [user_id, mutual, profile]);
+            // eslint-disable-next-line
+        }, [user_id]);
 
+        useEffect(() => {
             if (dummy) {
-            useLayoutEffect(() => {
                 setProfile(dummyProfile);
-            }, [dummyProfile]);
             }
+        }, [dummy, dummyProfile]);
 
         useEffect(() => {
             if (dummy) return;

src/pages/settings/Settings.module.scss

@@ -1,18 +1,36 @@
 /* Settings animations */
 @keyframes open {
-    0% { transform: scale(1.2); opacity: 0; }
+    0% {
-    100% { transform: scale(1); opacity: 1; }
+        transform: scale(1.2);
+        opacity: 0;
+    }
+    100% {
+        transform: scale(1);
+        opacity: 1;
+    }
 }
 
 @keyframes close {
-    0% { transform: scale(1); opacity: 1; }
+    0% {
-    100% { transform: scale(1.2); opacity: 0; }
+        transform: scale(1);
+        opacity: 1;
+    }
+    100% {
+        transform: scale(1.2);
+        opacity: 0;
+    }
 }
 
 @keyframes opacity {
-    0% { opacity: 0; }
+    0% {
-    20% { opacity: 0.5; }
+        opacity: 0;
-    50% { opacity: 1; }
+    }
+    20% {
+        opacity: 0.5;
+    }
+    50% {
+        opacity: 1;
+    }
 }
 
 /* Settings CSS */
@@ -20,7 +38,10 @@
     flex-direction: column;
     background: var(--primary-header);
 
-    .sidebar, .content { background: var(--primary-background); }
+    .sidebar,
+    .content {
+        background: var(--primary-background);
+    }
 
     .scrollbox {
         &::-webkit-scrollbar-thumb {
@@ -37,15 +58,21 @@
             min-width: 218px;
         }
 
-        .scrollbox { width: 100%; }
+        .scrollbox {
-        .version { place-items: center; }
+            width: 100%;
+        }
+        .version {
+            place-items: center;
+        }
     }
 
     /* Content */
     .content {
         padding: 0;
 
-        .scrollbox { overflow: auto; }
+        .scrollbox {
+            overflow: auto;
+        }
 
         .contentcontainer {
             max-width: unset !important;
@@ -63,7 +90,9 @@
     position: fixed;
     animation: open 0.18s ease-out, opacity 0.18s;
 
-    &.closing { animation: close 0.18s ease-in; }
+    &.closing {
+        animation: close 0.18s ease-in;
+    }
 }
 
 .settings {
@@ -86,7 +115,8 @@
         visibility: visible;
     }
 
-    ::-webkit-scrollbar-thumb {
+    // All children receive custom scrollbar.
+    > * > ::-webkit-scrollbar-thumb {
         width: 4px;
         background-clip: content-box;
         border-top: 80px solid transparent;
@@ -106,14 +136,20 @@
             flex-direction: column;
         }
 
-        .divider { height: 30px; }
+        .divider {
+            height: 30px;
+        }
 
-        .donate { color: goldenrod !important; }
+        .donate {
-        .logOut {color: var(--error) !important; }
+            color: goldenrod !important;
+        }
+        .logOut {
+            color: var(--error) !important;
+        }
 
         .version {
             margin: 1rem 12px 0;
-            font-size: .625rem;
+            font-size: 0.625rem;
             color: var(--secondary-foreground);
             font-family: var(--monospace-font), monospace;
             user-select: text;
@@ -163,7 +199,7 @@
         }
 
         h3 {
-            font-size: .8125rem;
+            font-size: 0.8125rem;
             text-transform: uppercase;
             color: var(--secondary-foreground);
 
@@ -174,14 +210,14 @@
 
         h4 {
             margin: 4px 2px;
-            font-size: .8125rem;
+            font-size: 0.8125rem;
             color: var(--tertiary-foreground);
             text-transform: uppercase;
         }
 
         h5 {
             margin-top: 0;
-            font-size: .75rem;
+            font-size: 0.75rem;
             font-weight: 400;
         }
 
@@ -189,7 +225,7 @@
             border-top: 1px solid;
             margin: 0;
             padding-top: 5px;
-            font-size: .875rem;
+            font-size: 0.875rem;
             color: var(--secondary-foreground);
         }
     }
@@ -207,8 +243,8 @@
             display: flex;
             justify-content: center;
             width: 40px;
-            opacity: .5;
+            opacity: 0.5;
-            font-size: .75rem;
+            font-size: 0.75rem;
         }
 
         .closeButton {
@@ -221,9 +257,15 @@
             border: 3px solid var(--tertiary-background);
             cursor: pointer;
 
-            svg { color: var(--secondary-foreground); }
+            svg {
-            &:hover { background: var(--secondary-header); }
+                color: var(--secondary-foreground);
-            &:active { transform: translateY(2px); }
+            }
+            &:hover {
+                background: var(--secondary-header);
+            }
+            &:active {
+                transform: translateY(2px);
+            }
         }
     }
 }