Fix floating action button obscuring last element (#18332)

Fixes #18331

Add some padding below the last element of scrollable lists when the FAB is
shown in order for users to always be able to fully see the last element.

diff --git a/app/javascript/mastodon/features/ui/components/columns_area.js b/app/javascript/mastodon/features/ui/components/columns_area.js
index db047f5f0c7c56476558388ee108b5774f22e2f5..e665f4447b216bcafe8f6991190d48139729f21a 100644 (file)
--- a/app/javascript/mastodon/features/ui/components/columns_area.js
+++ b/app/javascript/mastodon/features/ui/components/columns_area.js
@@ -234,7 +234,7 @@ class ColumnsArea extends ImmutablePureComponent {
             </div>
           </div>
 
-          <div className='columns-area__panels__main'>
+          <div className={`columns-area__panels__main ${floatingActionButton && 'with-fab'}`}>
             <TabsBar key='tabs' />
             {content}
           </div>

diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 801a7e1321910ba8204cd7abc33326a8bf8d1150..8ca5136b082624d63d2e4073131bb83b0511a6c8 100644 (file)
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -2469,6 +2469,10 @@ a.account__display-name {
   .columns-area__panels__pane--compositional {
     display: none;
   }
+
+  .with-fab .scrollable .item-list:last-child {
+    padding-bottom: 5.25rem;
+  }
 }
 
 @media screen and (min-width: 600px + (285px * 1) + (10px * 1)) {