From 4731ce5fcdcacd2321568c7900511e7e6baa1b86 Mon Sep 17 00:00:00 2001
From: Alexandra Koch <alexandra@alexandrakoch.se>
Date: Sun, 10 Sep 2023 10:18:35 +0200
Subject: [PATCH 1/3] Truncate title and location in day view

---
 .../components/CalendarDayView/Day/Event.tsx        | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/features/calendar/components/CalendarDayView/Day/Event.tsx b/src/features/calendar/components/CalendarDayView/Day/Event.tsx
index 4e5b4078de..812456e756 100644
--- a/src/features/calendar/components/CalendarDayView/Day/Event.tsx
+++ b/src/features/calendar/components/CalendarDayView/Day/Event.tsx
@@ -15,6 +15,7 @@ import theme from 'theme';
 import { useMessages } from 'core/i18n';
 import useModel from 'core/useModel';
 import { ZetkinEvent } from 'utils/types/zetkin';
+import { truncateOnMiddle } from 'utils/stringUtils';
 
 const Event = ({ event }: { event: ZetkinEvent }) => {
   const messages = useMessages(messageIds);
@@ -64,10 +65,14 @@ const Event = ({ event }: { event: ZetkinEvent }) => {
               sx={{
                 color: theme.palette.secondary.main,
               }}
+              noWrap
             >
-              {event.title ||
-                event.activity?.title ||
-                messages.common.noTitle()}
+              {truncateOnMiddle(
+                event.title ||
+                  event.activity?.title ||
+                  messages.common.noTitle(),
+                50
+              )}
             </Typography>
             {/* Time */}
             <Typography color={theme.palette.secondary.main} component={'div'}>
@@ -105,7 +110,7 @@ const Event = ({ event }: { event: ZetkinEvent }) => {
               >
                 <Box alignItems="center" display="flex" gap={0.5}>
                   <PlaceOutlined />
-                  {event.location?.title}
+                  {truncateOnMiddle(event.location?.title, 40)}
                 </Box>
               </Typography>
             )}

From 04060a13a84af036bd0b3055a26560f0712f9023 Mon Sep 17 00:00:00 2001
From: Alexandra Koch <alexandra@alexandrakoch.se>
Date: Sun, 10 Sep 2023 10:59:45 +0200
Subject: [PATCH 2/3] Linting

---
 .../calendar/components/CalendarDayView/Day/Event.tsx         | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/features/calendar/components/CalendarDayView/Day/Event.tsx b/src/features/calendar/components/CalendarDayView/Day/Event.tsx
index 812456e756..5ed2c0127e 100644
--- a/src/features/calendar/components/CalendarDayView/Day/Event.tsx
+++ b/src/features/calendar/components/CalendarDayView/Day/Event.tsx
@@ -12,10 +12,10 @@ import messageIds from 'features/events/l10n/messageIds';
 import { removeOffset } from 'utils/dateUtils';
 import StatusDot from 'features/events/components/EventPopper/StatusDot';
 import theme from 'theme';
+import { truncateOnMiddle } from 'utils/stringUtils';
 import { useMessages } from 'core/i18n';
 import useModel from 'core/useModel';
 import { ZetkinEvent } from 'utils/types/zetkin';
-import { truncateOnMiddle } from 'utils/stringUtils';
 
 const Event = ({ event }: { event: ZetkinEvent }) => {
   const messages = useMessages(messageIds);
@@ -62,10 +62,10 @@ const Event = ({ event }: { event: ZetkinEvent }) => {
             <StatusDot state={getEventState(event)} />
             {/* Title */}
             <Typography
+              noWrap
               sx={{
                 color: theme.palette.secondary.main,
               }}
-              noWrap
             >
               {truncateOnMiddle(
                 event.title ||

From 4f8458ebdbf42aaf2ef51ee0a71a972949bb40ff Mon Sep 17 00:00:00 2001
From: Alexandra Koch <alexandra@alexandrakoch.se>
Date: Mon, 11 Sep 2023 16:08:16 +0200
Subject: [PATCH 3/3] Add nowrap to Location `<Typography>` element

---
 src/features/calendar/components/CalendarDayView/Day/Event.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/features/calendar/components/CalendarDayView/Day/Event.tsx b/src/features/calendar/components/CalendarDayView/Day/Event.tsx
index 5ed2c0127e..dc231e6af4 100644
--- a/src/features/calendar/components/CalendarDayView/Day/Event.tsx
+++ b/src/features/calendar/components/CalendarDayView/Day/Event.tsx
@@ -107,6 +107,7 @@ const Event = ({ event }: { event: ZetkinEvent }) => {
               <Typography
                 color={theme.palette.secondary.main}
                 component={'div'}
+                noWrap
               >
                 <Box alignItems="center" display="flex" gap={0.5}>
                   <PlaceOutlined />