Fix pagination buttons and mobile view of kalender

www/css/calendar.css

@@ -1,9 +1,24 @@
+.pagination_bar {
+	display: grid;
+	grid-template-columns: 8em auto 8em;
+	grid-template-areas: "left . right";
+	text-align: center;
+}
+.pagination_bar >*:nth-child(1) {
+	grid-area: left;
+}
+.pagination_bar >*:nth-child(2) {
+	grid-area: right;
+}
+
 figure.calendar {
 	margin: 0;
 	padding:0;
+	overflow-x: auto;
 }
 
 .calendar ul {
+	min-width: 43em;
 	list-style-type: none;
 	padding-left:0;
 
@@ -88,7 +103,10 @@ figure.calendar {
 	color: white;
 	border-radius: 0.75em;
 	text-align: center;
+	padding: 0 0.2em;
 	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 .calendar ul li section + section {
 	margin-top: 0.1em;

www/kalender/index.php

@@ -36,7 +36,7 @@ $days_in_month = date('t', mktime(0, 0, 0, $month, 1, $year));
 	<main>
 		<h2 style="text-align:center;">PVV Kalender for <?=$months_translations[$month-1]?> <?=$year?></h2>
 	
-		<p><?php
+		<div class="pagination_bar"><?php
 		$pmonth = $month-1;
 		$nmonth = $month+1;
 		$pyear=$year;
@@ -45,9 +45,8 @@ $days_in_month = date('t', mktime(0, 0, 0, $month, 1, $year));
 		if ($nmonth==13) {$nmonth=1; $nyear++;}
 		?>
 		<a class="btn noselect" href="../kalender?year=<?=$pyear?>&amp;month=<?=$pmonth?>">Forrige måned</a>
-		<a class="btn noselect" style="float:right;" href="../kalender?year=<?=$nyear?>&amp;month=<?=$nmonth?>">Neste måned</a>
+		<a class="btn noselect" href="../kalender?year=<?=$nyear?>&amp;month=<?=$nmonth?>">Neste måned</a>
-		</p>
+		</div>
-	
 	
 		<figure class="calendar">
 			<ul>