Set max height on ProjectSelect
This commit is contained in:
parent
a80d97071b
commit
ef51483b0f
3 changed files with 6 additions and 5 deletions
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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}
|
||||
|
|
Loading…
Reference in a new issue