Update responsive styles

Author: daveearley

frontend/src/components/layouts/Event/Event.module.scss

@@ -96,7 +96,7 @@
       }
 
       @include mixins.respond-below(md) {
-          display: none;
+        display: none;
 
       }
     }
@@ -506,10 +506,30 @@
       transform: translateY(-1px);
     }
 
-    @include mixins.respond-below(sm) {
-      span {
+    .eventPageButtonText {
+      // Default: hide both
+      .mobile,
+      .desktop {
         display: none;
       }
+
+      // Show mobile text from sm and up
+      @include mixins.respond-above(sm) {
+        .mobile {
+          display: block;
+        }
+      }
+
+      // Switch to desktop text at md and up
+      @include mixins.respond-above(md) {
+        .mobile {
+          display: none;
+        }
+
+        .desktop {
+          display: block;
+        }
+      }
     }
   }
 

frontend/src/components/layouts/Event/index.tsx

@@ -1,4 +1,4 @@
-import {Badge, Breadcrumbs, Burger, Button, UnstyledButton, VisuallyHidden} from '@mantine/core';
+import {ActionIcon, Badge, Breadcrumbs, Burger, Button, UnstyledButton, VisuallyHidden} from '@mantine/core';
 import {NavLink, Outlet, useLocation, useParams} from "react-router";
 import {
     IconChartPie,
@@ -202,13 +202,16 @@ const EventLayout = () => {
                             variant={'transparent'}
                             leftSection={<IconExternalLink size={17}/>}
                             className={classes.eventPageButton}
+                            title={t`Preview Event page`}
                         >
-                            <ShowForDesktop>
-                                {t`Preview Event page`}
-                            </ShowForDesktop>
-                            <ShowForMobile>
-                                {t`Event page`}
-                            </ShowForMobile>
+                            <div className={classes.eventPageButtonText}>
+                                <span className={classes.desktop}>
+                                    {t`Preview Event page`}
+                                </span>
+                                <span className={classes.mobile}>
+                                    {t`Event Page`}
+                                </span>
+                            </div>
 
                         </Button>
                         <div className={classes.menu}>

frontend/src/components/layouts/EventHomepage/index.tsx

@@ -1,14 +1,14 @@
-import { Header } from "./Header";
+import {Header} from "./Header";
 import "./styles.scss";
-import { EventInformation } from "./EventInformation";
+import {EventInformation} from "./EventInformation";
 import classes from "./EventHomepage.module.scss";
 import SelectProducts from "../../routes/product-widget/SelectProducts";
 import "../../../styles/widget/default.scss";
 import React from "react";
-import { EventDocumentHead } from "../../common/EventDocumentHead";
-import { eventCoverImageUrl } from "../../../utilites/urlHelper.ts";
-import { Event } from "../../../types.ts";
-import { EventNotAvailable } from "./EventNotAvailable";
+import {EventDocumentHead} from "../../common/EventDocumentHead";
+import {eventCoverImageUrl} from "../../../utilites/urlHelper.ts";
+import {Event} from "../../../types.ts";
+import {EventNotAvailable} from "./EventNotAvailable";
 
 interface EventHomepageProps {
     colors?: {
@@ -26,8 +26,8 @@ interface EventHomepageProps {
     promoCode?: string;
 }
 
-const EventHomepage = ({ colors, continueButtonText, backgroundType, ...loaderData }: EventHomepageProps) => {
-    const { event, promoCodeValid, promoCode } = loaderData;
+const EventHomepage = ({colors, continueButtonText, backgroundType, ...loaderData}: EventHomepageProps) => {
+    const {event, promoCodeValid, promoCode} = loaderData;
 
     const styleOverrides = {
         "--homepage-body-background-color":
@@ -45,7 +45,7 @@ const EventHomepage = ({ colors, continueButtonText, backgroundType, ...loaderDa
     } as React.CSSProperties;
 
     if (!event) {
-        return <EventNotAvailable />;
+        return <EventNotAvailable/>;
     }
 
     const coverImage = eventCoverImageUrl(event);
@@ -56,23 +56,35 @@ const EventHomepage = ({ colors, continueButtonText, backgroundType, ...loaderDa
             {(coverImage && backgroundType === 'MIRROR_COVER_IMAGE') && (
                 <div
                     className={classes.background}
-                    style={{ backgroundImage: `url(${coverImage})` }}
+                    style={{backgroundImage: `url(${coverImage})`}}
                 />
             )}
             {(!coverImage || backgroundType === 'COLOR') &&
                 <div className={classes.background}
-                    style={{ backgroundColor: 'var(--homepage-body-background-color)' }}
+                     style={{backgroundColor: 'var(--homepage-body-background-color)'}}
                 />
             }
             <div
                 id={"event-homepage"}
                 className={classes.styleContainer}
             >
-                <div className={classes.container} style={{maxWidth: '1000px', margin: '30px auto'}}>
-                    <Header event={event} />
+                <style>
+                    {`
+                        .initialContainerStyle {
+                            max-width: 1000px;
+                            margin: 30px auto;
+                            
+                            @media (max-width: 767px) {
+                                margin: 0;
+                            }
+                        }
+                    `}
+                </style>
+                <div className={`initialContainerStyle ${classes.container}`}>
+                    <Header event={event}/>
                     <div className={classes.innerContainer}>
                         <div className={classes.eventInfo}>
-                            <EventInformation event={event} />
+                            <EventInformation event={event}/>
                         </div>
 
                         <div className={classes.productContainer}>

frontend/src/components/routes/event/GettingStarted/GettingStarted.module.scss

@@ -25,7 +25,7 @@
     z-index: 0;
   }
 
-  @include mixins.respond-below(sm) {
+  @include mixins.respond-below(lg) {
     &::before {
       display: none;
     }