webskel/dolphins7.skeleton
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Set max height on ProjectSelect

Browse source
This commit is contained in:
0x1eef 2024-04-23 14:11:23 -03:00
parent a80d97071b
commit ef51483b0f
3 changed files with 6 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
client/src/js/components/NavBar.tsx
View file

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

1
client/src/js/components/ProjectSelect.tsx
View file

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

6
client/src/js/components/Select.tsx
View file

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