From e9cd6583d6996b03e8a30cfc39e30f7078e3973c Mon Sep 17 00:00:00 2001
From: silver-it <alex.jin220@gmail.com>
Date: Wed, 19 Jun 2024 10:10:34 +0800
Subject: [PATCH] feat: improved header style

---
 frontend/views/components/Page.vue |  8 +++++++-
 frontend/views/pages/GroupChat.vue | 10 ++++++----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/frontend/views/components/Page.vue b/frontend/views/components/Page.vue
index db37c5f40..9f0ba2a39 100644
--- a/frontend/views/components/Page.vue
+++ b/frontend/views/components/Page.vue
@@ -159,6 +159,7 @@ $pagePaddingDesktop: 5.5rem;
     top: 0;
     background: $general_2;
     z-index: 3;
+    padding: 0 5.75rem;
   }
 
   @include desktop {
@@ -167,6 +168,11 @@ $pagePaddingDesktop: 5.5rem;
     text-align: left;
     min-height: 4.75rem;
     padding-left: $pagePaddingDesktop;
+    padding-right: 2rem;
+  }
+
+  @include phone {
+    padding: 0 4.75rem;
   }
 
   &.p-mini-header {
@@ -176,7 +182,7 @@ $pagePaddingDesktop: 5.5rem;
   }
 
   .c-toggle.sidebar {
-    right: -1rem;
+    right: 0;
 
     @include desktop {
       display: none;
diff --git a/frontend/views/pages/GroupChat.vue b/frontend/views/pages/GroupChat.vue
index dd7a6ad6f..5812378a4 100644
--- a/frontend/views/pages/GroupChat.vue
+++ b/frontend/views/pages/GroupChat.vue
@@ -245,16 +245,17 @@ export default ({
   align-items: center;
   position: relative;
 
+  @include touch {
+    width: 100%;
+    justify-content: center;
+  }
+
   .p-title {
     display: block;
     width: fit-content;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-
-    @include touch {
-      max-width: 55vw;
-    }
   }
 
   .c-group-i {
@@ -351,6 +352,7 @@ export default ({
 
 .avatar-wrapper {
   margin-right: 0.5rem;
+  flex: 0 0 2.5rem;
 }
 
 .c-menu-parent.c-menu {