diff --git a/frontend/src/components/common/EventCard/EventCard.module.scss b/frontend/src/components/common/EventCard/EventCard.module.scss
index 3a8412c75..aa6ce4c69 100644
--- a/frontend/src/components/common/EventCard/EventCard.module.scss
+++ b/frontend/src/components/common/EventCard/EventCard.module.scss
@@ -4,6 +4,8 @@
overflow: hidden;
padding: 0;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
+ container-type: inline-size;
+ min-width: 280px;
&:hover {
border-color: var(--mantine-color-gray-4);
@@ -42,7 +44,7 @@
color: inherit;
min-height: 140px;
- @include mixins.respond-below(md) {
+ @include mixins.respond-below(md, true) {
flex-direction: column;
min-height: auto;
position: relative;
@@ -55,7 +57,7 @@
min-width: 200px;
overflow: hidden;
- @include mixins.respond-below(md) {
+ @include mixins.respond-below(md, true) {
width: 100%;
min-width: 100%;
height: 140px;
@@ -180,7 +182,7 @@
gap: 20px;
min-width: 0;
- @include mixins.respond-below(md) {
+ @include mixins.respond-below(md, true) {
flex-direction: column;
align-items: stretch;
padding: 14px;
@@ -203,7 +205,11 @@
color: var(--mantine-color-text);
line-height: 1.3;
transition: color 0.15s ease;
- @include mixins.ellipsis;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
}
.meta {
@@ -284,12 +290,12 @@
border-radius: var(--hi-radius-md);
flex-shrink: 0;
- @include mixins.respond-below(lg) {
+ @include mixins.respond-below(lg, true) {
gap: 18px;
padding: 10px 14px;
}
- @include mixins.respond-below(md) {
+ @include mixins.respond-below(md, true) {
justify-content: space-around;
padding: 12px;
}
@@ -303,7 +309,7 @@
cursor: default;
min-width: 75px;
- @include mixins.respond-below(lg) {
+ @include mixins.respond-below(lg, true) {
min-width: 65px;
}
}
@@ -314,7 +320,7 @@
color: var(--mantine-color-text);
line-height: 1;
- @include mixins.respond-below(lg) {
+ @include mixins.respond-below(lg, true) {
font-size: 16px;
}
}
@@ -325,7 +331,7 @@
color: var(--mantine-color-green-7);
line-height: 1;
- @include mixins.respond-below(lg) {
+ @include mixins.respond-below(lg, true) {
font-size: 16px;
}
}
@@ -341,7 +347,7 @@
.menuButton {
flex-shrink: 0;
- @include mixins.respond-below(md) {
+ @include mixins.respond-below(md, true) {
position: absolute;
top: 10px;
right: 10px;
@@ -351,7 +357,7 @@
.actionButton {
color: var(--mantine-color-dimmed);
- @include mixins.respond-below(md) {
+ @include mixins.respond-below(md, true) {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(4px);
diff --git a/frontend/src/components/layouts/OrganizerLayout/index.tsx b/frontend/src/components/layouts/OrganizerLayout/index.tsx
index 2d8aa3116..3e66cb94e 100644
--- a/frontend/src/components/layouts/OrganizerLayout/index.tsx
+++ b/frontend/src/components/layouts/OrganizerLayout/index.tsx
@@ -3,7 +3,7 @@ import {
IconBrandStripe,
IconCalendar,
IconCalendarPlus,
- IconChartBar,
+ IconChartPie,
IconChevronRight,
IconCreditCard,
IconDashboard,
@@ -19,7 +19,7 @@ import {t} from "@lingui/macro";
import {BreadcrumbItem, NavItem} from "../AppLayout/types.ts";
import AppLayout from "../AppLayout";
import {NavLink, useLocation, useParams} from "react-router";
-import {Button, Modal, Text, Stack} from "@mantine/core";
+import {Button, Modal, Stack, Text} from "@mantine/core";
import {useGetOrganizer} from "../../../queries/useGetOrganizer.ts";
import {useState} from "react";
import {CreateEventModal} from "../../modals/CreateEventModal";
@@ -48,7 +48,10 @@ const OrganizerLayout = () => {
const [createModalOpen, {open: openCreateModal, close: closeCreateModal}] = useDisclosure(false);
const [switchOrganizerModalOpen, {open: openSwitchModal, close: closeSwitchModal}] = useDisclosure(false);
const [shareModalOpen, {open: openShareModal, close: closeShareModal}] = useDisclosure(false);
- const [emailVerificationModalOpen, {open: openEmailVerificationModal, close: closeEmailVerificationModal}] = useDisclosure(false);
+ const [emailVerificationModalOpen, {
+ open: openEmailVerificationModal,
+ close: closeEmailVerificationModal
+ }] = useDisclosure(false);
const {data: organizerResposne} = useGetOrganizers();
const organizers = organizerResposne?.data;
const {data: account} = useGetAccount();
@@ -73,7 +76,7 @@ const OrganizerLayout = () => {
{
link: 'reports',
label: t`Reports`,
- icon: IconChartBar,
+ icon: IconChartPie,
isActive: (isActive) => isActive || location.pathname.includes('/report/')
},
@@ -146,7 +149,7 @@ const OrganizerLayout = () => {
className={classes.createEventBreadcrumb}
onClick={() => setShowCreateEventModal(true)}
>
- {t`Create Event`}
+ {t`Create Event`}
),
}
@@ -195,7 +198,8 @@ const OrganizerLayout = () => {
: }
+ leftSection={organizer?.status === 'DRAFT' ? :
+ }
rightSection={}
>
{organizer?.status === 'DRAFT'
@@ -276,10 +280,10 @@ const OrganizerLayout = () => {
{t`You must verify your email address before you can update the organizer status.`}
-
+
{!emailConfirmationResent ? (
-