From c15c8526684e5606e16425f3fe9f5be1b809aebc Mon Sep 17 00:00:00 2001
From: lyf <1910527151@qq.com>
Date: Mon, 23 Sep 2024 15:12:45 +0800
Subject: [PATCH] fex media

---
 app/components/auth.module.scss   | 17 ++++++++++++++---
 app/components/auth.tsx           | 18 +++++++++++++-----
 app/components/button.module.scss |  3 +--
 app/components/ui-lib.module.scss |  5 +++--
 4 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/app/components/auth.module.scss b/app/components/auth.module.scss
index c26320b7d..fe143b428 100644
--- a/app/components/auth.module.scss
+++ b/app/components/auth.module.scss
@@ -11,7 +11,6 @@
     display: flex;
     justify-content: center;
     align-items: center;
-
     padding: 12px 64px;
     box-sizing: border-box;
     background: var(--second);
@@ -22,8 +21,6 @@
       font-size: 14px;
       line-height: 150%;
       span {
-        display: inline-flex;
-        align-items: center;
         gap: 8px;
         a {
           display: inline-flex;
@@ -43,6 +40,20 @@
     }
   }
 
+  @media (max-width: 600px) {
+    .top-banner {
+      padding: 12px 24px 12px 12px;
+      .top-banner-close {
+        right: 10px;
+      }
+      .top-banner-inner {
+        .top-banner-logo {
+          margin-right: 8px;
+        }
+      }
+    }
+  }
+
   .auth-header {
     display: flex;
     justify-content: space-between;
diff --git a/app/components/auth.tsx b/app/components/auth.tsx
index c89103a2e..52fd860dd 100644
--- a/app/components/auth.tsx
+++ b/app/components/auth.tsx
@@ -113,11 +113,10 @@ export function AuthPage() {
 function TopBanner() {
   const [isHovered, setIsHovered] = useState(false);
   const [isVisible, setIsVisible] = useState(true);
-
+  const [isMobile, setIsMobile] = useState(window.innerWidth < 600);
   useEffect(() => {
     // 检查 localStorage 中是否有标记
     const bannerDismissed = storage.getItem("bannerDismissed");
-
     // 如果标记不存在，存储默认值并显示横幅
     if (!bannerDismissed) {
       storage.setItem("bannerDismissed", "false");
@@ -128,6 +127,15 @@ function TopBanner() {
     }
   }, []);
 
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth < 600);
+    };
+
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
   const handleMouseEnter = () => {
     setIsHovered(true);
   };
@@ -151,16 +159,16 @@ function TopBanner() {
       onMouseLeave={handleMouseLeave}
     >
       <div className={styles["top-banner-inner"]}>
+        <Logo className={styles["top-banner-logo"]}></Logo>
         <span>
-          <Logo></Logo>
           {Locale.Auth.TopTips}
           <a href={SAAS_CHAT_URL} rel="stylesheet">
             {Locale.Settings.Access.SaasStart.ChatNow}
-            <Arrow style={{ marginLeft: "8px" }} />
+            <Arrow style={{ marginLeft: "4px" }} />
           </a>
         </span>
       </div>
-      {isHovered && (
+      {(isHovered || isMobile) && (
         <Delete className={styles["top-banner-close"]} onClick={handleClose} />
       )}
     </div>
diff --git a/app/components/button.module.scss b/app/components/button.module.scss
index e332df2d2..c65385cfc 100644
--- a/app/components/button.module.scss
+++ b/app/components/button.module.scss
@@ -5,10 +5,9 @@
   align-items: center;
   justify-content: center;
   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/ui-lib.module.scss b/app/components/ui-lib.module.scss
index 20bf62a18..16ef106e1 100644
--- a/app/components/ui-lib.module.scss
+++ b/app/components/ui-lib.module.scss
@@ -250,8 +250,7 @@
 
 .select-with-icon {
   position: relative;
-  max-width: fit-content;
-
+  max-width: 60%;
   &.left-align-option {
     option {
       text-align: left;
@@ -260,9 +259,11 @@
 
   .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);