Implementing mobile styles for better display (#343)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: interstellarmt <178904023+interstellarmt@users.noreply.github.com>
Co-authored-by: interstellarmt <787982239@qq.com>

Author: Copilot

src/components/AI/HomeDialog/AntVBanner/index.module.less

@@ -32,4 +32,24 @@
     margin: 0;
     font-size: 16px;
   }
+
+  @media only screen and (max-width: 767.99px) {
+    .sage {
+      width: 80px;
+    }
+
+    h1 {
+      font-size: 22px;
+      line-height: 28px;
+    }
+
+    .desc {
+      font-size: 14px;
+      line-height: 22px;
+    }
+
+    .slogan {
+      font-size: 13px;
+    }
+  }
 }

src/components/AI/HomeDialog/PromptTextarea/index.module.less

@@ -99,6 +99,23 @@
       font-size: 14px;
     }
   }
+
+  @media only screen and (max-width: 767.99px) {
+    width: 100%;
+    height: auto;
+    min-height: 120px;
+
+    &.withDatasource {
+      height: auto;
+      min-height: 160px;
+    }
+
+    .header {
+      > div {
+        max-width: 100%;
+      }
+    }
+  }
 }
 
 .datasourceBtn {

src/components/AI/HomeDialog/RecommendCase/index.module.less

@@ -43,3 +43,18 @@
   grid-template-columns: repeat(4, 1fr);
   gap: 16px;
 }
+
+@media only screen and (max-width: 767.99px) {
+  .title {
+    width: 100%;
+
+    .quickStart {
+      font-size: 16px;
+    }
+  }
+
+  .list {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 12px;
+  }
+}

src/components/AI/HomeDialog/index.module.less

@@ -1,3 +1,8 @@
 .content {
   height: 500px;
+  isolation: isolate;
+
+  @media only screen and (max-width: 767.99px) {
+    height: auto;
+  }
 }

src/slots/Banner/Notification.module.less

@@ -77,12 +77,12 @@
 
   50% {
     opacity: 0;
-    top: -30px;
+    top: -44px;
   }
 
   83.3% {
     opacity: 0;
-    top: 30px;
+    top: 44px;
   }
 
   100% {
@@ -95,12 +95,12 @@
 @keyframes showAndHide1 {
   0% {
     opacity: 0;
-    top: 30px;
+    top: 44px;
   }
 
   33.3% {
     opacity: 0;
-    top: 30px;
+    top: 44px;
   }
 
   50% {
@@ -115,6 +115,6 @@
 
   100% {
     opacity: 0;
-    top: -30px;
+    top: -44px;
   }
 }

src/slots/Banner/index.module.less

@@ -359,7 +359,9 @@
     }
 
     .notifications {
-      width: 100%;
+      left: 4.5%;
+      width: calc(100% - 9%);
+      margin-left: 0;
       display: block;
       bottom: 20px;
       height: 48px;