From 615247db23c31b0892c4c00cad9fb1f0551dfa59 Mon Sep 17 00:00:00 2001
From: Rick Staa <rick.staa@outlook.com>
Date: Thu, 29 Jan 2026 16:59:40 +0100
Subject: [PATCH 1/2] refactor: improve mobile vote item hover behaviour

Ensure the hover behaviour is in the voting item is consistent with the
hover behavoir used in the rest of the explorer.
---
 components/Votes/VoteTable/Views/VoteItem.tsx | 28 ++++++-------------
 1 file changed, 8 insertions(+), 20 deletions(-)

diff --git a/components/Votes/VoteTable/Views/VoteItem.tsx b/components/Votes/VoteTable/Views/VoteItem.tsx
index b949b97e..9b4c0772 100644
--- a/components/Votes/VoteTable/Views/VoteItem.tsx
+++ b/components/Votes/VoteTable/Views/VoteItem.tsx
@@ -106,12 +106,7 @@ function MobileVoteView({ vote, onSelect, formatWeight }: VoteViewProps) {
                 padding: "2px 8px",
                 margin: "-2px -8px",
                 borderRadius: "6px",
-                transition: "all 0.2s ease",
-                "&:hover": {
-                  backgroundColor: "$neutral4",
-                  textDecoration: "underline",
-                  textUnderlineOffset: "4px",
-                },
+                cursor: "pointer",
                 "&:focus-visible": {
                   outline: "2px solid $primary11",
                   outlineOffset: "2px",
@@ -183,25 +178,18 @@ function MobileVoteView({ vote, onSelect, formatWeight }: VoteViewProps) {
                 backgroundColor: "transparent",
                 padding: "$2",
                 margin: "-$2",
-                borderRadius: "$1",
                 minHeight: "44px",
                 fontSize: "$1",
                 fontWeight: 600,
-                transition: "background-color 0.2s ease",
-                "&:hover": {
-                  backgroundColor: "$neutral3",
-                },
-                "&:focus-visible": {
-                  outline: "2px solid $primary11",
-                  outlineOffset: "2px",
-                },
               }}
             >
-              <Box
-                as={isExpanded ? ChevronUpIcon : ChevronDownIcon}
-                css={{ width: 16, height: 16 }}
-              />
-              {isExpanded ? "Hide reason" : "Show reason"}
+              <Flex align="center" gap={1}>
+                <Box
+                  as={isExpanded ? ChevronUpIcon : ChevronDownIcon}
+                  css={{ width: 16, height: 16 }}
+                />
+                {isExpanded ? "Hide reason" : "Show reason"}
+              </Flex>
             </Box>
             {isExpanded && (
               <Box

From c6e2ace68b2a548d114fd3f4e97df0ae53eab9e7 Mon Sep 17 00:00:00 2001
From: Rick Staa <rick.staa@outlook.com>
Date: Thu, 29 Jan 2026 17:36:24 +0100
Subject: [PATCH 2/2] refactor: reuse DataTable pagination for mobile vote
 tabke

Reuse the existing arrow-only pagination from DataTable in the mobile voting table
to ensure consistent behavior and styling.
---
 components/Table/Pagination.tsx               | 67 +++++++++++++++++++
 components/Table/index.tsx                    | 56 +++-------------
 .../Votes/VoteTable/Views/MobileVoteTable.tsx | 50 +++-----------
 components/Votes/VoteTable/Views/VoteItem.tsx | 12 ++--
 4 files changed, 93 insertions(+), 92 deletions(-)
 create mode 100644 components/Table/Pagination.tsx

diff --git a/components/Table/Pagination.tsx b/components/Table/Pagination.tsx
new file mode 100644
index 00000000..5a8ee131
--- /dev/null
+++ b/components/Table/Pagination.tsx
@@ -0,0 +1,67 @@
+import { Box, Flex } from "@livepeer/design-system";
+import { ArrowLeftIcon, ArrowRightIcon } from "@radix-ui/react-icons";
+
+type PaginationProps = {
+  currentPage: number;
+  totalPages: number;
+  canPrevious: boolean;
+  canNext: boolean;
+  onPrevious: () => void;
+  onNext: () => void;
+  css?: object;
+};
+
+const Pagination = ({
+  currentPage,
+  totalPages,
+  canPrevious,
+  canNext,
+  onPrevious,
+  onNext,
+  css,
+}: PaginationProps) => {
+  return (
+    <Flex
+      css={{
+        paddingTop: "$4",
+        paddingBottom: "$4",
+        alignItems: "center",
+        justifyContent: "center",
+        ...css,
+      }}
+    >
+      <Box
+        as={ArrowLeftIcon}
+        css={{
+          cursor: "pointer",
+          color: canPrevious ? "$primary11" : "$hiContrast",
+          opacity: canPrevious ? 1 : 0.5,
+        }}
+        onClick={() => {
+          if (canPrevious) {
+            onPrevious();
+          }
+        }}
+      />
+      <Box css={{ fontSize: "$2", marginLeft: "$3", marginRight: "$3" }}>
+        Page <Box as="span">{currentPage}</Box> of{" "}
+        <Box as="span">{totalPages}</Box>
+      </Box>
+      <Box
+        as={ArrowRightIcon}
+        css={{
+          cursor: "pointer",
+          color: canNext ? "$primary11" : "$hiContrast",
+          opacity: canNext ? 1 : 0.5,
+        }}
+        onClick={() => {
+          if (canNext) {
+            onNext();
+          }
+        }}
+      />
+    </Flex>
+  );
+};
+
+export default Pagination;
diff --git a/components/Table/index.tsx b/components/Table/index.tsx
index db3eddcf..a58a2d7b 100644
--- a/components/Table/index.tsx
+++ b/components/Table/index.tsx
@@ -8,12 +8,7 @@ import {
   Thead,
   Tr,
 } from "@livepeer/design-system";
-import {
-  ArrowLeftIcon,
-  ArrowRightIcon,
-  ChevronDownIcon,
-  ChevronUpIcon,
-} from "@radix-ui/react-icons";
+import { ChevronDownIcon, ChevronUpIcon } from "@radix-ui/react-icons";
 import { ReactNode } from "react";
 import {
   Column,
@@ -26,6 +21,8 @@ import {
   useTable,
 } from "react-table";
 
+import Pagination from "./Pagination";
+
 function DataTable<T extends object>({
   heading = null,
   input = null,
@@ -243,45 +240,14 @@ function DataTable<T extends object>({
               </Tbody>
             </Table>
           </Box>
-          <Flex
-            css={{
-              paddingTop: "$4",
-              paddingBottom: "$4",
-              alignItems: "center",
-              justifyContent: "center",
-            }}
-          >
-            <Box
-              as={ArrowLeftIcon}
-              css={{
-                cursor: "pointer",
-                color: canPreviousPage ? "$primary11" : "$hiContrast",
-                opacity: canPreviousPage ? 1 : 0.5,
-              }}
-              onClick={() => {
-                if (canPreviousPage) {
-                  previousPage();
-                }
-              }}
-            />
-            <Box css={{ fontSize: "$2", marginLeft: "$3", marginRight: "$3" }}>
-              Page <Box as="span">{pageIndex + 1}</Box> of{" "}
-              <Box as="span">{pageCount}</Box>
-            </Box>
-            <Box
-              as={ArrowRightIcon}
-              css={{
-                cursor: "pointer",
-                color: canNextPage ? "$primary11" : "$hiContrast",
-                opacity: canNextPage ? 1 : 0.5,
-              }}
-              onClick={() => {
-                if (canNextPage) {
-                  nextPage();
-                }
-              }}
-            />
-          </Flex>
+          <Pagination
+            currentPage={pageIndex + 1}
+            totalPages={pageCount}
+            canPrevious={canPreviousPage}
+            canNext={canNextPage}
+            onPrevious={previousPage}
+            onNext={nextPage}
+          />
         </>
       </Box>
     </>
diff --git a/components/Votes/VoteTable/Views/MobileVoteTable.tsx b/components/Votes/VoteTable/Views/MobileVoteTable.tsx
index badee3ef..b322c2ba 100644
--- a/components/Votes/VoteTable/Views/MobileVoteTable.tsx
+++ b/components/Votes/VoteTable/Views/MobileVoteTable.tsx
@@ -1,5 +1,5 @@
-import { Box, Button, Flex, Text } from "@livepeer/design-system";
-import { ArrowLeftIcon, ArrowRightIcon } from "@radix-ui/react-icons";
+import Pagination from "@components/Table/Pagination";
+import { Box, Text } from "@livepeer/design-system";
 import React from "react";
 
 import { VoteTableProps } from "./DesktopVoteTable";
@@ -44,44 +44,14 @@ export const MobileVoteCards: React.FC<VoteTableProps> = (props) => {
 
       {/* Pagination */}
       {totalPages > 1 && (
-        <Flex
-          css={{
-            marginTop: "$4",
-            justifyContent: "center",
-            alignItems: "center",
-            gap: "$4",
-          }}
-        >
-          <Button
-            size="1"
-            disabled={currentPage === 1}
-            onClick={() => onPageChange?.(currentPage - 1)}
-            css={{
-              display: "flex",
-              alignItems: "center",
-              gap: "$1",
-              color: currentPage === 1 ? "$neutral8" : "$white",
-            }}
-          >
-            <ArrowLeftIcon /> Previous
-          </Button>
-          <Text css={{ fontSize: "$1", color: "$neutral11" }}>
-            Page {currentPage} of {totalPages}
-          </Text>
-          <Button
-            size="1"
-            disabled={currentPage === totalPages}
-            onClick={() => onPageChange?.(currentPage + 1)}
-            css={{
-              display: "flex",
-              alignItems: "center",
-              gap: "$1",
-              color: currentPage === totalPages ? "$neutral8" : "$white",
-            }}
-          >
-            Next <ArrowRightIcon />
-          </Button>
-        </Flex>
+        <Pagination
+          currentPage={currentPage}
+          totalPages={totalPages}
+          canPrevious={currentPage > 1}
+          canNext={currentPage < totalPages}
+          onPrevious={() => onPageChange?.(currentPage - 1)}
+          onNext={() => onPageChange?.(currentPage + 1)}
+        />
       )}
     </Box>
   );
diff --git a/components/Votes/VoteTable/Views/VoteItem.tsx b/components/Votes/VoteTable/Views/VoteItem.tsx
index 9b4c0772..f94c508e 100644
--- a/components/Votes/VoteTable/Views/VoteItem.tsx
+++ b/components/Votes/VoteTable/Views/VoteItem.tsx
@@ -183,13 +183,11 @@ function MobileVoteView({ vote, onSelect, formatWeight }: VoteViewProps) {
                 fontWeight: 600,
               }}
             >
-              <Flex align="center" gap={1}>
-                <Box
-                  as={isExpanded ? ChevronUpIcon : ChevronDownIcon}
-                  css={{ width: 16, height: 16 }}
-                />
-                {isExpanded ? "Hide reason" : "Show reason"}
-              </Flex>
+              <Box
+                as={isExpanded ? ChevronUpIcon : ChevronDownIcon}
+                css={{ width: 16, height: 16 }}
+              />
+              {isExpanded ? "Hide reason" : "Show reason"}
             </Box>
             {isExpanded && (
               <Box