shiyue/kan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance layout for larger viewports

Browse Source
This commit is contained in:
Henry
2025-03-24 14:44:47 +00:00
parent 89e0a1ef27
commit 05c4de153e
5 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/web/src/views/boards/components/BoardsList.tsx
View File

@@ -18,7 +18,7 @@ export function BoardsList() {
if (isLoading) if (isLoading)
return ( return (
<div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xxl:grid-cols-5"> <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xxl:grid-cols-7">
<div className="mr-5 flex h-[150px] w-full animate-pulse rounded-md bg-light-200 dark:bg-dark-100" /> <div className="mr-5 flex h-[150px] w-full animate-pulse rounded-md bg-light-200 dark:bg-dark-100" />
<div className="mr-5 flex h-[150px] w-full animate-pulse rounded-md bg-light-200 dark:bg-dark-100" /> <div className="mr-5 flex h-[150px] w-full animate-pulse rounded-md bg-light-200 dark:bg-dark-100" />
<div className="mr-5 flex h-[150px] w-full animate-pulse rounded-md bg-light-200 dark:bg-dark-100" /> <div className="mr-5 flex h-[150px] w-full animate-pulse rounded-md bg-light-200 dark:bg-dark-100" />
@@ -42,7 +42,7 @@ export function BoardsList() {
); );
return ( return (
<div className="grid h-fit w-full grid-cols-1 gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xxl:grid-cols-5"> <div className="grid h-fit w-full grid-cols-1 gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-7">
{data?.map((board) => ( {data?.map((board) => (
<Link key={board.publicId} href={`boards/${board.publicId}`}> <Link key={board.publicId} href={`boards/${board.publicId}`}>
<div className="align-center relative mr-5 flex h-[150px] w-full items-center justify-center rounded-md border border-dashed border-light-400 bg-light-50 shadow-sm hover:bg-light-200 dark:border-dark-600 dark:bg-dark-50 dark:hover:bg-dark-100"> <div className="align-center relative mr-5 flex h-[150px] w-full items-center justify-center rounded-md border border-dashed border-light-400 bg-light-50 shadow-sm hover:bg-light-200 dark:border-dark-600 dark:bg-dark-50 dark:hover:bg-dark-100">

2
apps/web/src/views/card/components/Comment.tsx
View File

@@ -140,7 +140,7 @@ const Comment = ({
html={watch("comment")} html={watch("comment")}
disabled={false} disabled={false}
onChange={(e) => setValue("comment", e.target.value)} onChange={(e) => setValue("comment", e.target.value)}
className="block w-full border-0 bg-transparent py-1.5 text-light-900 focus-visible:outline-none dark:text-dark-1000 sm:text-sm sm:leading-6" className="block w-full max-w-[800px] border-0 bg-transparent py-1.5 text-light-900 focus-visible:outline-none dark:text-dark-1000 sm:text-sm sm:leading-6"
/> />
<div className="flex justify-end space-x-2"> <div className="flex justify-end space-x-2">
<Button <Button

2
apps/web/src/views/card/components/NewCommentForm.tsx
View File

@@ -50,7 +50,7 @@ const NewCommentForm = ({ cardPublicId }: { cardPublicId: string }) => {
return ( return (
<form <form
onSubmit={handleSubmit(onSubmit)} onSubmit={handleSubmit(onSubmit)}
className="flex w-full flex-col rounded-xl border border-light-600 bg-light-200 p-4 text-light-900 focus-visible:outline-none dark:border-dark-400 dark:bg-dark-100 dark:text-dark-1000 sm:text-sm sm:leading-6" className="flex w-full max-w-[1000px] flex-col rounded-xl border border-light-600 bg-light-200 p-4 text-light-900 focus-visible:outline-none dark:border-dark-400 dark:bg-dark-100 dark:text-dark-1000 sm:text-sm sm:leading-6"
> >
<ContentEditable <ContentEditable
placeholder="Add a comment..." placeholder="Add a comment..."

2
apps/web/src/views/members/index.tsx
View File

@@ -140,7 +140,7 @@ export default function MembersPage() {
return ( return (
<> <>
<PageHead title={`Members | ${workspace.name ?? "Workspace"}`} /> <PageHead title={`Members | ${workspace.name ?? "Workspace"}`} />
<div className="px-28 py-12"> <div className="m-auto max-w-[1600px] px-28 py-12">
<div className="mb-8 flex w-full justify-between"> <div className="mb-8 flex w-full justify-between">
<h1 className="font-bold tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]"> <h1 className="font-bold tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">
Members Members

2
tooling/tailwind/web.ts
View File

@@ -75,7 +75,7 @@ export default {
"light-1000": "hsl(0deg 0% 9%)", "light-1000": "hsl(0deg 0% 9%)",
}, },
screens: { screens: {
xxl: "1600px", "2xl": "1600px",
}, },
}, },
}, },