Merge pull request #462 from STAPLE-verse/small-visual-updates

Small visual updates

Author: doomlab

src/core/components/CollapseCard.tsx

@@ -24,10 +24,10 @@ const CollapseCard = ({
   const tooltipId = tooltipContent ? uuidv4() : undefined
 
   return (
-    <div className={clsx("collapse collapse-arrow bg-base-300 overflow-visible", className)}>
+    <div className={clsx("collapse collapse-arrow bg-base-300 w-full max-w-full", className)}>
       <input type="checkbox" data-tooltip-id={tooltipId} defaultChecked={defaultOpen} />
-      <div className="collapse-title text-xl font-medium">
-        <div className="card-title">{title}</div>
+      <div className="collapse-title text-xl font-medium min-w-0 pr-10">
+        <div className="card-title truncate">{title}</div>
         {tooltipContent && (
           <TooltipWrapper
             id={tooltipId}
@@ -37,8 +37,8 @@ const CollapseCard = ({
         )}
       </div>
 
-      <div className="collapse-content">
-        <div className="w-full overflow-visible">{children}</div>
+      <div className="collapse-content min-w-0">
+        <div className="w-full min-w-0">{children}</div>
         {actions && <div className="card-actions justify-end">{actions}</div>}
       </div>
     </div>

src/pages/projects/[projectId]/summary/index.tsx

@@ -245,18 +245,18 @@ const Summary = () => {
         {project.formVersionId ? (
           <>
             <MetadataDisplay metadata={project.metadata} />
-            <div className="flex flex-wrap gap-2 justify-end max-w-xl">
+            <div className="flex flex-wrap md:flex-nowrap gap-2 justify-end">
               <DownloadJSON
                 data={project.metadata}
                 fileName={project.name}
-                className="btn btn-primary"
+                className="btn btn-primary whitespace-nowrap"
                 type="button"
                 label="Download Metadata JSON"
               />
               <DownloadXLSX
                 data={project.metadata}
                 fileName={project.name}
-                className="btn btn-secondary mx-2"
+                className="btn btn-secondary whitespace-nowrap"
                 type="button"
                 label="Download Metadata XLSX"
               />
@@ -265,7 +265,7 @@ const Summary = () => {
                 uiSchema={getJsonSchema(project.formVersion?.uiSchema)}
                 metadata={project.metadata}
                 label={"Edit Project Metadata"}
-                classNames="btn-info"
+                classNames="btn-info whitespace-nowrap"
                 onSubmit={handleJsonFormSubmit}
                 onError={handleJsonFormError}
                 resetHandler={handleResetMetadata}

src/tasks/components/TaskSummary.tsx

@@ -6,7 +6,7 @@ import { TaskLogTable } from "./TaskLogTable"
 // Create task summary for the PM
 export const TaskSummary = ({ contributorFilter }: { contributorFilter?: number }) => {
   return (
-    <div className="flex flex-row justify-center mt-2 mb-2">
+    <div className="flex flex-row justify-center mt-4 mb-2">
       {/* overall project information */}
       <CollapseCard title="Task Completion" className="w-full" defaultOpen={true}>
         {!contributorFilter && (