Merge pull request #64 from datasektionen/calendar-header-fix

Fix event calendar date headers line-breaking on small screens
datasektionen · Feb 26, 2024 · 9e989fc · 9e989fc
2 parents fbd2fa1 + d8320fe
commit 9e989fc
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git a/src/components/EventCalendar/EventCalendar.module.css b/src/components/EventCalendar/EventCalendar.module.css
@@ -19,6 +19,7 @@
 
 .calendar th {
   text-align: center;
+  line-height: 1.05;
   color: white;
 }
 .calendar td {
@@ -31,7 +32,7 @@
 }
 
 .calendar .yearHeader th {
-  height: 28px;
+  height: 22px;
   bottom: 0;
   vertical-align: bottom;
   font-size: small;
@@ -43,12 +44,12 @@
   padding: 0;
 }
 .calendar .monthHeader th {
-  height: 32px;
+  height: 24px;
   vertical-align: top;
   font-size: larger;
 }
 .calendar .dateHeader th {
-  height: 30px;
+  height: 44px;
   font-size: small;
 }
 

diff --git a/src/components/EventCalendar/index.jsx b/src/components/EventCalendar/index.jsx
@@ -357,8 +357,8 @@ export default function EventCalendar({ events, location, lang }) {
     dateHeader.push(
       <th key={date.toUTCString()} className={cx(monthClass)}>
         <Translate>
-          <Swedish>{`${SWEDISH_WEEK_DAYS[i]} ${date.getDate()}`}</Swedish>
-          <English>{`${ENGLISH_WEEK_DAYS[i]} ${date.getDate()}`}</English>
+          <Swedish>{SWEDISH_WEEK_DAYS[i]}<br/>{date.getDate()}</Swedish>
+          <English>{ENGLISH_WEEK_DAYS[i]}<br/>{date.getDate()}</English>
         </Translate>
       </th>
     );