mobile menu styles

src/js/views/chat/ChatList.tsx

@@ -73,7 +73,7 @@ class ChatList extends BaseComponent<ChatListProps, ChatListState> {
 
     return (
       <section
-        className={`h-screen overflow-x-hidden overflow-y-scroll w-64 ${
+        className={`h-screen overflow-x-hidden overflow-y-scroll px-2 md:px-0 w-full md:w-64 ${
           this.props.className || ''
         }`}
       >

src/js/views/settings/Settings.tsx

@@ -1,5 +1,4 @@
 import Header from '../../components/Header';
-import Icons from '../../Icons';
 
 import SettingsContent from './SettingsContent';
 import SettingsMenu from './SettingsMenu';
@@ -10,17 +9,9 @@ const Settings = (props: Props) => {
   return (
     <>
       <Header />
-      <div className="flex flex-row">
+      <div className="flex flex-row px-2 md:px-0">
-        <div className={props.page ? 'flex md:hidden' : 'hidden'}>
-          <a href="/settings">
-            <span>{Icons.backArrow}</span>
-          </a>
-        </div>
         <SettingsMenu activePage={props.page} />
-        <div
+        <div className={props.page ? '' : 'hidden md:flex'}>
-          className={props.page ? '' : 'hidden-xs'}
-          style="padding: 0px 15px; overflow: auto; width: 100%;"
-        >
           <SettingsContent id={props.page} />
         </div>
       </div>

src/js/views/settings/SettingsMenu.tsx

@@ -33,7 +33,7 @@ export default class SettingsMenu extends Component {
     const activePage = this.props.activePage || 'account';
     return (
       <div
-        className={`flex-col w-48 flex-shrink-0 ${
+        className={`flex-col w-full md:w-48 flex-shrink-0 ${
           !this.props.activePage ? 'flex' : 'hidden md:flex'
         }`}
       >