Set max height on ProjectSelect

client/src/js/components/NavBar.tsx

@@ -2,7 +2,7 @@ import { useContext } from "react";
 import { AppContext } from "~/Context";
 import { Maybe } from "~/types/schema";
 import { ProjectSelect } from "~/components/ProjectSelect";
-const BASE_CLASSNAMES = ["block", "w-3/4", "no-underline", "p-3", "mt-2"];
+const BASE_CLASSNAMES = ["block", "no-underline", "p-3", "mt-2"];
 const ACTIVE_CLASSNAMES = [
   ...BASE_CLASSNAMES,
   "rounded",
@@ -48,7 +48,7 @@ export function NavBar() {
         return (
           <>
             <h3>{key}</h3>
-            <ul>
+            <ul className="w-3/4">
               {...items.flatMap(item => {
                 return (
                   <li>

client/src/js/components/ProjectSelect.tsx

@@ -36,6 +36,7 @@ export function ProjectSelect({ onChange, selected }: Props) {
       options={options}
       selected={String(selected)}
       placeholder="Any project"
+      className="max-h-96 overflow-y-scroll overflow-x-none w-3/4"
     />
   );
   1;

client/src/js/components/Select.tsx

@@ -3,7 +3,6 @@ import { ReactNode, useState, useEffect } from "react";
 const LI_CLASSNAME = [
   "flex",
   "align-items-center",
-  "w-3/4",
   "hover-bg-secondary",
   "p-3",
   "mt-2",
@@ -25,6 +24,7 @@ type Props = {
   selected: string;
   onChange: (o: Option) => void;
   placeholder: string;
+  className?: string;
 };
 
 export type Option = {
@@ -32,7 +32,7 @@ export type Option = {
   value: string;
 };
 
-export const Select = ({ onChange, options, selected, placeholder }: Props) => {
+export const Select = ({ onChange, options, selected, placeholder, className }: Props) => {
   const selectOptions = [{ label: placeholder, value: "" }, ...options];
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [option, setOption] = useState<Option>(
@@ -66,7 +66,7 @@ export const Select = ({ onChange, options, selected, placeholder }: Props) => {
   }, [isOpen]);
 
   return (
-    <ul>
+    <ul className={className}>
       {selectOptions.map((o, i) => (
         <li
           key={i}