Enhanced mobile version UI UX

app/components/home.module.scss

@@ -183,42 +183,55 @@
   animation: slide-in ease 0.3s;
 }
 
-.chat-item-rename {
-  position: absolute;
-  top: 10px;
-  right: 30px;
-  transition: all ease 0.3s;
-  opacity: 0;
-  cursor: pointer;
-}
-
-.chat-item:hover > .chat-item-rename {
-  opacity: 0.5;
-  transform: translateX(-10px);
-}
-
-.chat-item:hover > .chat-item-rename:hover {
-  opacity: 1;
-}
-
+.chat-item-rename,
 .chat-item-delete {
   position: absolute;
   top: 10px;
-  right: 0;
   transition: all ease 0.3s;
   opacity: 0;
   cursor: pointer;
 }
 
+.chat-item-rename {
+  right: 25px;
+}
+
+.chat-item-delete {
+  right: 0;
+}
+
+.chat-item:hover > .chat-item-rename,
 .chat-item:hover > .chat-item-delete {
   opacity: 0.5;
   transform: translateX(-10px);
 }
 
+.chat-item:hover > .chat-item-rename:hover,
 .chat-item:hover > .chat-item-delete:hover {
   opacity: 1;
 }
 
+@media (max-width: 600px) {
+  .chat-item-rename,
+  .chat-item-delete {
+    opacity: 0.6;
+  }
+
+  .chat-item-rename {
+    right: 35px;
+  }
+
+  .chat-item-delete {
+    right: 10px;
+  }
+
+  .chat-item:hover > .chat-item-rename,
+  .chat-item:hover > .chat-item-delete {
+    opacity: 0.5;
+    transform: translateX(0px);
+  }
+}
+
 .chat-item-info {
   display: flex;
   justify-content: space-between;
@@ -301,25 +314,10 @@
     }
   }
 
-  .chat-item-rename {
-    top: 15px;
-    right: 35px;
-    opacity: 1;
-  }
-
-  .chat-item:hover > .chat-item-rename {
-    opacity: 0.5;
-    right: 30px;
-  }
-
+  .chat-item-rename,
   .chat-item-delete {
     top: 15px;
-    opacity: 1; // 手机模式下始终显示
-  }
-
-  .chat-item:hover > .chat-item-delete {
-    opacity: 0.5;
-    right: 5px;
+    transition: all ease 0.3s;
   }
 
   .sidebar-tail {
@@ -580,12 +578,33 @@
 }
 
 @media only screen and (max-width: 600px) {
+  .chat-input-panel-inner {
+    justify-content: space-between; // 将子元素分开
+    align-items: center; // 使得子元素在一条平面上
+  }
+
   .chat-input {
     font-size: 16px;
+    height: 20px;  // 设置发送框的高度
+    width: calc(100% - 58px); // 给出了 58px 的空间给发送按钮
+    padding: 10px 0px 10px 10px; // 调整padding使得文字显示位置更符合人类审美
+    overflow-y: auto; // 只有滚动的时候才显示滚动条
+    &::-webkit-scrollbar {
+      width: 0;
+    }
+    &::-webkit-scrollbar-thumb {
+      background: #888;
+    }
+    &::-webkit-scrollbar-thumb:hover {
+      background: #555;
+    }
   }
 
   .chat-input-send {
-    bottom: 30px;
+    width: 18px;
+    height: 18px;
+    margin-left: 10px; // 设置了10px的间隔
+    position: static; // 移除了定位属性
   }
 }