Fixed Upload Data Modal and Download Data Modal by hans-hc · Pull Request #331 · McMaster-Baja-Racing/Better-Data-Viewer

hans-hc · 2026-01-14T17:29:36Z

as title indicates, fixed the sizing glitches when the window is squished. Also slightly adjusted the download data modal so by default full window the box isnt surpassing the height of the window.

Copilot

Pull request overview

This pull request addresses sizing glitches in the Upload Data Modal and Download Data Modal when the browser window is resized or on smaller screens. The changes add comprehensive responsive styles using CSS media queries at consistent breakpoints (1400px, 1200px, 1000px, 850px) to ensure modals and their contents scale appropriately. Additionally, the default height of the download modal's table wrapper has been reduced from 35rem to 30rem to prevent it from exceeding the viewport height on full-screen windows.

Changes:

Added responsive media queries to upload form component for adjusted sizing at smaller breakpoints
Added responsive padding and width adjustments to base modal component
Added comprehensive responsive styles to upload and download modals with progressive sizing reduction
Reduced default table wrapper height in download modal from 35rem to 30rem

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.

File	Description
UploadForm.module.scss	Added responsive styles for upload form container, images, and content at 1200px, 1000px, and 850px breakpoints
BaseModal.module.scss	Added responsive padding and max-width adjustments for smaller screens at 1200px and 850px breakpoints
uploadModal.module.scss	Added comprehensive responsive styles for modal dimensions and spacing at 1200px, 1000px, and 850px breakpoints
downloadModal.module.scss	Reduced default table height and added responsive styles at 1400px, 1200px, 1000px, and 850px breakpoints

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-14T17:31:39Z

front-end/src/components/composite/downloadModal/downloadModal.module.scss

