fix

Author: mayfwl

app/components/model-config.tsx

@@ -242,7 +242,8 @@ export function ModelConfigList(props: {
         subTitle={Locale.Settings.CompressModel.SubTitle}
       >
         <Select
-          style={{ width: "60%" }}
+          withiconstyle={{ width: "60%" }}
+          iconselectstyles={{ maxWidth: "100%", whiteSpace: "normal" }}
           aria-label={Locale.Settings.CompressModel.Title}
           value={compressModelValue}
           onChange={(e) => {

app/components/ui-lib.module.scss

@@ -260,11 +260,9 @@
 
   .select-with-icon-select {
     height: 100%;
-    max-width: 100%;
     border: var(--border-in-light);
     padding: 10px 35px 10px 10px;
     border-radius: 10px;
-    white-space: normal;
     appearance: none;
     cursor: pointer;
     background-color: var(--white);

app/components/ui-lib.tsx

@@ -294,19 +294,32 @@ export function Select(
   props: React.DetailedHTMLProps<
     React.SelectHTMLAttributes<HTMLSelectElement> & {
       align?: "left" | "center";
+      withiconstyle?: CSSProperties;
+      iconselectstyles?: CSSProperties;
     },
     HTMLSelectElement
   >,
 ) {
-  const { className, children, align, style, ...otherProps } = props;
+  const {
+    className,
+    children,
+    align,
+    withiconstyle,
+    iconselectstyles,
+    ...otherProps
+  } = props;
   return (
     <div
       className={`${styles["select-with-icon"]} ${
         align === "left" ? styles["left-align-option"] : ""
       } ${className}`}
-      style={style}
+      style={withiconstyle}
     >
-      <select className={styles["select-with-icon-select"]} {...otherProps}>
+      <select
+        className={styles["select-with-icon-select"]}
+        style={iconselectstyles}
+        {...otherProps}
+      >
         {children}
       </select>
       <DownIcon className={styles["select-with-icon-icon"]} />