From 05c4de153e32f72a35cbad814472b0fe6503c9d2 Mon Sep 17 00:00:00 2001
From: Henry <henry_ball@hotmail.co.uk>
Date: Mon, 24 Mar 2025 14:44:47 +0000
Subject: [PATCH] feat: enhance layout for larger viewports

---
 apps/web/src/views/boards/components/BoardsList.tsx   | 4 ++--
 apps/web/src/views/card/components/Comment.tsx        | 2 +-
 apps/web/src/views/card/components/NewCommentForm.tsx | 2 +-
 apps/web/src/views/members/index.tsx                  | 2 +-
 tooling/tailwind/web.ts                               | 2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/views/boards/components/BoardsList.tsx b/apps/web/src/views/boards/components/BoardsList.tsx
index 4d7885f8..0bd52743 100644
--- a/apps/web/src/views/boards/components/BoardsList.tsx
+++ b/apps/web/src/views/boards/components/BoardsList.tsx
@@ -18,7 +18,7 @@ export function BoardsList() {
 
   if (isLoading)
     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" />
@@ -42,7 +42,7 @@ export function BoardsList() {
     );
 
   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) => (
         <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">
diff --git a/apps/web/src/views/card/components/Comment.tsx b/apps/web/src/views/card/components/Comment.tsx
index 707df1c0..9a992edc 100644
--- a/apps/web/src/views/card/components/Comment.tsx
+++ b/apps/web/src/views/card/components/Comment.tsx
@@ -140,7 +140,7 @@ const Comment = ({
             html={watch("comment")}
             disabled={false}
             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">
             <Button
diff --git a/apps/web/src/views/card/components/NewCommentForm.tsx b/apps/web/src/views/card/components/NewCommentForm.tsx
index b90894c7..b105a11b 100644
--- a/apps/web/src/views/card/components/NewCommentForm.tsx
+++ b/apps/web/src/views/card/components/NewCommentForm.tsx
@@ -50,7 +50,7 @@ const NewCommentForm = ({ cardPublicId }: { cardPublicId: string }) => {
   return (
     <form
       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
         placeholder="Add a comment..."
diff --git a/apps/web/src/views/members/index.tsx b/apps/web/src/views/members/index.tsx
index a543a81e..64ed5027 100644
--- a/apps/web/src/views/members/index.tsx
+++ b/apps/web/src/views/members/index.tsx
@@ -140,7 +140,7 @@ export default function MembersPage() {
   return (
     <>
       <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">
           <h1 className="font-bold tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">
             Members
diff --git a/tooling/tailwind/web.ts b/tooling/tailwind/web.ts
index 8a320333..d9df6a65 100644
--- a/tooling/tailwind/web.ts
+++ b/tooling/tailwind/web.ts
@@ -75,7 +75,7 @@ export default {
         "light-1000": "hsl(0deg 0% 9%)",
       },
       screens: {
-        xxl: "1600px",
+        "2xl": "1600px",
       },
     },
   },