#3899 - Small Screen Responsiveness for Modal - Student

[sh16011993]

As a part of this PR, the following were completed:

• Removed the min-width dialog property from the Base Modal Dialog since it wasn't getting used anywhere in the codebase. Having it was causing the issue i.e. not allowing the dialog to be flex when the screen size was reduced.
  Issue:

• Removed the TODO: remove mx-auto in stable version of vuetify to center modelDialog from the Base Modal Dialog
• Added the code logic to allow the Base Modal Dialog to behave like a full screen dialog for smaller screen devices like the mobile and the tablets.

Demo video attached:

2025-01-14.14-37-10.mp4

[andrewsignori-aot]

Nice way to achieve the conditional modal view ❤️
Would the below not achieve the same?
Please disregard the 500 although it produced a nice result during my tests also.

const mediaQuerySmallToLarge = window.matchMedia("(max-width: 500px)");
function handleScreenChangeSmallToLarge(e: MediaQueryList) {
  console.log(e);
  showFullScreen.value = e.matches;
}
mediaQuerySmallToLarge.addEventListener("change", () =>
  handleScreenChangeSmallToLarge(mediaQuerySmallToLarge),
);
handleScreenChangeSmallToLarge(mediaQuerySmallToLarge);

[andrewsignori-aot]

Please note that (max-width: 500px), (max-height: 300px) can also be used to check with or height. Doing this we may need to add/remove the with="auto" also, so, when the modal expanded is used the with="auto" probably need to be removed. Not a blocker since it may be not part of the ticket.

[andrewsignori-aot]

Great work, please take a look at the comments.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[github-actions]

Backend Unit Tests Coverage Report

Totals
Statements:	22.49% ( 3850 / 17122 )
Methods:	10.37% ( 224 / 2161 )
Lines:	25.88% ( 3322 / 12837 )
Branches:	14.31% ( 304 / 2124 )

[github-actions]

E2E Workflow Workers Coverage Report

Totals
Statements:	65.59% ( 589 / 898 )
Methods:	59.63% ( 65 / 109 )
Lines:	68.72% ( 468 / 681 )
Branches:	51.85% ( 56 / 108 )

[github-actions]

E2E Queue Consumers Coverage Report

Totals
Statements:	86.14% ( 1249 / 1450 )
Methods:	82.42% ( 136 / 165 )
Lines:	88.51% ( 1032 / 1166 )
Branches:	68.07% ( 81 / 119 )

[github-actions]

E2E SIMS API Coverage Report

Totals
Statements:	67.77% ( 5992 / 8842 )
Methods:	65.54% ( 738 / 1126 )
Lines:	71.62% ( 4695 / 6555 )
Branches:	48.15% ( 559 / 1161 )

[lewischen-aot]

LGTM, as the result matches the AC. Good job 👍

[andrewsignori-aot]

👍