fix(LOY-196): replace employee number with dummy value

add support for className to modal

apps/scandic-web/components/Modal/index.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import { cx } from "class-variance-authority"
 import { motion } from "framer-motion"
 import { type PropsWithChildren, useEffect, useState } from "react"
 import {
@@ -40,6 +41,7 @@ function InnerModal({
   subtitle,
   withActions,
   hideHeader,
+  className,
 }: PropsWithChildren<InnerModalProps>) {
   const intl = useIntl()
 
@@ -67,7 +69,7 @@ function InnerModal({
     <MotionOverlay
       animate={animation}
       className={styles.overlay}
-      initial={"hidden"}
+      initial="hidden"
       isDismissable
       isExiting={animation === AnimationStateEnum.hidden}
       onAnimationComplete={modalStateHandler}
@@ -76,10 +78,10 @@ function InnerModal({
       onOpenChange={onOpenChange}
     >
       <MotionModal
-        className={styles.modal}
+        className={cx(styles.modal, className)}
         variants={slideInOut}
         animate={animation}
-        initial={"hidden"}
+        initial="hidden"
       >
         <Dialog
           className={styles.dialog}
@@ -135,6 +137,7 @@ export default function Modal({
   children,
   withActions = false,
   hideHeader = false,
+  className = "",
 }: PropsWithChildren<ModalProps>) {
   const [animation, setAnimation] = useState<AnimationState>(
     AnimationStateEnum.visible
@@ -163,6 +166,7 @@ export default function Modal({
         subtitle={subtitle}
         withActions={withActions}
         hideHeader={hideHeader}
+        className={className}
       >
         {children}
       </InnerModal>
@@ -185,6 +189,7 @@ export default function Modal({
         title={title}
         subtitle={subtitle}
         withActions={withActions}
+        className={className}
       >
         {children}
       </InnerModal>

apps/scandic-web/components/Modal/modal.ts

@@ -14,6 +14,7 @@ export type ModalProps = {
   subtitle?: string
   withActions?: boolean
   hideHeader?: boolean
+  className?: string
 } & (
   | { trigger: JSX.Element; isOpen?: never; onToggle?: never }
   | {

apps/scandic-web/components/MyPages/DigitalTeamMemberCard/Client.tsx

@@ -36,6 +36,7 @@ export default function DigitalTeamMemberCardClient({
           </Typography>
         </Button>
       }
+      className={styles.modal}
     >
       <Typography variant="Title/xs">
         <h2 className={styles.title}>
@@ -60,7 +61,8 @@ export default function DigitalTeamMemberCardClient({
             <div className={styles.employeeNumber}>
               <Typography variant="Title/sm">
                 {/* TODO: Should display employee number */}
-                <div>{user.membershipNumber}</div>
+                {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+                <div>123 456</div>
               </Typography>
               <svg
                 width="42"

apps/scandic-web/components/MyPages/DigitalTeamMemberCard/digitalTeamMemberCard.module.css

@@ -105,3 +105,9 @@
 .footer {
   text-align: center;
 }
+
+@media screen and (min-width: 768px) {
+  .modal {
+    max-width: 375px;
+  }
+}