PageSelector buttons could only be clicked in the middle

src/components/PageSelector.tsx

@@ -13,26 +13,22 @@ export default function PageSelector(props: Props): JSX.Element {
 
   return (
     <div className={`flex place-content-center flex-row ${props.className}`}>
-      <Button className="rounded-r-none">
-        <span
-          onClick={() => {
-            if (page > 0) setPage(page - 1);
-          }}
-          className="material-icons"
-        >
-          navigate_before
-        </span>
+      <Button
+        onClick={() => {
+          if (page > 0) setPage(page - 1);
+        }}
+        className="rounded-r-none"
+      >
+        <span className="material-icons">navigate_before</span>
       </Button>
       <Button className="rounded-none border-x-0">{page + 1}</Button>
-      <Button className="rounded-l-none">
-        <span
-          onClick={() => {
-            if (page < maxPage) setPage(page + 1);
-          }}
-          className="material-icons"
-        >
-          navigate_next
-        </span>
+      <Button
+        onClick={() => {
+          if (page < maxPage) setPage(page + 1);
+        }}
+        className="rounded-l-none"
+      >
+        <span className="material-icons">navigate_next</span>
       </Button>
     </div>
   );