View all rankings in details.

components/common/DropDown.js

@@ -38,7 +38,9 @@ export default function DropDown({
         {options.find(e => e.value === value)?.label}
         <Icon icon={<Chevron />} size="small" />
       </div>
-      {showMenu && <Menu className={menuClassName} options={options} onSelect={handleSelect} />}
+      {showMenu && (
+        <Menu className={menuClassName} options={options} onSelect={handleSelect} float="bottom" />
+      )}
     </div>
   );
 }

components/common/Menu.js

@@ -2,23 +2,43 @@ import React from 'react';
 import classNames from 'classnames';
 import styles from './Menu.module.css';
 
-export default function Menu({ options = [], className, align = 'left', onSelect = () => {} }) {
+export default function Menu({
+  options = [],
+  selectedOption,
+  className,
+  float,
+  align = 'left',
+  optionClassName,
+  selectedClassName,
+  onSelect = () => {},
+}) {
   return (
     <div
       className={classNames(styles.menu, className, {
+        [styles.float]: float,
+        [styles.top]: float === 'top',
+        [styles.bottom]: float === 'bottom',
         [styles.left]: align === 'left',
         [styles.right]: align === 'right',
       })}
     >
-      {options.map(({ label, value, className: optionClassName }) => (
-        <div
-          key={value}
-          className={classNames(styles.option, optionClassName)}
-          onClick={e => onSelect(value, e)}
-        >
-          {label}
-        </div>
-      ))}
+      {options.map(option => {
+        const { label, value, className: customClassName, render } = option;
+
+        return render ? (
+          render(option)
+        ) : (
+          <div
+            key={value}
+            className={classNames(styles.option, optionClassName, customClassName, {
+              [selectedClassName]: selectedOption === value,
+            })}
+            onClick={e => onSelect(value, e)}
+          >
+            {label}
+          </div>
+        );
+      })}
     </div>
   );
 }

components/common/Menu.module.css

@@ -1,8 +1,4 @@
 .menu {
-  position: absolute;
-  min-width: 100px;
-  top: 100%;
-  margin-top: 4px;
   border: 1px solid var(--gray500);
   border-radius: 4px;
   overflow: hidden;
@@ -22,6 +18,21 @@
   background: #f5f5f5;
 }
 
+.float {
+  position: absolute;
+  min-width: 100px;
+}
+
+.top {
+  bottom: 100%;
+  margin-bottom: 5px;
+}
+
+.bottom {
+  top: 100%;
+  margin-top: 5px;
+}
+
 .left {
   left: 0;
 }

components/common/Modal.module.css

@@ -5,6 +5,7 @@
   right: 0;
   bottom: 0;
   margin: auto;
+  z-index: 2;
 }
 
 .modal:before {

components/common/UserButton.js

@@ -47,7 +47,9 @@ export default function UserButton() {
         <Icon icon={<User />} size="large" />
         <Icon icon={<Chevron />} size="small" />
       </div>
-      {showMenu && <Menu options={menuOptions} onSelect={handleSelect} align="right" />}
+      {showMenu && (
+        <Menu options={menuOptions} onSelect={handleSelect} float="bottom" align="right" />
+      )}
     </div>
   );
 }