fix select style

pages/index.tsx

@@ -391,7 +391,17 @@ pre > code {
           </label>
           <select
             id="model"
-            className="w-48 bg-gray-50 border border-gray-300 text-gray-900 text-sm focus:ring-blue-500 focus:border-blue-500 block w-full py-1 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+            style={{
+              // @ts-ignore
+              "-webkit-appearance": "none",
+              "-moz-appearance": "none",
+              appearance: "none",
+              backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%238C98F2'><polygon points='0,0 100,0 50,50'/></svg>")`,
+              backgroundSize: "14px",
+              backgroundPosition: "calc(100% - 10px) 9px",
+              backgroundRepeat: "no-repeat",
+            }}
+            className="w-48 bg-gray-50 border border-gray-300 text-gray-900 text-sm focus:ring-blue-500 focus:border-blue-500 block w-full py-1 pl-2 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
             onChange={(e) => setModel(e.target.value)}
           >
             {models.map((m) => (
@@ -401,7 +411,12 @@ pre > code {
             ))}
           </select>
         </div>
-        <div style={{ maxHeight: "calc(100dvh - 75px)", overflowY: "auto" }}>
+        <div
+          style={{
+            maxHeight: "calc(100dvh - 123px)",
+            overflowY: "auto",
+          }}
+        >
           {context?.map((qa, i) => {
             return (
               <div