From 10d472e79e2069046a3066db72785f99a127e047 Mon Sep 17 00:00:00 2001
From: lyf <1910527151@qq.com>
Date: Wed, 25 Sep 2024 14:41:41 +0800
Subject: [PATCH] fix

---
 app/components/model-config.module.scss |  7 +++++++
 app/components/model-config.tsx         |  4 ++--
 app/components/ui-lib.tsx               | 18 ++----------------
 3 files changed, 11 insertions(+), 18 deletions(-)
 create mode 100644 app/components/model-config.module.scss

diff --git a/app/components/model-config.module.scss b/app/components/model-config.module.scss
new file mode 100644
index 000000000..40ba03f86
--- /dev/null
+++ b/app/components/model-config.module.scss
@@ -0,0 +1,7 @@
+.select-compress-model {
+  width: 60%;
+  select {
+    max-width: 100%;
+    white-space: normal;
+  }
+}
diff --git a/app/components/model-config.tsx b/app/components/model-config.tsx
index 008dda6d4..f2297e10b 100644
--- a/app/components/model-config.tsx
+++ b/app/components/model-config.tsx
@@ -6,6 +6,7 @@ import { InputRange } from "./input-range";
 import { ListItem, Select } from "./ui-lib";
 import { useAllModels } from "../utils/hooks";
 import { groupBy } from "lodash-es";
+import styles from "./model-config.module.scss";
 
 export function ModelConfigList(props: {
   modelConfig: ModelConfig;
@@ -242,8 +243,7 @@ export function ModelConfigList(props: {
         subTitle={Locale.Settings.CompressModel.SubTitle}
       >
         <Select
-          withiconstyle={{ width: "60%" }}
-          iconselectstyles={{ maxWidth: "100%", whiteSpace: "normal" }}
+          className={styles["select-compress-model"]}
           aria-label={Locale.Settings.CompressModel.Title}
           value={compressModelValue}
           onChange={(e) => {
diff --git a/app/components/ui-lib.tsx b/app/components/ui-lib.tsx
index 10c91b989..4af37dbba 100644
--- a/app/components/ui-lib.tsx
+++ b/app/components/ui-lib.tsx
@@ -294,32 +294,18 @@ export function Select(
   props: React.DetailedHTMLProps<
     React.SelectHTMLAttributes<HTMLSelectElement> & {
       align?: "left" | "center";
-      withiconstyle?: CSSProperties;
-      iconselectstyles?: CSSProperties;
     },
     HTMLSelectElement
   >,
 ) {
-  const {
-    className,
-    children,
-    align,
-    withiconstyle,
-    iconselectstyles,
-    ...otherProps
-  } = props;
+  const { className, children, align, ...otherProps } = props;
   return (
     <div
       className={`${styles["select-with-icon"]} ${
         align === "left" ? styles["left-align-option"] : ""
       } ${className}`}
-      style={withiconstyle}
     >
-      <select
-        className={styles["select-with-icon-select"]}
-        style={iconselectstyles}
-        {...otherProps}
-      >
+      <select className={styles["select-with-icon-select"]} {...otherProps}>
         {children}
       </select>
       <DownIcon className={styles["select-with-icon-icon"]} />