Resume
/
subman-nextjs
2
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

swap md: for sm:

This commit is contained in:
andrzej 2024-09-29 13:22:35 +02:00
parent 0ab70fec08
commit 1f1ea79de2
20 changed files with 131 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/@/components/ui/table.tsx
View File

@ -73,7 +73,7 @@ const TableHead = React.forwardRef<
<th
ref={ref}
className={cn(
"h-12 md:px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
"h-12 sm:px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
className
)}
{...props}
@ -87,7 +87,7 @@ const TableCell = React.forwardRef<
>(({ className, ...props }, ref) => (
<td
ref={ref}
className={cn("md:p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
className={cn("sm:p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
{...props}
/>
))

2
src/@/components/ui/toast.tsx
View File

@ -16,7 +16,7 @@ const ToastViewport = React.forwardRef<
<ToastPrimitives.Viewport
ref={ref}
className={cn(
"fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
"fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col sm:max-w-[420px]",
className
)}
{...props}

14
src/app/layout.tsx
View File

@ -31,14 +31,14 @@ export default function RootLayout({
enableSystem
disableTransitionOnChange
>
<div id="layout-container" className="md:p-4 w-screen h-screen mt-2 md:mt-6 flex justify-center">
<div className="w-full md:w-5/6 flex flex-col md:flex-row">
<div id="sidebar" className=" flex flex-row md:flex-col justify-between"> <header className="">
<h1 className="font-black text-4xl text-primary-foreground bg-primary antialiased w-full p-2 rounded-tl-3xl pl-6 pr-4 hidden md:block">SubMan</h1>
<p className="mt-2 mx-1 text-sm antialiased w-40 hidden md:block">The self-hosted literary submission tracker.</p>
<div id="layout-container" className="sm:p-4 w-screen h-screen mt-2 sm:mt-6 flex justify-center">
<div className="w-full sm:w-5/6 flex flex-col sm:flex-row">
<div id="sidebar" className=" flex flex-row sm:flex-col justify-between"> <header className="">
<h1 className="font-black text-4xl text-primary-foreground bg-primary antialiased w-full p-2 rounded-tl-3xl pl-6 pr-4 hidden sm:block">SubMan</h1>
<p className="mt-2 mx-1 text-sm antialiased w-40 hidden sm:block">The self-hosted literary submission tracker.</p>
</header>
<Navlinks className="md:mt-6" />
<footer className="my-auto md:mt-auto flex justify-center"><ModeToggle /><LogoutButton />
<Navlinks className="sm:mt-6" />
<footer className="my-auto sm:mt-auto flex justify-center"><ModeToggle /><LogoutButton />
</footer>
</div>
<div className="flex justify-center w-full">

12
src/app/publication/columns.tsx
View File

@ -32,8 +32,8 @@ export const columns: ColumnDef<PubsWithGenres>[] = [
},
cell: cell => (
<>
<p className="block text-xs max-w-24 break-words md:hidden">{cell.getValue()}</p>
<TextInputCell cellContext={cell} className="hidden md:block" />
<p className="block text-xs max-w-24 break-words sm:hidden">{cell.getValue()}</p>
<TextInputCell cellContext={cell} className="hidden sm:block" />
</>
),
meta: { formSchema: pubSchema }
@ -49,8 +49,8 @@ export const columns: ColumnDef<PubsWithGenres>[] = [
),
cell: cell => (
<>
<p className="block text-xs max-w-16 truncate md:hidden">{cell.getValue()}</p>
<TextInputCell cellContext={cell} className="hidden md:block" />
<p className="block text-xs max-w-16 truncate sm:hidden">{cell.getValue()}</p>
<TextInputCell cellContext={cell} className="hidden sm:block" />
</>
),
meta: { formSchema: pubSchema }
@ -78,8 +78,8 @@ export const columns: ColumnDef<PubsWithGenres>[] = [
),
cell: cell => (
<>
<p className="block md:hidden text-center">{cell.getValue()}</p>
<NumberInputCell cellContext={cell} className="hidden md:block" />
<p className="block sm:hidden text-center">{cell.getValue()}</p>
<NumberInputCell cellContext={cell} className="hidden sm:block" />
</>
),
meta: {

4
src/app/publication/create.tsx
View File

@ -20,8 +20,8 @@ export default function CreatePubDialog({ genres }: ComponentProps<"div"> & { ge
<Dialog open={isOpen} onOpenChange={setIsOpen}>
<DialogTrigger asChild>
<Button>
<span className="hidden md:block">Create new publication</span>
<Plus className="block md:hidden" />
<span className="hidden sm:block">Create new publication</span>
<Plus className="block sm:hidden" />
</Button>
</DialogTrigger>
<DialogContent>

2
src/app/publication/page.tsx
View File

@ -12,7 +12,7 @@ export default async function Page() {
const genres = await getGenres()
const pubs = await getPubsWithGenres()
return (
<div className="container px-1 md:px-4 mx-auto">
<div className="container px-1 sm:px-4 mx-auto">
<DataTable data={pubs} columns={columns} tableName="pub" genres={genres}>
<CreatePubDialog genres={genres} />
</DataTable>

8
src/app/story/columns.tsx
View File

@ -31,8 +31,8 @@ export const columns: ColumnDef<StoryWithGenres>[] = [
},
cell: cell => (
<>
<p className="block break-words max-w-36 md:hidden text-xs">{cell.getValue()}</p>
<TextInputCell cellContext={cell} className="hidden md:block" />
<p className="block break-words max-w-36 sm:hidden text-xs">{cell.getValue()}</p>
<TextInputCell cellContext={cell} className="hidden sm:block" />
</>
),
meta: { formSchema: storySchema }
@ -59,8 +59,8 @@ export const columns: ColumnDef<StoryWithGenres>[] = [
enableColumnFilter: false,
cell: cell => (
<>
<p className="block md:hidden text-center text-xs">{cell.getValue()}</p>
<NumberInputCell cellContext={cell} className="hidden md:block" />
<p className="block sm:hidden text-center text-xs">{cell.getValue()}</p>
<NumberInputCell cellContext={cell} className="hidden sm:block" />
</>
),
meta: {

4
src/app/story/create.tsx
View File

@ -19,8 +19,8 @@ export default function CreateStoryDialog({ genres }: ComponentProps<"div"> & {
<Dialog open={isOpen} onOpenChange={setIsOpen}>
<DialogTrigger asChild>
<div>
<Button className="hidden md:block">Create new story</Button>
<Button className="block md:hidden"><Plus /> </Button>
<Button className="hidden sm:block">Create new story</Button>
<Button className="block sm:hidden"><Plus /> </Button>
</div>
</DialogTrigger>
<DialogContent>

2
src/app/story/page.tsx
View File

@ -19,7 +19,7 @@ export default async function Page() {
return (
<div className="container px-1 md:px-4 mx-auto">
<div className="container px-1 sm:px-4 mx-auto">
<DataTable columns={columns} data={storiesWithGenres} tableName="story"
genres={genres}
>

32
src/app/submission/columns.tsx
View File

@ -21,8 +21,8 @@ export const columns: ColumnDef<SubComplete>[] = [
id: "story",
header: () => (
<>
<span className="hidden md:block">Story</span>
<NotepadText className="block md:hidden" />
<span className="hidden sm:block">Story</span>
<NotepadText className="block sm:hidden" />
</>
),
cell: (props: CellContext<any, any>) => (<TitleContainer>{props.getValue()}</TitleContainer>)
@ -37,8 +37,8 @@ export const columns: ColumnDef<SubComplete>[] = [
id: "pub",
header: () => (
<>
<span className="hidden md:block">Publication</span>
<BookText className="block md:hidden" />
<span className="hidden sm:block">Publication</span>
<BookText className="block sm:hidden" />
</>
),
cell: (props: CellContext<any, any>) => (<TitleContainer>{props.getValue()}</TitleContainer>)
@ -53,16 +53,16 @@ export const columns: ColumnDef<SubComplete>[] = [
className="p-0"
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
>
<span className="hidden md:block"> Date Submitted </span>
<CalendarPlus className="block md:hidden" />
<ArrowUpDown className="ml-2 h-4 w-4 hidden md:block" />
<span className="hidden sm:block"> Date Submitted </span>
<CalendarPlus className="block sm:hidden" />
<ArrowUpDown className="ml-2 h-4 w-4 hidden sm:block" />
</Button>
)
},
enableColumnFilter: false,
sortingFn: "datetime",
cell: (props: CellContext<any, any>) => (
<p className="w-full text-center text-xs md:text-sm">{props.getValue().toLocaleDateString('ES', {
<p className="w-full text-center text-xs sm:text-sm">{props.getValue().toLocaleDateString('ES', {
day: 'numeric',
month: 'numeric',
year: '2-digit'
@ -79,15 +79,15 @@ export const columns: ColumnDef<SubComplete>[] = [
className="p-0"
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
>
<span className="hidden md:block"> Date Responded </span>
<CalendarMinus className="block md:hidden" />
<ArrowUpDown className="ml-2 h-4 w-4 hidden md:block" />
<span className="hidden sm:block"> Date Responded </span>
<CalendarMinus className="block sm:hidden" />
<ArrowUpDown className="ml-2 h-4 w-4 hidden sm:block" />
</Button>
)
},
enableColumnFilter: false,
sortingFn: "datetime",
cell: (props: CellContext<any, any>) => (<p className="w-full text-center text-xs md:text-sm">{props.getValue()?.toLocaleDateString('ES', {
cell: (props: CellContext<any, any>) => (<p className="w-full text-center text-xs sm:text-sm">{props.getValue()?.toLocaleDateString('ES', {
day: 'numeric',
month: 'numeric',
year: '2-digit'
@ -108,13 +108,13 @@ export const columns: ColumnDef<SubComplete>[] = [
className="p-0"
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
>
<span className="hidden md:block"> Response </span>
<MessageCircleReply className="block md:hidden" />
<ArrowUpDown className="ml-2 h-4 w-4 hidden md:block" />
<span className="hidden sm:block"> Response </span>
<MessageCircleReply className="block sm:hidden" />
<ArrowUpDown className="ml-2 h-4 w-4 hidden sm:block" />
</Button>
)
},
cell: (props: CellContext<any, any>) => (<p className="w-full text-center text-xs md:text-sm">{props.getValue()}</p>)
cell: (props: CellContext<any, any>) => (<p className="w-full text-center text-xs sm:text-sm">{props.getValue()}</p>)
},
]

6
src/app/submission/create.tsx
View File

@ -30,11 +30,11 @@ export default function CreateSubmissionDialog({ stories, pubs, responses, defau
<Dialog open={isOpen} onOpenChange={setIsOpen}>
<DialogTrigger asChild>
<Button>
<span className="hidden md:block">Create new submission</span>
<Plus className="block md:hidden" />
<span className="hidden sm:block">Create new submission</span>
<Plus className="block sm:hidden" />
</Button>
</DialogTrigger>
<DialogContent className="text-xs md:text-sm">
<DialogContent className="text-xs sm:text-sm">
<DialogHeader>
<DialogTitle>New submission</DialogTitle>
<DialogDescription>Create an entry for a new story i.e. a thing you intend to submit for publication.</DialogDescription>

2
src/app/submission/page.tsx
View File

@ -18,7 +18,7 @@ export default async function Page() {
const genres = await getGenres()
return (
<div className="container px-1 md:px-4 mx-auto">
<div className="container px-1 sm:px-4 mx-auto">
<DataTable data={subs} columns={columns} tableName="sub"
stories={stories}
pubs={pubs}

55
src/app/tailwind.css
View File

@ -2340,6 +2340,14 @@ body {
top: auto;
}
.sm\:mt-6 {
margin-top: 1.5rem;
}
.sm\:mt-auto {
margin-top: auto;
}
.sm\:block {
display: block;
}
@ -2348,6 +2356,18 @@ body {
display: none;
}
.sm\:w-24 {
width: 6rem;
}
.sm\:w-5\/6 {
width: 83.333333%;
}
.sm\:max-w-\[420px\] {
max-width: 420px;
}
.sm\:flex-row {
flex-direction: row;
}
@ -2378,14 +2398,49 @@ body {
margin-bottom: calc(0px * var(--tw-space-y-reverse));
}
.sm\:space-y-8 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.sm\:rounded-lg {
border-radius: var(--radius);
}
.sm\:rounded-l-3xl {
border-top-left-radius: 1.5rem;
border-bottom-left-radius: 1.5rem;
}
.sm\:p-4 {
padding: 1rem;
}
.sm\:px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.sm\:py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.sm\:text-left {
text-align: left;
}
.sm\:text-base {
font-size: 1rem;
line-height: 1.5rem;
}
.sm\:text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
.data-\[state\=open\]\:sm\:slide-in-from-bottom-full[data-state=open] {
--tw-enter-translate-y: 100%;
}

22
src/app/ui/forms/editSub.tsx
View File

@ -99,13 +99,13 @@ export default function EditSubmissionForm({ stories, pubs, responses, defaults,
return (
<Form {...form}>
<form id="subform" onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-2 md:space-y-8">
<form id="subform" onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-2 sm:space-y-8">
<FormField
control={form.control}
name="storyId"
render={({ field }) => (
<FormItem>
<FormLabel className="text-sm md:text-base">Story</FormLabel>
<FormLabel className="text-sm sm:text-base">Story</FormLabel>
<Select onValueChange={field.onChange} defaultValue={field.value}>
<FormControl>
<SelectTrigger>
@ -118,7 +118,7 @@ export default function EditSubmissionForm({ stories, pubs, responses, defaults,
{storiesSelectItems}
</SelectContent>
</Select>
<FormDescription className="text-xs md:text-base">The piece you submitted</FormDescription>
<FormDescription className="text-xs sm:text-base">The piece you submitted</FormDescription>
<FormMessage />
</FormItem>
)}
@ -128,7 +128,7 @@ export default function EditSubmissionForm({ stories, pubs, responses, defaults,
name="pubId"
render={({ field }) => (
<FormItem>
<FormLabel className="text-sm md:text-base">Publication</FormLabel>
<FormLabel className="text-sm sm:text-base">Publication</FormLabel>
<Select onValueChange={field.onChange} defaultValue={field.value}>
<FormControl>
<SelectTrigger>
@ -141,7 +141,7 @@ export default function EditSubmissionForm({ stories, pubs, responses, defaults,
{pubsSelectItems}
</SelectContent>
</Select>
<FormDescription className="text-xs md:text-base">The market you sent it to</FormDescription>
<FormDescription className="text-xs sm:text-base">The market you sent it to</FormDescription>
<FormMessage />
</FormItem>
)}
@ -152,7 +152,7 @@ export default function EditSubmissionForm({ stories, pubs, responses, defaults,
name="submitted"
render={({ field }) => (
<FormItem className="flex flex-col">
<FormLabel className="text-sm md:text-base">Date of submission</FormLabel>
<FormLabel className="text-sm sm:text-base">Date of submission</FormLabel>
<Popover modal={true} open={isSubCalendarOpen} onOpenChange={setIsSubCalendarOpen}>
<PopoverTrigger asChild>
<FormControl>
@ -184,7 +184,7 @@ export default function EditSubmissionForm({ stories, pubs, responses, defaults,
/>
</PopoverContent>
</Popover>
<FormDescription className="text-xs md:text-base">
<FormDescription className="text-xs sm:text-base">
The date you sent it
</FormDescription>
<FormMessage />
@ -197,7 +197,7 @@ export default function EditSubmissionForm({ stories, pubs, responses, defaults,
name="responded"
render={({ field }) => (
<FormItem className="flex flex-col">
<FormLabel className="text-sm md:text-base">Date of response</FormLabel>
<FormLabel className="text-sm sm:text-base">Date of response</FormLabel>
<Popover modal={true} open={isRespCalendarOpen} onOpenChange={setIsRespCalendarOpen}>
<PopoverTrigger asChild>
<FormControl>
@ -229,7 +229,7 @@ export default function EditSubmissionForm({ stories, pubs, responses, defaults,
/>
</PopoverContent>
</Popover>
<FormDescription className="text-xs md:text-base">
<FormDescription className="text-xs sm:text-base">
The date they wrote back
</FormDescription>
<FormMessage />
@ -243,7 +243,7 @@ export default function EditSubmissionForm({ stories, pubs, responses, defaults,
name="responseId"
render={({ field }) => (
<FormItem>
<FormLabel className="text-sm md:text-base">Response</FormLabel>
<FormLabel className="text-sm sm:text-base">Response</FormLabel>
<Select onValueChange={field.onChange} defaultValue={field.value}>
<FormControl>
<SelectTrigger>
@ -256,7 +256,7 @@ export default function EditSubmissionForm({ stories, pubs, responses, defaults,
{reponsesSelectItems}
</SelectContent>
</Select>
<FormDescription className="text-xs md:text-base">The market you sent it to</FormDescription>
<FormDescription className="text-xs sm:text-base">The market you sent it to</FormDescription>
<FormMessage />
</FormItem>
)}

20
src/app/ui/forms/sub.tsx
View File

@ -95,7 +95,7 @@ export default function SubmissionForm({ stories, pubs, responses, defaults, clo
return (
<Form {...form}>
<form id="subform" onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-2 md:space-y-8 text-xs">
<form id="subform" onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-2 sm:space-y-8 text-xs">
<FormField
control={form.control}
name="storyId"
@ -114,7 +114,7 @@ export default function SubmissionForm({ stories, pubs, responses, defaults, clo
{storiesSelectItems}
</SelectContent>
</Select>
<FormDescription className="text-xs md:text-base">The piece you submitted</FormDescription>
<FormDescription className="text-xs sm:text-base">The piece you submitted</FormDescription>
<FormMessage />
</FormItem>
)}
@ -124,7 +124,7 @@ export default function SubmissionForm({ stories, pubs, responses, defaults, clo
name="pubId"
render={({ field }) => (
<FormItem>
<FormLabel className="text-sm md:text-base">Publication</FormLabel>
<FormLabel className="text-sm sm:text-base">Publication</FormLabel>
<Select onValueChange={field.onChange} defaultValue={field.value}>
<FormControl>
<SelectTrigger>
@ -137,7 +137,7 @@ export default function SubmissionForm({ stories, pubs, responses, defaults, clo
{pubsSelectItems}
</SelectContent>
</Select>
<FormDescription className="text-xs md:text-base">The market you sent it to</FormDescription>
<FormDescription className="text-xs sm:text-base">The market you sent it to</FormDescription>
<FormMessage />
</FormItem>
)}
@ -148,7 +148,7 @@ export default function SubmissionForm({ stories, pubs, responses, defaults, clo
name="submitted"
render={({ field }) => (
<FormItem className="flex flex-col">
<FormLabel className="text-sm md:text-base">Date of submission</FormLabel>
<FormLabel className="text-sm sm:text-base">Date of submission</FormLabel>
<Popover modal={true} open={isSubCalendarOpen} onOpenChange={setIsSubCalendarOpen}>
<PopoverTrigger asChild>
<FormControl>
@ -180,7 +180,7 @@ export default function SubmissionForm({ stories, pubs, responses, defaults, clo
/>
</PopoverContent>
</Popover>
<FormDescription className="text-xs md:text-base">
<FormDescription className="text-xs sm:text-base">
The date you sent it
</FormDescription>
<FormMessage />
@ -193,7 +193,7 @@ export default function SubmissionForm({ stories, pubs, responses, defaults, clo
name="responded"
render={({ field }) => (
<FormItem className="flex flex-col">
<FormLabel className="text-sm md:text-base">Date of response</FormLabel>
<FormLabel className="text-sm sm:text-base">Date of response</FormLabel>
<Popover modal={true} open={isRespCalendarOpen} onOpenChange={setIsRespCalendarOpen}>
<PopoverTrigger asChild>
<FormControl>
@ -225,7 +225,7 @@ export default function SubmissionForm({ stories, pubs, responses, defaults, clo
/>
</PopoverContent>
</Popover>
<FormDescription className="text-xs md:text-base">
<FormDescription className="text-xs sm:text-base">
The date they wrote back
</FormDescription>
<FormMessage />
@ -239,7 +239,7 @@ export default function SubmissionForm({ stories, pubs, responses, defaults, clo
name="responseId"
render={({ field }) => (
<FormItem>
<FormLabel className="text-sm md:text-base">Response</FormLabel>
<FormLabel className="text-sm sm:text-base">Response</FormLabel>
<Select onValueChange={field.onChange} defaultValue={field.value}>
<FormControl>
<SelectTrigger>
@ -252,7 +252,7 @@ export default function SubmissionForm({ stories, pubs, responses, defaults, clo
{reponsesSelectItems}
</SelectContent>
</Select>
<FormDescription className="text-xs md:text-base">The market you sent it to</FormDescription>
<FormDescription className="text-xs sm:text-base">The market you sent it to</FormDescription>
<FormMessage />
</FormItem>
)}

8
src/app/ui/navLinks.tsx
View File

@ -21,17 +21,17 @@ export default function Navlinks(props: ComponentProps<"div">) {
]
return (
<div className={props.className}>
<div className="text-secondary-foreground flex flex-row md:flex-col" >
<div className="text-secondary-foreground flex flex-row sm:flex-col" >
{
links.map(e => (<NavLink key={e.link} href={e.link}
className={twMerge(clsx("text-xl drop-shadow font-black my-2 w-full p-2 pl-6 antialiased text-secondary-foreground bg-secondary rounded-3xl md:rounded-l-3xl ",
className={twMerge(clsx("text-xl drop-shadow font-black my-2 w-full p-2 pl-6 antialiased text-secondary-foreground bg-secondary rounded-3xl sm:rounded-l-3xl ",
{
"text-primary-foreground bg-primary": pathname.includes(e.link)
}
))}
>
<p className="drop-shadow-sm hidden md:block">{e.label}</p>
<span className="block md:hidden">{e.icon}</span>
<p className="drop-shadow-sm hidden sm:block">{e.label}</p>
<span className="block sm:hidden">{e.icon}</span>
</NavLink >))
}
</ div>

4
src/app/ui/tables/data-table.tsx
View File

@ -130,11 +130,11 @@ export function DataTable<TData, TValue>({
const [filterBy, setFilterBy] = useState(table.getAllColumns()[0])
const [isContextMenuOpen, setIsContextMenuOpen] = useState(false)
return (<>
<div className="flex justify-between items-center py-1 md:py-4">
<div className="flex justify-between items-center py-1 sm:py-4">
<div className="flex gap-2">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" className="hidden md:display-blockml-auto">
<Button variant="outline" className="hidden sm:display-blockml-auto">
Filter by
</Button>
</DropdownMenuTrigger>

2
src/app/ui/tables/inputs/genrePickerInput.tsx
View File

@ -79,7 +79,7 @@ export default function GenrePickerInputCell(props: CellContext<any, any>) {
render={({ field }) => (
<FormItem className="w-full max-w-xs flex flex-col">
<PopoverTrigger asChild>
{value.length > 0 ? <Button variant="ghost" className="h-fit p-1"><GenreBadges genres={value} className="w-full" /></Button> : <Button variant="outline" type="button" className="text-xs md:text-sm w-fit m-auto">Add genres</Button>
{value.length > 0 ? <Button variant="ghost" className="h-fit p-1"><GenreBadges genres={value} className="w-full" /></Button> : <Button variant="outline" type="button" className="text-xs sm:text-sm w-fit m-auto">Add genres</Button>
}
</PopoverTrigger>

2
src/app/ui/tables/inputs/numberInput.tsx
View File

@ -78,7 +78,7 @@ export default function NumberInputCell({ cellContext, className }: { cellContex
<FormControl
>
<Input
className="md:w-24"
className="sm:w-24"
type="number"
autoFocus={true}
step={cellContext.column.columnDef.meta?.step}

2
src/app/ui/titleContainer.tsx
View File

@ -1,7 +1,7 @@
import { ComponentProps } from "react";
export default function TitleContainer({ children }: ComponentProps<"div">) {
let classes = "w-full text-left m-auto h-fit flex align-center text-xs md:text-sm"
let classes = "w-full text-left m-auto h-fit flex align-center text-xs sm:text-sm"
if (children == "RECORD DELETED") {
classes = classes + " text-destructive font-bold"
}