From fe4cba8baff79d21c47c705c5992329497780f49 Mon Sep 17 00:00:00 2001
From: lyf <1910527151@qq.com>
Date: Tue, 24 Sep 2024 22:25:36 +0800
Subject: [PATCH] fix style slect button

---
 app/components/button.module.scss   |  2 +-
 app/components/model-config.tsx     |  2 ++
 app/components/settings.module.scss |  6 ++++++
 app/components/settings.tsx         |  1 +
 app/components/ui-lib.module.scss   | 23 +++++++++++++++++------
 5 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/app/components/button.module.scss b/app/components/button.module.scss
index c65385cfc..05248bee8 100644
--- a/app/components/button.module.scss
+++ b/app/components/button.module.scss
@@ -7,7 +7,7 @@
   padding: 10px;
   cursor: pointer;
   transition: all 0.3s ease;
-  // overflow: hidden;
+  overflow: hidden;
   user-select: none;
   outline: none;
   border: none;
diff --git a/app/components/model-config.tsx b/app/components/model-config.tsx
index 04cd3ff01..6fddf7ee7 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 "./ui-lib.module.scss";
 
 export function ModelConfigList(props: {
   modelConfig: ModelConfig;
@@ -242,6 +243,7 @@ export function ModelConfigList(props: {
         subTitle={Locale.Settings.CompressModel.SubTitle}
       >
         <Select
+          className={styles["select-model"]}
           aria-label={Locale.Settings.CompressModel.Title}
           value={compressModelValue}
           onChange={(e) => {
diff --git a/app/components/settings.module.scss b/app/components/settings.module.scss
index c6aec4203..2ed786efc 100644
--- a/app/components/settings.module.scss
+++ b/app/components/settings.module.scss
@@ -72,3 +72,9 @@
     }
   }
 }
+
+.SubTitle-button {
+  button {
+    overflow:visible ;
+  }
+}
diff --git a/app/components/settings.tsx b/app/components/settings.tsx
index 7f8d0cb71..3a2357e69 100644
--- a/app/components/settings.tsx
+++ b/app/components/settings.tsx
@@ -690,6 +690,7 @@ export function Settings() {
 
   const saasStartComponent = (
     <ListItem
+      className={styles["SubTitle-button"]}
       title={
         Locale.Settings.Access.SaasStart.Title +
         `${Locale.Settings.Access.SaasStart.Label}`
diff --git a/app/components/ui-lib.module.scss b/app/components/ui-lib.module.scss
index 16ef106e1..7a2398deb 100644
--- a/app/components/ui-lib.module.scss
+++ b/app/components/ui-lib.module.scss
@@ -62,14 +62,14 @@
     }
   }
 
-  &.vertical{
+  &.vertical {
     flex-direction: column;
     align-items: start;
-    .list-header{
-      .list-item-title{
+    .list-header {
+      .list-item-title {
         margin-bottom: 5px;
       }
-      .list-item-sub-title{
+      .list-item-sub-title {
         margin-bottom: 2px;
       }
     }
@@ -250,7 +250,8 @@
 
 .select-with-icon {
   position: relative;
-  max-width: 60%;
+  max-width: fit-content;
+
   &.left-align-option {
     option {
       text-align: left;
@@ -280,6 +281,15 @@
   }
 }
 
+.select-model {
+  width: 60%;
+  .select-with-icon-select {
+    max-width: 100%;
+    white-space: normal;
+  }
+}
+
+
 .modal-input {
   height: 100%;
   width: 100%;
@@ -311,7 +321,7 @@
   justify-content: center;
   z-index: 999;
 
-  .selector-item-disabled{
+  .selector-item-disabled {
     opacity: 0.6;
   }
 
@@ -337,3 +347,4 @@
     }
   }
 }
+