Add media queries & review re: responsive design about mern-post-app HOT 7 OPEN

Preparation
Branched from feature/refactor-code-smell new branch feature/refactor-css-modules, both merged into dev on completion
Refactored directory structure:

Globally used components stay within components directory
Components used only within one particular page moving into dedicated directory for that page, located within the pages directory. Should see all the specific components for one page within its own directory, easier to find.
Also refactoring current single stylesheet index.css into global.css stylesheet + css modules

Clearer structure in anticipation of adapting to responsive design
Also more intuitive structure for any future understanding, maintenance, collaboration

from mern-post-app.

Bug with infinite re-render in CreateNew.js now fixed and merged into dev.

from mern-post-app.

Same bugfix for infinite re-render in CreateNew.js now merged into main.
Branched from main, merged dev into new branch. Manually tested. Merged new branch into main:
directory structure and css updates currently consistent in main and dev.
Continuing setting up css refactoring in dev.

from mern-post-app.

Table refactoring underway, breakpoints change layout to grid at 1370px and limit table cell width at 480px.
Currently simplified table row filtering @ first breakpoint: filter components rendered Global Filter and Date Range Filter.

from mern-post-app.

Table refactoring complete, rows and pagination.
Next items:
Table Options Container display:grid at media breakpoints complete. Now needs display sizing of GlobalFilter adjusting at media breakpoints to prevent overflowing container.

Project pause due to vacation until 6th Nov

from mern-post-app.

Pushed feature/responsive-css now please note not complete, WIP.

UPDATE 01/12/2023

• Table, table's options container & table pagination completed

• Footer completed

• ContentDetail completed

• Edit completed

WIP:

Login & Signup pages - checking rendering on certain IPad 7 iPhone screen sizes next, otherwise complete

Navbar:

1. problematic to display unknown length email - has been displayed as placeholder
   Design solution:
   require username at sign up, limit allowed characters to letters and numbers and a max length, display username in navbar

2. Logout button needs display to scale down at smaller screen sizes, too prominent for a secondary button

3. CreateNew needs review

4. Ensuring all touch targets are minimum 44 x 44 px for accessibility and usability at all screen sizes

from mern-post-app.

TODO: add a wrapper around DateRangeFilter and use it to change display orientation for
@media (max-width700px)
UPDATE: abandoned - client requests DateRangeFilter should not be displayed at screen width less than 700px as app is intended for use as desktop first

from mern-post-app.