refactor: improve card layout and scrollbar styling

apps/web/src/views/card/index.tsx

@@ -29,7 +29,6 @@ import LabelSelector from "./components/LabelSelector";
 import ListSelector from "./components/ListSelector";
 import MemberSelector from "./components/MemberSelector";
 import { NewChecklistForm } from "./components/NewChecklistForm";
-import NewChecklistItemForm from "./components/NewChecklistItemForm";
 import NewCommentForm from "./components/NewCommentForm";
 
 interface FormValues {
@@ -213,9 +212,10 @@ export default function CardPage() {
       <PageHead
         title={t`${card?.title ?? "Card"} | ${board?.name ?? "Board"}`}
       />
-      <div className="flex h-full flex-1 flex-row">
-        <div className="m-auto flex h-full w-full max-w-[800px] flex-col overflow-hidden">
-          <div className="h-full max-h-[calc(100dvh-3rem)] overflow-y-auto p-6 md:max-h-[calc(100dvh-4rem)] md:p-8">
+      <div className="flex h-full flex-1 flex-row overflow-hidden">
+        <div className="scrollbar-thumb-rounded-[4px] scrollbar-track-rounded-[4px] w-full flex-1 overflow-y-auto scrollbar scrollbar-track-light-200 scrollbar-thumb-light-400 hover:scrollbar-thumb-light-400 dark:scrollbar-track-dark-100 dark:scrollbar-thumb-dark-300 dark:hover:scrollbar-thumb-dark-300">
+          <div className="p-auto mx-auto flex h-full w-full max-w-[800px] flex-col">
+            <div className="p-6 md:p-8">
               <div className="mb-8 flex w-full items-center justify-between md:mt-6">
                 {!card && isLoading && (
                   <div className="flex space-x-2">
@@ -272,7 +272,7 @@ export default function CardPage() {
                           content={card.description}
                           onChange={(e) => setValue("description", e)}
                           onBlur={() => handleSubmit(onSubmit)()}
-                        workspaceMembers={board?.workspace?.members ?? []}
+                          workspaceMembers={board?.workspace.members ?? []}
                         />
                       </div>
                     </form>
@@ -303,6 +303,7 @@ export default function CardPage() {
               )}
             </div>
           </div>
+        </div>
 
         <Modal modalSize={modalContentType === "NEW_FEEDBACK" ? "md" : "sm"}>
           {modalContentType === "NEW_FEEDBACK" && <FeedbackModal />}