From c9d03f238b75c2c42c848faac679fa59f1240136 Mon Sep 17 00:00:00 2001
From: David Juhasz <djjuhasz@gmail.com>
Date: Wed, 9 Oct 2024 14:16:47 -0700
Subject: [PATCH] Hide some pager elements on small screen sizes

Hide page links and ellipses on small screen sizes.
---
 dashboard/src/pages/packages/index.vue | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/dashboard/src/pages/packages/index.vue b/dashboard/src/pages/packages/index.vue
index d8547bc0e..3c4e082e2 100644
--- a/dashboard/src/pages/packages/index.vue
+++ b/dashboard/src/pages/packages/index.vue
@@ -137,10 +137,17 @@ const toggleLegend = () => {
               ><IconCaretLeftFill
             /></a>
           </li>
-          <li v-if="packageStore.pager.first > 1" aria-hidden="true">
+          <li
+            v-if="packageStore.pager.first > 1"
+            class="d-none d-sm-block"
+            aria-hidden="true"
+          >
             <a href="#" class="page-link disabled">…</a>
           </li>
-          <li v-for="pg in packageStore.pager.pages">
+          <li
+            v-for="pg in packageStore.pager.pages"
+            :class="{ 'd-none d-sm-block': pg != packageStore.pager.current }"
+          >
             <a
               href="#"
               :class="{
@@ -159,6 +166,7 @@ const toggleLegend = () => {
           </li>
           <li
             v-if="packageStore.pager.last < packageStore.pager.total"
+            class="d-none d-sm-block"
             aria-hidden="true"
           >
             <a href="#" class="page-link disabled">…</a>