如何在Full Calendar中定位:last-child表格行，解决最后列长事件名显示问题

我在用Full Calendar库时，碰到长事件名称没法在单日单元格里完整显示的问题（截图显示日历单元格内长事件名称被截断，无法完整展示）。

针对前六列（Nie - Pt），我通过:hover伪类修改position属性，实现了鼠标悬停时显示完整事件名：

.fc-daygrid-event {
    &:hover {
      position: absolute;
    }
}

但这个方案在最后一列“Sob”上无效。我想给最后一列设置white-space:unset来实现完整显示，试了三种定位:last-child元素的写法，都没生效，求正确的选择器写法：

import styled from '@emotion/styled';

.fc-day-grid .fc-row td:last-child {
    background-color: yellow;
    &:hover {
      white-space: unset;
    }
}

.fc-day .fc-day-sun .fc-day-future .fc-daygrid-day {
    background-color: yellow;
    &:last-child {
      :hover {
        white-space: unset;
      }
    }
}

.fc-day-grid .fc-row td:nth-of-type(7) {
    background-color: yellow;
    &:hover {
      white-space: unset;
    }
}

或者也可以提供其他解决这个问题的方案。我用emotion/react库处理样式，组件代码如下：

<StyledCalendar>
    <FullCalendar
      plugins={[dayGridPlugin]}
      initialView="dayGridMonth"
      buttonText={{ today: t('calendar.today') }}
      titleFormat={(date) => monthYearTitleHandler(date)}
      dayHeaderContent={({ date }) => calendarDayNameHandler(date)}
      displayEventEnd
      displayEventTime
      events={mockEvents}
      eventTimeFormat={{
        hour: '2-digit',
        minute: '2-digit',
        meridiem: false,
      }}
    />
</StyledCalendar>

内容的提问来源于stack exchange，提问作者marcinb1986