[Bug] Loaded movie cards are too huge and render in a single vertical column

[gbowne1]

The fix here would be to fix line 198 to 214 in loadMovies.mjs file. so that they are smaller in size and render in rows and columns on
desktop and laptop.

the relevant section of index.html is line 204 to 206 where it

 <div id="movie-grid" class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-4">
        <!-- Movies will be dynamically inserted here -->
 </div>

but I'm not really sure how this overlaps. There should be minimal gaps between the rows and columns too.

[siferot]

There are used two approaches simultaneously, based on grid and flex. Need to decide what to use.
Below examples how it looks if left grid only style (also extra property in #movie-grid - grid-template-columns: subgrid was deleted):

and flex only:

Both are adaptive.
Grid based looks better as for me, @gbowne1 what do you think?

[gbowne1]

@siferot yes I ageee that grid looks better here.

I do not like mixing flex with grid unless its absolutely necessary to do so so if everything else is using flex, use flex.. if everything else uses grid, use grid.

[siferot]

@gbowne1
I see, I checked and it is the only place where grid is used... Decided to left flex, but will improve appearance a little bit

[gbowne1]

yes, I do agree though that in that screenshot grid goes look better than the flex.

Note: there will be well over 1k items as this source: https://github.com/QuantumApprentice/Movie-Tracker/blob/master/src/Movie%20Night.txt will get cleaned up and turned into the JSON data and rendered to the view as cards, so the more cards in the view (with some pagination?).

Right now it's currently a mobile first view design to a certain extent. Desktop (768px+), Laptop, Tablet view needs some help.

[gbowne1]

I believe that this issue can be closed as it now renders mostly properly in row/column

The card size is a bit big now, but overall is ok.