Adjust modal widths globally

- Set width to 100% (mobile first approach)
- Set max-width to 39rem
  - This is based on Figma designs for report package modal, but looks
    like a pretty good default value for other modals as well
  - If needed, modals can override this value with local CSS, like is
    done for login button modal
- Set max-width to 15rem. The value is selected totally arbitrarily.
  The intent is for the modal to break less on very narrow screens. We
  might want to rethink the modal implementation from mobile first
  perspective separately, to e.g. have less padding on mobile where the
  screen estate is limited
- How well these changes work on modals on package wiki page couldn't
  be confirmed as the feature is currently very much broken

Author: anttimaki

apps/cyberstorm-remix/app/commonComponents/Navigation/Navigation.css

@@ -134,12 +134,15 @@
     color: var(--color-text-tertiary);
   }
 
+  .navigation-login__modal {
+    max-width: min-content;
+  }
+
   .navigation-login {
     display: flex;
     flex-direction: column;
     gap: 2rem;
     align-items: center;
-    width: min-content;
     padding: var(--space-32);
   }
 

apps/cyberstorm-remix/app/commonComponents/Navigation/Navigation.tsx

@@ -246,6 +246,7 @@ export function DesktopLoginPopover() {
           Log In
         </NewButton>
       }
+      contentClasses="navigation-login__modal"
     >
       <div className="navigation-login">
         <svg

apps/cyberstorm-remix/app/p/components/ReportPackage/ReportPackageModal.tsx

@@ -12,7 +12,6 @@ export function ReportPackageModal(props: ReportPackageModalProps) {
   return (
     <Modal
       titleContent="Report Package"
-      csSize="small"
       disableBody
       open={props.isOpen}
       onOpenChange={props.onOpenChange}

packages/cyberstorm/src/newComponents/Modal/Modal.css

@@ -22,6 +22,10 @@
     align-self: stretch;
     justify-content: center;
 
+    width: 100%;
+    min-width: 15rem;
+    max-width: 39rem;
+
     /* padding: var(--modal-content-padding); */
     border: var(--modal-border);
     border-radius: var(--modal-border-radius);