fixed upload scroll, member list sheet view

Author: safipatel

app/classrooms/[classroomId]/upload/uploadComponent.tsx

@@ -145,7 +145,7 @@ export default function UploadComponent({
 
   return (
     <div className="flex min-h-screen flex-col items-center justify-center p-6">
-      <Card className="w-full max-w-md">
+      <Card className="w-full max-w-[35vw]">
         <CardHeader>
           <CardTitle>File Upload</CardTitle>
         </CardHeader>
@@ -193,11 +193,11 @@ function FileList({ uploadedFiles }: { uploadedFiles: UploadedFile[] }) {
   const pathname = usePathname();
   return (
     uploadedFiles.length > 0 && (
-      <ScrollArea className="mt-5 max-h-[50vh]">
+      <ScrollArea className="mt-5 w-full flex h-fit max-h-[50vh] flex-col ">
         <div className="mt-6">
           <h2 className="text-lg font-semibold">Uploaded Files</h2>
           <ul className="my-2 space-y-2">
-            {uploadedFiles.map((file) => (
+            {uploadedFiles.flatMap(f => [f,f,f,f,f]).map((file) => (
               <li key={file.id} className="rounded-md border p-3">
                 <Link
                   href={`${pathname}/preview?documentId=${file.id}&datasetId=${file.datasetId}`}

app/classrooms/_components/memberList.tsx

@@ -148,7 +148,7 @@ export default function MemberList({
         )}
 
         {/* not used: https://github.com/shadcn-ui/ui/issues/16#issuecomment-1602565563 */}
-        <SheetContent className="flex w-[55vw] items-center justify-center align-middle sm:max-w-5xl">
+        <SheetContent className="flex w-[55vw] items-center justify-center align-middle sm:max-w-[55vw]">
           <SheetHeader>
             <SheetTitle>{classroom.name} Members</SheetTitle>
             {/* <SheetDescription>

app/classrooms/page.tsx

@@ -455,7 +455,7 @@ function ClassroomList({ userContext }: { userContext: UserContextType }) {
             />
           </div>
         </div>
-        <Separator className="my-4 mb-10" />
+        <Separator className="my-4 mb-10 bg-accent" />
         <TabsContent value="admin">
           <div>
             <div className="grid auto-rows-min gap-4 min-[940px]:grid-cols-2 min-[1270px]:grid-cols-3 min-[1665px]:grid-cols-4">

shared/components/ui/scroll-area.tsx

@@ -43,7 +43,7 @@ const ScrollBar = React.forwardRef<
     )}
     {...props}
   >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-accent" />
   </ScrollAreaPrimitive.ScrollAreaScrollbar>
 ));
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;