From f7cba5b305766980a4cf62fd22861c0748ba7f46 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Sun, 29 Sep 2024 13:45:21 +0200
Subject: [PATCH] pl-fe: Improve styles
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 .../pl-fe/src/components/ui/layout/layout.tsx | 25 ++++++++++++-------
 .../pl-fe/src/features/bookmarks/index.tsx    |  2 +-
 .../src/features/bubble-timeline/index.tsx    |  2 +-
 .../src/features/community-timeline/index.tsx |  2 +-
 .../src/features/hashtag-timeline/index.tsx   |  2 +-
 .../src/features/home-timeline/index.tsx      |  2 +-
 .../src/features/landing-timeline/index.tsx   |  2 +-
 .../src/features/list-timeline/index.tsx      |  2 +-
 .../src/features/public-timeline/index.tsx    |  2 +-
 packages/pl-fe/src/features/quotes/index.tsx  |  2 +-
 .../src/features/remote-timeline/index.tsx    |  2 +-
 11 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/packages/pl-fe/src/components/ui/layout/layout.tsx b/packages/pl-fe/src/components/ui/layout/layout.tsx
index 7bf282a2d..b63b659c6 100644
--- a/packages/pl-fe/src/components/ui/layout/layout.tsx
+++ b/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 }) => (
diff --git a/packages/pl-fe/src/features/bookmarks/index.tsx b/packages/pl-fe/src/features/bookmarks/index.tsx
index da107ccee..8fe153e94 100644
--- a/packages/pl-fe/src/features/bookmarks/index.tsx
+++ b/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'
diff --git a/packages/pl-fe/src/features/bubble-timeline/index.tsx b/packages/pl-fe/src/features/bubble-timeline/index.tsx
index 05e0e1bd1..f12b1f3a1 100644
--- a/packages/pl-fe/src/features/bubble-timeline/index.tsx
+++ b/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' : ''}`}
diff --git a/packages/pl-fe/src/features/community-timeline/index.tsx b/packages/pl-fe/src/features/community-timeline/index.tsx
index a21494dd4..f45f35b87 100644
--- a/packages/pl-fe/src/features/community-timeline/index.tsx
+++ b/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' : ''}`}
diff --git a/packages/pl-fe/src/features/hashtag-timeline/index.tsx b/packages/pl-fe/src/features/hashtag-timeline/index.tsx
index 6ec76e50e..dc24d8597 100644
--- a/packages/pl-fe/src/features/hashtag-timeline/index.tsx
+++ b/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}`}
diff --git a/packages/pl-fe/src/features/home-timeline/index.tsx b/packages/pl-fe/src/features/home-timeline/index.tsx
index 44361f673..6d7b0e092 100644
--- a/packages/pl-fe/src/features/home-timeline/index.tsx
+++ b/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}
diff --git a/packages/pl-fe/src/features/landing-timeline/index.tsx b/packages/pl-fe/src/features/landing-timeline/index.tsx
index 5e5bf9664..725d738f0 100644
--- a/packages/pl-fe/src/features/landing-timeline/index.tsx
+++ b/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}
diff --git a/packages/pl-fe/src/features/list-timeline/index.tsx b/packages/pl-fe/src/features/list-timeline/index.tsx
index 1dc2be29e..c07193328 100644
--- a/packages/pl-fe/src/features/list-timeline/index.tsx
+++ b/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}`}
diff --git a/packages/pl-fe/src/features/public-timeline/index.tsx b/packages/pl-fe/src/features/public-timeline/index.tsx
index d2a60c1db..d717b594b 100644
--- a/packages/pl-fe/src/features/public-timeline/index.tsx
+++ b/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' : ''}`}
diff --git a/packages/pl-fe/src/features/quotes/index.tsx b/packages/pl-fe/src/features/quotes/index.tsx
index 4e1c91939..29269afc0 100644
--- a/packages/pl-fe/src/features/quotes/index.tsx
+++ b/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}`}
diff --git a/packages/pl-fe/src/features/remote-timeline/index.tsx b/packages/pl-fe/src/features/remote-timeline/index.tsx
index e637048cf..7f12d23e7 100644
--- a/packages/pl-fe/src/features/remote-timeline/index.tsx
+++ b/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}`}