From af17f80fe154bdce30f3c16c6a22dfca4dc2950a Mon Sep 17 00:00:00 2001
From: Romein van Buren <romein@vburen.nl>
Date: Mon, 18 Jul 2022 12:11:45 +0200
Subject: [PATCH] Larger pagination

---
 gui/dashboard/app.svelte | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/gui/dashboard/app.svelte b/gui/dashboard/app.svelte
index 3be21e3..1b3117c 100644
--- a/gui/dashboard/app.svelte
+++ b/gui/dashboard/app.svelte
@@ -133,12 +133,12 @@
       <div class="time">{time}</div>
       {#if pageCount > 1}
         <div>
-          {pageNum + 1}/{pageCount}
-        </div>
-        <div class="pagination">
-          {#each Array(pageCount).fill('') as _, i}
-            <em class:active={pageNum === i}></em>
-          {/each}
+          <span class="pagecount">{pageNum + 1}/{pageCount}</span>
+          <span class="pagination">
+            {#each Array(pageCount).fill('') as _, i}
+              <em class:active={pageNum === i}></em>
+            {/each}
+          </span>
         </div>
       {/if}
       <Settings />
@@ -195,6 +195,10 @@
     align-items: flex-end;
   }
 
+  .footer > .time {
+    width: 5em;
+  }
+
   .pagination em {
     display: inline-block;
     margin-left: 0.5rem;
@@ -203,9 +207,15 @@
     border-radius: 5px;
     background-color: #fff;
     opacity: 0.4;
+    vertical-align: middle;
   }
 
   .pagination em.active {
     opacity: 1;
   }
+
+  .pagecount {
+    width: 2em;
+    display: inline-block;
+  }
 </style>