mobile goes horizontal

ppy · Oct 27, 2023 · 3e2158d · 3e2158d
1 parent 851d4c8
commit 3e2158d
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 5 deletions.
diff --git a/resources/css/bem/chat-conversation-list.less b/resources/css/bem/chat-conversation-list.less
@@ -53,4 +53,13 @@
       align-self: center;
     }
   }
+
+  &__layer {
+    .own-layer();
+
+    @media @mobile {
+      display: flex;
+      flex-direction: row;
+    }
+  }
 }
diff --git a/resources/css/utilities.less b/resources/css/utilities.less
@@ -89,10 +89,6 @@
   z-index: @z-index--nav-float !important;
 }
 
-.u-own-layer {
-  .own-layer();
-}
-
 .u-relative {
   position: relative;
 }

diff --git a/resources/js/chat/conversation-list.tsx b/resources/js/chat/conversation-list.tsx
@@ -35,7 +35,7 @@ function renderChannels(type: SupportedChannelType) {
             <span className='chat-conversation-list__header-icon' title={title}><i className={icons[type]} /></span>
           </div>
           {chunks.map((c, index) => (
-            <div key={index} className='u-own-layer'>
+            <div key={index} className='chat-conversation-list__layer'>
               {c.map((channel) => <ConversationListItem key={channel.channelId} channel={channel} />)}
             </div>
           ))}