refactor: remove listWidth prop from List component and associated components (#135)

src/stories/components/List.stories.tsx

@@ -83,7 +83,6 @@ const meta = {
     tags: ['autodocs'],
     argTypes: {
         draggableElements: { control: 'object' },
-        listWidth: { control: 'number' },
         gap: { control: 'number' },
     },
 } satisfies Meta<typeof List>;
@@ -94,7 +93,11 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
     args: {
         draggableElements: ExampleCourseBlocks,
-        listWidth: 300,
         gap: 12,
     },
+    render: args => (
+        <div className='w-sm'>
+            <List {...args} />
+        </div>
+    ),
 };

src/views/components/PopupMain.tsx

@@ -133,7 +133,6 @@ export default function PopupMain(): JSX.Element {
                         draggableElements={activeSchedule?.courses.map((course, i) => (
                             <PopupCourseBlock key={course.uniqueId} course={course} colors={tailwindColorways[i]} />
                         ))}
-                        listWidth={350}
                         gap={12}
                     />
                 )}

src/views/components/calendar/CalendarSchedules/CalendarSchedules.tsx

@@ -77,7 +77,7 @@ export function CalendarSchedules({ style, dummySchedules, dummyActiveIndex }: P
                 </div>
             </div>
             <div className='flex flex-col space-y-2.5'>
-                <List gap={10} draggableElements={scheduleComponents} listWidth={240} />
+                <List gap={10} draggableElements={scheduleComponents} />
                 <input
                     type='text'
                     placeholder='Enter new schedule'

src/views/components/common/Dropdown/Dropdown.tsx

@@ -97,7 +97,7 @@ export default function Dropdown(props: Props) {
                     afterLeave={toggleSwitch}
                 >
                     <Disclosure.Panel>
-                        <List draggableElements={scheduleComponents} listWidth={240} gap={10} />
+                        <List draggableElements={scheduleComponents} gap={10} />
                     </Disclosure.Panel>
                 </Transition>
             </Disclosure>

src/views/components/common/List/List.tsx

@@ -12,7 +12,6 @@ import React, { useCallback, useEffect, useState } from 'react';
 export interface ListProps {
     draggableElements: any[]; // TODO: Will later define draggableElements based on what types
     // of components are draggable.
-    listWidth: number;
     gap: number; // Impacts the spacing between items in the list
 }
 
@@ -58,7 +57,7 @@ function Item({ provided, item, style, isDragging /* , gap */ }) {
  * @example
  * <List draggableElements={elements} />
  */
-export default function List({ draggableElements, listWidth, gap = 12 }: ListProps): JSX.Element {
+export default function List({ draggableElements, gap = 12 }: ListProps): JSX.Element {
     const [items, setItems] = useState(() => initial(0, draggableElements));
 
     useEffect(() => {
@@ -87,7 +86,7 @@ export default function List({ draggableElements, listWidth, gap = 12 }: ListPro
     );
 
     return (
-        <div style={{ overflow: 'hidden', width: listWidth }}>
+        <div style={{ overflow: 'hidden' }}>
             <DragDropContext onDragEnd={onDragEnd}>
                 <Droppable
                     droppableId='droppable'
@@ -114,12 +113,8 @@ export default function List({ draggableElements, listWidth, gap = 12 }: ListPro
                         );
                     }}
                 >
-                    {provided => (
+                    {(provided, snapshot) => (
-                        <div
+                        <div {...provided.droppableProps} ref={provided.innerRef} style={{ marginBottom: `-${gap}px` }}>
-                            {...provided.droppableProps}
-                            ref={provided.innerRef}
-                            style={{ width: `${listWidth}px`, marginBottom: `-${gap}px` }}
-                        >
                             {items.map((item, index) => (
                                 <Draggable key={item.id} draggableId={item.id} index={index}>
                                     {draggableProvided => (