Merge pull request #2095 from okTurtles/2067-fix-the-style-of-direct-…

…message-with-many-members Improve header style
okTurtles · Jun 19, 2024 · 8e032da · 8e032da
2 parents 436d615 + e9cd658
commit 8e032da
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git 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
@@ -277,16 +277,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 {
@@ -383,6 +384,7 @@ export default ({
 
 .avatar-wrapper {
   margin-right: 0.5rem;
+  flex: 0 0 2.5rem;
 }
 
 .c-menu-parent.c-menu {