Fix: Ticket title styling (#837)

Author: daveearley

frontend/src/components/common/AttendeeTicket/AttendeeTicket.module.scss

@@ -52,8 +52,10 @@
   @media print {
     background: #ffffff;
     border-bottom: 2px solid #e0e0e0;
-    padding: 0 0 30px 0;
-    margin-bottom: 30px;
+    padding: 15px 0;
+    margin-bottom: 20px;
+    display: flex;
+    justify-content: center;
   }
 }
 
@@ -62,6 +64,7 @@
   align-items: center;
   justify-content: space-between;
   gap: 24px;
+  width: 100%;
 
   @include mixins.respond-below(sm) {
     flex-direction: column;

frontend/src/components/routes/product-widget/AttendeeProductAndInformation/AttendeeProductAndInformation.module.scss

@@ -0,0 +1,11 @@
+.title {
+  text-align: center;
+  color: #000;
+  font-size: 24px;
+  font-weight: 600;
+  margin-bottom: 40px;
+
+  @media print {
+    display: none;
+  }
+}

frontend/src/components/routes/product-widget/AttendeeProductAndInformation/index.tsx

@@ -7,6 +7,7 @@ import {Container} from "@mantine/core";
 import {t} from "@lingui/macro";
 import {PoweredByFooter} from "../../../common/PoweredByFooter";
 import {OnlineEventDetails} from "../../../common/OnlineEventDetails";
+import classes from './AttendeeProductAndInformation.module.scss';
 
 export const AttendeeProductAndInformation = () => {
     const {eventId, attendeeShortId} = useParams();
@@ -32,7 +33,7 @@ export const AttendeeProductAndInformation = () => {
      */
     return (
         <Container>
-            <h2>{t`Your ticket for`} {event.title}</h2>
+            <h2 className={classes.title}>{t`Your ticket for`} {event.title}</h2>
 
             <AttendeeTicket
                 attendee={attendee as Attendee}