Update RecipeView.vue

[philiprenich]

Fix grid layout causing large white space

• Allow rows to be auto sized
• Use gap instead of an extra column
• Adjust row & column as necessary

Topic and Scope

These changes to the grid layout will remove the excess white space on the recipe view, especially for small screens.

Concerns/issues

Due to Vue's scoped styles, this should not affect anything else.

Formal requirements

There are some formal requirements that should be satisfied. Please mark those by checking the corresponding box.

• [ ] I did check that the app can still be opened and does not throw any browser logs
  • CSS only change. But apologies regardless as I have not set up a dev env for Nextcloud yet.
• [x] I created tests for newly added PHP code (check this if no PHP changes were made)
• [x] I updated the OpenAPI specs and added an entry to the API changelog (check if API was not modified)
• [x] I notified the matrix channel if I introduced an API change

[christianlupus]

@seyfeb does this collide with your work currently?

[seyfeb]

@seyfeb does this collide with your work currently?

Definitely, as I touched almost everything in the frontend. At least, in the RecipeView I moved things around a lot. However, it might take some weeks until my changes are finalized, so if you want to push out a new release with the updated style included, it would be okay, I guess.

[github-actions[bot]]

Test Results

   12 files    584 suites   1m 32s :stopwatch:   573 tests   573 :white_check_mark: 0 :zzz: 0 :x: 2 292 runs  2 291 :white_check_mark: 1 :zzz: 0 :x:

Results for commit b3b4c085.

:recycle: This comment has been updated with latest results.