pl-fe: Improve styles

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

packages/pl-fe/src/components/ui/layout/layout.tsx

@@ -2,6 +2,8 @@ import clsx from 'clsx';
 import React, { Suspense } from 'react';
 import StickyBox from 'react-sticky-box';
 
+import { useFeatures } from 'pl-fe/hooks';
+
 interface ISidebar {
   children: React.ReactNode;
 }
@@ -38,15 +40,20 @@ const Sidebar: React.FC<ISidebar> = ({ children }) => (
 );
 
 /** Center column container in the UI. */
-const Main: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({ children, className }) => (
-  <main
-    className={clsx({
-      'md:col-span-12 lg:col-span-9 xl:col-span-6 pb-36 black:border-gray-800 lg:black:border-l xl:black:border-r': true,
-    }, className)}
-  >
-    {children}
-  </main>
-);
+const Main: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({ children, className }) => {
+  const features = useFeatures();
+
+  return (
+    <main
+      className={clsx({
+        'md:col-span-12 lg:col-span-9 xl:col-span-6 pb-14 lg:pb-0 xl:pb-16 black:border-gray-800 lg:black:border-l xl:black:border-r': true,
+        'xl:pb-16': features.chats,
+      }, className)}
+    >
+      {children}
+    </main>
+  );
+};
 
 /** Right sidebar container in the UI. */
 const Aside: React.FC<IAside> = ({ children }) => (

packages/pl-fe/src/features/bookmarks/index.tsx

@@ -110,7 +110,7 @@ const Bookmarks: React.FC<IBookmarks> = ({ params }) => {
     >
       <PullToRefresh onRefresh={handleRefresh}>
         <StatusList
-          className='black:p-0 black:sm:p-4'
+          className='black:p-0 black:sm:p-4 black:sm:pt-0'
           loadMoreClassName='black:sm:mx-4'
           statusIds={statusIds}
           scrollKey='bookmarked_statuses'

packages/pl-fe/src/features/bubble-timeline/index.tsx

@@ -38,7 +38,7 @@ const BubbleTimeline = () => {
     <Column className='-mt-3 sm:mt-0' label={intl.formatMessage(messages.title)} transparent={!isMobile}>
       <PullToRefresh onRefresh={handleRefresh}>
         <Timeline
-          className='black:p-0 black:sm:p-4'
+          className='black:p-0 black:sm:p-4 black:sm:pt-0'
           loadMoreClassName='black:sm:mx-4'
           scrollKey={`${timelineId}_timeline`}
           timelineId={`${timelineId}${onlyMedia ? ':media' : ''}`}

packages/pl-fe/src/features/community-timeline/index.tsx

@@ -41,7 +41,7 @@ const CommunityTimeline = () => {
     <Column className='-mt-3 sm:mt-0' label={intl.formatMessage(messages.title)} transparent={!isMobile}>
       <PullToRefresh onRefresh={handleRefresh}>
         <Timeline
-          className='black:p-0 black:sm:p-4'
+          className='black:p-0 black:sm:p-4 black:sm:pt-0'
           loadMoreClassName='black:sm:mx-4'
           scrollKey={`${timelineId}_timeline`}
           timelineId={`${timelineId}${onlyMedia ? ':media' : ''}`}

packages/pl-fe/src/features/hashtag-timeline/index.tsx

@@ -62,7 +62,7 @@ const HashtagTimeline: React.FC<IHashtagTimeline> = ({ params }) => {
         </List>
       )}
       <Timeline
-        className='black:p-0 black:sm:p-4'
+        className='black:p-0 black:sm:p-4 black:sm:pt-0'
         loadMoreClassName='black:sm:mx-4'
         scrollKey='hashtag_timeline'
         timelineId={`hashtag:${tagId}`}

packages/pl-fe/src/features/home-timeline/index.tsx

@@ -62,7 +62,7 @@ const HomeTimeline: React.FC = () => {
     <Column className='py-0' label={intl.formatMessage(messages.title)} transparent={!isMobile} withHeader={false}>
       <PullToRefresh onRefresh={handleRefresh}>
         <Timeline
-          className='black:p-0 black:sm:p-4'
+          className='black:p-0 black:sm:p-4 black:sm:pt-0'
           loadMoreClassName='black:sm:mx-4'
           scrollKey='home_timeline'
           onLoadMore={handleLoadMore}

packages/pl-fe/src/features/landing-timeline/index.tsx

@@ -48,7 +48,7 @@ const LandingTimeline = () => {
       {timelineEnabled ? (
         <PullToRefresh onRefresh={handleRefresh}>
           <Timeline
-            listClassName='black:p-0 black:sm:p-4'
+            listClassName='black:p-0 black:sm:p-4 black:sm:pt-0'
             loadMoreClassName='black:sm:mx-4'
             scrollKey={`${timelineId}_timeline`}
             timelineId={timelineId}

packages/pl-fe/src/features/list-timeline/index.tsx

@@ -104,7 +104,7 @@ const ListTimeline: React.FC = () => {
       transparent={!isMobile}
     >
       <Timeline
-        className='black:p-0 black:sm:p-4'
+        className='black:p-0 black:sm:p-4 black:sm:pt-0'
         loadMoreClassName='black:sm:mx-4'
         scrollKey='list_timeline'
         timelineId={`list:${id}`}

packages/pl-fe/src/features/public-timeline/index.tsx

@@ -86,7 +86,7 @@ const CommunityTimeline = () => {
       </div>}
       <PullToRefresh onRefresh={handleRefresh}>
         <Timeline
-          className='black:p-0 black:sm:p-4'
+          className='black:p-0 black:sm:p-4 black:sm:pt-0'
           loadMoreClassName='black:sm:mx-4'
           scrollKey={`${timelineId}_timeline`}
           timelineId={`${timelineId}${onlyMedia ? ':media' : ''}`}

packages/pl-fe/src/features/quotes/index.tsx

@@ -37,7 +37,7 @@ const Quotes: React.FC = () => {
   return (
     <Column label={intl.formatMessage(messages.heading)} transparent={!isMobile}>
       <StatusList
-        className='black:p-0 black:sm:p-4'
+        className='black:p-0 black:sm:p-4 black:sm:pt-0'
         loadMoreClassName='black:sm:mx-4'
         statusIds={statusIds as ImmutableOrderedSet<string>}
         scrollKey={`quotes:${statusId}`}

packages/pl-fe/src/features/remote-timeline/index.tsx

@@ -66,7 +66,7 @@ const RemoteTimeline: React.FC<IRemoteTimeline> = ({ params }) => {
       )}
 
       <Timeline
-        className='black:p-0 black:sm:p-4'
+        className='black:p-0 black:sm:p-4 black:sm:pt-0'
         loadMoreClassName='black:sm:mx-4'
         scrollKey={`${timelineId}_${instance}_timeline`}
         timelineId={`${timelineId}${onlyMedia ? ':media' : ''}:${instance}`}