diff --git a/src/js/components/Header.tsx b/src/js/components/Header.tsx
index fd92baee..c1a2f695 100644
--- a/src/js/components/Header.tsx
+++ b/src/js/components/Header.tsx
@@ -195,7 +195,7 @@ export default class Header extends Component {
     const pub = Key.getPubKey();
     const loggedIn = !!pub;
     return (
-      <div className="sticky top-0 z-10 cursor-pointer">
+      <div className="sticky top-0 z-10 cursor-pointer flex flex-wrap">
         <div className="w-full overflow-x-hidden bg-black md:bg-opacity-50 md:shadow-lg md:backdrop-blur-lg px-2">
           <div className="flex items-center justify-between h-12">
             {this.renderBackBtnOrLogo()}
diff --git a/src/js/views/Profile.tsx b/src/js/views/Profile.tsx
index 437d9227..9d844094 100644
--- a/src/js/views/Profile.tsx
+++ b/src/js/views/Profile.tsx
@@ -84,7 +84,7 @@ class Profile extends View {
       path === href ? 'btn btn-sm btn-primary' : 'btn btn-sm btn-neutral';
 
     return (
-      <div className="flex mx-4 gap-2 mb-4 overflow-x-scroll">
+      <div className="flex mx-4 gap-2 mb-4 overflow-x-auto">
         <Link className={linkClass('/' + currentProfileUrl)} href={'/' + currentProfileUrl}>
           {t('posts')}
           <Show when={this.state.noPosts}>{' (0)'}</Show>
diff --git a/src/js/views/View.tsx b/src/js/views/View.tsx
index a99b7836..d11d7175 100644
--- a/src/js/views/View.tsx
+++ b/src/js/views/View.tsx
@@ -26,10 +26,10 @@ abstract class View extends Component {
 
   render() {
     return (
-      <div className="flex flex-row w-full">
-        <div className={`flex flex-col w-full ${this.hideSideBar ? '' : 'lg:w-2/3'}`}>
+      <div className="flex flex-row h-full w-full">
+        <div className={`flex flex-col w-full h-full ${this.hideSideBar ? '' : 'lg:w-2/3'}`}>
           <Header />
-          <div class={this.class} id={this.id}>
+          <div class={this.class} id={this.id} className="h-full">
             <ErrorBoundary>{this.renderView()}</ErrorBoundary>
           </div>
         </div>
diff --git a/src/js/views/chat/ChatList.tsx b/src/js/views/chat/ChatList.tsx
index 0f37a3a5..8df16243 100644
--- a/src/js/views/chat/ChatList.tsx
+++ b/src/js/views/chat/ChatList.tsx
@@ -121,7 +121,7 @@ class ChatList extends BaseComponent<ChatListProps, ChatListState> {
 
     return (
       <section
-        className={`h-screen border-r border-neutral-800 overflow-x-hidden overflow-y-scroll px-4 md:px-0 w-full md:w-64 ${
+        className={`border-r border-neutral-800 overflow-x-hidden overflow-y-auto h-full px-4 md:px-0 w-full md:w-64 ${
           this.props.className || ''
         }`}
       >
diff --git a/src/js/views/chat/ChatMessages.tsx b/src/js/views/chat/ChatMessages.tsx
index e18b5bea..eab81e0e 100644
--- a/src/js/views/chat/ChatMessages.tsx
+++ b/src/js/views/chat/ChatMessages.tsx
@@ -149,11 +149,11 @@ function ChatMessages({ id }) {
 
       mainView = (
         <div
-          className="main-view p-2 h-screen overflow-y-scroll overflow-x-hidden"
+          className="main-view p-2 overflow-y-auto overflow-x-hidden"
           id="message-view"
           onScroll={() => onMessageViewScroll()}
         >
-          <div id="message-list">
+          <div id="message-list" className="w-full">
             {msgListContent}
             <div className="italic my-2 text-neutral-500 w-full text-center">
               <Show when={isGroup && keyPair}>
@@ -308,7 +308,7 @@ function ChatMessages({ id }) {
       <Helmet>
         <title>{'Messages'}</title>
       </Helmet>
-      <div id="chat-main" ref={ref} className={`${id ? '' : 'hidden'} flex-1 pb-12`}>
+      <div id="chat-main" ref={ref} className={`${id ? '' : 'hidden'} flex flex-1 flex-col`}>
         {renderMainView()}
         <Show when={id && id.length > 4}>{renderMsgForm()}</Show>
       </div>