+    width: 60rem;
+
+    .tableWrapper {
+      height: 32rem;


The table wrapper height at the 1400px breakpoint (32rem) is larger than the default height (30rem). This creates an inconsistent responsive behavior where the table actually grows when moving from full window size to 1400px breakpoint, which contradicts typical responsive design patterns where content should shrink or maintain size at smaller breakpoints.

Suggested change

height: 32rem;

height: 30rem;

hydrowoxy

You've overlooked so much many things fool!

Extremely infinite major functional hugepick is the spacing under the upload/download button when I have it in split screen (see below)

I can't believe you would be so careless in your blumbering.... big buffoon I swear. Don't let it happen again.

Both are half my screen but the download one is without a doubt a TON more cramped below the red button, and the upload one has wayyy too much padding below it? Bakaaaa!!!

hans-hc · 2026-01-14T18:45:59Z

I would never address your changes, peasant! Regrettably, you lot have forced my hand. I will comply...just this once...but it is with extreme hesitation and reluctance that I accede to your commands.

gr812b

You blithering fool! You absolutely definitively must implement this in the UI folder of components and do as much as you can in there lest it cascade in a catastrophically faulty manner. More work for you <3
Looks terrible as well. This is the antithesis of the correct end product. You have created something so diametrically opposite to what we expected that you absolutely need to start worrying.
Be concerned about mobile sizes whether you want to or not. It will be seamless to use on mobile without a ground up redesign.

gr812b · 2026-01-14T19:03:08Z

front-end/src/components/composite/uploadModal/uploadModal.module.scss

+    width: 35rem;
+    padding: 0 1.5rem;
+
+    .submitButton {


Can you put this styling directly into our button component? Might make it cascade to the whole codebase a bit better

gr812b · 2026-01-14T19:05:11Z

front-end/src/components/composite/downloadModal/downloadModal.module.scss

+}
+
+@media screen and (max-width: 1200px) {
+  .downloadModal {


This sorta stuff could also be done in baseModal maybe so itll affect this, the upload and the preset and every other modal down the line

pre approved by kai and salma for real

Some more tweaks on the home page, and made the preset card modal when clicked from the home screen responsive. Removed upload file option from preset card as per instructed

hans-hc · 2026-01-20T01:56:09Z

gr812b

The 1000 and 850 breakpoints feel a bit odd, last I believe there are standard ones like 1400+ for ultrawide, down to 1024 for normal, then down to 768 for handhelds and <768 for rest. Might wanna just change those. Might also be good to write a mixin in the @Styles folder to centralize these values

gr812b · 2026-01-20T16:50:00Z

front-end/src/components/simple/howItWorks/HowItWorks.module.scss

+        max-width: 400px;
+      }
+
+      .stepImage {
+        max-width: 400px;
+        min-height: 250px;
+        height: 250px;


gr812b · 2026-01-20T16:50:16Z

front-end/src/components/simple/howItWorks/HowItWorks.module.scss

+        min-height: 250px;
+        height: 250px;


gr812b · 2026-01-20T16:50:31Z

front-end/src/components/simple/howItWorks/HowItWorks.module.scss

+        min-height: 200px;
+        height: 200px;


gr812b · 2026-01-20T16:51:20Z

front-end/src/components/simple/titleCard/accel_x.csv

In the future, before committing just check what you have made changes to, I assume this was accidental. Useful to make sure you intended to make those changes. I'll fix tn!

i forgot to review, sorry. I will fix that asap, thank you

gr812b · 2026-01-20T16:52:45Z

front-end/src/components/ui/uploadForm/UploadForm.module.scss

+    min-height: 16rem;
+  }
+
+  @media screen and (max-width: 850px) {


850 corresponds to what device?

gr812b · 2026-01-20T16:59:11Z

front-end/src/components/composite/presetFilesModal/PresetFilesModal.module.scss

-  padding: 0 1rem;
-  max-width: 90rem;
-
-  .formWrapper {
-    display: flex;
-    gap: 2rem;
-
-    .uploadForm {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      width: 50%;
-
-      .title {
-        all: unset;
-        @include fonts.title-large;
-      }
-    }


Seemingly lots of changes that would change normal screen size behaviour?

hydrowoxy

what kai said

hydrowoxy · 2026-01-20T18:08:15Z

front-end/src/components/composite/presetFilesModal/PresetFilesModal.tsx

+          <FileTable 
+            files={getFolders(files || [])} 
+            selectedFiles={selectedFiles} 
+            setSelectedFiles={setSelectedFiles} 


Looks like even on normal screen sizes these changes eliminate the upload functionality entirely from the preset files modal

IIRC, I thought we agreed that the upload functionality wasnt necessary when clicking on the preset files in general?

No, only on mobile sizes. Neccesary on desktop

hydrowoxy · 2026-01-20T18:10:41Z

front-end/src/components/simple/footer/Footer.module.scss

@@ -7,45 +7,58 @@
    background: var(--background);


Footer looks a bit cramped on the right, Even if i elongate the window this persists

hydrowoxy · 2026-01-20T18:17:56Z

front-end/src/components/composite/presetList/PresetList.module.scss

+      gap: 1rem;
+    }
+  }
+}


Nitpick I suppose but between the grid having 2 columns and 1 column it looks a bit awkward around the threshold like so

…different screen sizes. Added ultrawide/high resolution monitor compatibility

hans-hc · 2026-02-11T19:39:20Z

Wasnt entirely sure about the mixin thing so I would much appreciate a checkup on the recent commit

gr812b

Just gonna review functionality first

No space between button and upload box. Also did you make the default one full screen smaller? Should remain at original size for full sized screens.

At 1000px and 1024px it changes size. Why at both so close? Just stick to one (1024)

This one is also smaller. Keep the original size for full-sized screens. Also button spacing wrong here too.

When shrinking the screen it can look like this, need reactivity for the table

For the select modal, the table shrinks properly. Strange that its diff here and on download. Also as stated elsewhere need that functionality

gr812b · 2026-02-19T01:58:43Z

front-end/src/components/composite/uploadModal/uploadModal.tsx

 import { showErrorToast, showSuccessToast } from '@components/ui/toastNotification/ToastNotification';
 import { rightArrowIcon } from '@assets/icons';
 import styles from './uploadModal.module.scss';
+import baseModalStyles from '@components/ui/baseModal/BaseModal.module.scss';


Don't do this!

Styles are all co-located. If you have styles in baseModalStyles, they are meant to apply to parts in the baseModal. When I suggested doing styles in baseModal this was because you could just apply the styles to the root directly. You should never import a different style file

gr812b · 2026-02-19T02:04:57Z

Wasnt entirely sure about the mixin thing so I would much appreciate a checkup on the recent commit

Mixins look perfect. Just make sure to use these everywhere throughout the codebase

gr812b

Not gonna go through it all but you should use your defined variables and mixin at each of these spots

gr812b · 2026-02-19T02:05:13Z

front-end/src/components/composite/downloadModal/downloadModal.module.scss

-  .submitButton {
-    margin-top: 1.25rem;
+/* Responsive styles for smaller desktop windows */
+@media screen and (max-width: 1400px) {


Use your mixin

gr812b · 2026-02-19T02:05:18Z

front-end/src/components/composite/downloadModal/downloadModal.module.scss

+  }
+}
+
+@media screen and (max-width: 1024px) {


Use your mixin

gr812b · 2026-02-19T02:05:21Z

front-end/src/components/composite/downloadModal/downloadModal.module.scss

+  }
+}
+
+@media screen and (max-width: 768px) {


Use your mixin

Fixed Upload Data Modal and Download Data Modal

2aa3976

as title indicates, fixed the sizing glitches when the window is squished. Also slightly adjusted the download data modal so by default full window the box isnt surpassing the height of the window.

Copilot AI review requested due to automatic review settings January 14, 2026 17:29

hans-hc linked an issue Jan 14, 2026 that may be closed by this pull request

Make the UI more responsive to different screen sizes #281

Open

Copilot started reviewing on behalf of hans-hc January 14, 2026 17:30 View session

Copilot AI reviewed Jan 14, 2026

View reviewed changes

hydrowoxy approved these changes Jan 14, 2026

View reviewed changes

hydrowoxy requested a review from gr812b January 14, 2026 18:27

fixed nit pick visual (thanks salma)

cdb8d75

gr812b requested changes Jan 14, 2026

View reviewed changes

hans-hc added 2 commits January 16, 2026 20:08

fixed super awesome home page

1778cc5

pre approved by kai and salma for real

Home Page minor tweaks, Preset Card modal fix

c4680bd

Some more tweaks on the home page, and made the preset card modal when clicked from the home screen responsive. Removed upload file option from preset card as per instructed

gr812b requested changes Jan 20, 2026

View reviewed changes

gr812b reviewed Jan 20, 2026

View reviewed changes

hydrowoxy requested changes Jan 20, 2026

View reviewed changes

hydrowoxy reviewed Jan 20, 2026

View reviewed changes

Fixed px -> rem, adjusted breakpoints, fixed footer, added mixin for …

ac59c7d

…different screen sizes. Added ultrawide/high resolution monitor compatibility

gr812b reviewed Feb 19, 2026

View reviewed changes

gr812b requested changes Feb 19, 2026

View reviewed changes

Conversation

hans-hc commented Jan 14, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 14, 2026

Choose a reason for hiding this comment

Uh oh!

hydrowoxy left a comment • edited by gr812b Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Extremely infinite major functional hugepick is the spacing under the upload/download button when I have it in split screen (see below)

Uh oh!

hans-hc commented Jan 14, 2026 • edited by hydrowoxy Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gr812b left a comment • edited by hydrowoxy Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

hans-hc commented Jan 20, 2026

Uh oh!

gr812b left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

hydrowoxy left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

hydrowoxy Jan 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

hans-hc commented Feb 11, 2026

Uh oh!

gr812b left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gr812b commented Feb 19, 2026

Uh oh!

gr812b left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

hydrowoxy left a comment •

edited by gr812b

Loading

hans-hc commented Jan 14, 2026 •

edited by hydrowoxy

Loading

gr812b left a comment •

edited by hydrowoxy

Loading

hydrowoxy Jan 20, 2026 •

edited

Loading