[Outreachy Task Submission]: Collection list responsiveness issue when adding posts

[RWUBAKWANAYO]

Description:
This issue addresses a responsiveness issue observed in the collection list when adding posts. The collection cards exhibit inconsistency in their layout, particularly when the window is resized to a tablet size.

Reproduce Steps:

1. Launch the web application using npm run web:serve.
2. Log in to the application.
3. Click on the "data view" icon on the sidebar.
4. Within the list of posts, click on the more icons and then click on the add to collection icon.
5. Within the popup, resize the window to a tablet size.
6. Verify that the collection cards are visually inconsistent and unresponsive.

Expected Behavior:
The maximum number of cards per column in the collection list popup should be one to ensure optimal display on smaller screens like tablets.

Desktop Hardware Details:

• Operating System: iOS
• Browser: Chrome
• Browser Version: 122

Additional Context:

screen-recording-2024-03-28-at-025320_YD5n0qNt.mov

@Angamanga, could you kindly assist in adding the Outreachy Task Submission Label to this issue? I'm going to work on resolving it.