Refactor page size selection in EvaluationTable component

- Replaced the native select element with a custom Select component for improved styling and consistency.
- Updated the page size selection logic to maintain functionality while enhancing the user interface.

Author: Dylan Huang

vite-app/src/components/EvaluationTable.tsx

@@ -3,6 +3,7 @@ import { useState, useEffect } from "react";
 import { state } from "../App";
 import { EvaluationRow } from "./EvaluationRow";
 import Button from "./Button";
+import Select from "./Select";
 
 const TableBody = observer(
   ({ currentPage, pageSize }: { currentPage: number; pageSize: number }) => {
@@ -58,16 +59,16 @@ export const EvaluationTable = observer(() => {
           </div>
           <div className="flex items-center gap-2">
             <label className="text-xs text-gray-600">Page size:</label>
-            <select
+            <Select
               value={pageSize}
               onChange={(e) => handlePageSizeChange(Number(e.target.value))}
-              className="text-xs border border-gray-300 rounded px-2 py-1 bg-white"
+              size="sm"
             >
               <option value={25}>25</option>
               <option value={50}>50</option>
               <option value={100}>100</option>
               <option value={200}>200</option>
-            </select>
+            </Select>
           </div>
         </div>
         <div className="flex items-center gap-2">

vite-app/src/components/Select.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+
+interface SelectProps
+  extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "size"> {
+  size?: "sm" | "md";
+  className?: string;
+}
+
+const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
+  ({ className = "", size = "sm", children, ...props }, ref) => {
+    const baseClasses =
+      "border text-xs font-medium focus:outline-none bg-white text-gray-700 border-gray-300 hover:border-gray-400 focus:border-gray-500";
+
+    const sizeClasses = {
+      sm: "px-2 py-0.5",
+      md: "px-3 py-1",
+    };
+
+    return (
+      <select
+        ref={ref}
+        className={`${baseClasses} ${sizeClasses[size]} ${className}`}
+        style={{ boxShadow: "none" }}
+        {...props}
+      >
+        {children}
+      </select>
+    );
+  }
+);
+
+Select.displayName = "Select";
+
+export default Select;