diff --git a/app/javascript/mastodon/features/ui/components/columns_area.js b/app/javascript/mastodon/features/ui/components/columns_area.js
index 47cea3e3a..ae07b8907 100644
--- a/app/javascript/mastodon/features/ui/components/columns_area.js
+++ b/app/javascript/mastodon/features/ui/components/columns_area.js
@@ -163,21 +163,28 @@ class ColumnsArea extends ImmutablePureComponent {
if (singleColumn) {
const floatingActionButton = shouldHideFAB(this.context.router.history.location.pathname) ? null : ;
- return columnIndex !== -1 ? [
- ,
-
+ const content = columnIndex !== -1 ? (
{links.map(this.renderView)}
- ,
+
+ ) : (
+
{children}
+ );
- floatingActionButton,
- ] : [
- ,
+ return (
+
+
-
{children}
,
+
+
+ {content}
+
- floatingActionButton,
- ];
+
+
+ {floatingActionButton}
+
+ );
}
return (
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 9acf0acfc..351a635bc 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -1786,6 +1786,39 @@ a.account__display-name {
&.unscrollable {
overflow-x: hidden;
}
+
+ &__panels {
+ display: flex;
+ justify-content: center;
+ width: 100%;
+ height: 100%;
+
+ &__pane {
+ flex: 1 1 auto;
+ height: 100%;
+ overflow: hidden;
+ pointer-events: none;
+ display: flex;
+ justify-content: flex-end;
+
+ &__inner {
+ pointer-events: auto;
+ height: 100%;
+ }
+ }
+
+ &__main {
+ box-sizing: border-box;
+ width: 100%;
+ max-width: 600px;
+ display: flex;
+ flex-direction: column;
+
+ @media screen and (min-width: 360px) {
+ padding: 0 10px;
+ }
+ }
+ }
}
.react-swipeable-view-container {
@@ -1936,7 +1969,6 @@ a.account__display-name {
.columns-area--mobile {
flex-direction: column;
width: 100%;
- max-width: 600px;
margin: 0 auto;
.column,
@@ -1952,7 +1984,7 @@ a.account__display-name {
}
@media screen and (min-width: 360px) {
- padding: 10px;
+ padding: 10px 0;
}
@media screen and (min-width: 630px) {
@@ -2013,8 +2045,7 @@ a.account__display-name {
.tabs-bar {
margin: 10px auto;
margin-bottom: 0;
- width: calc(100% - 20px);
- max-width: 600px;
+ width: 100%;
}
.react-swipeable-view-container .columns-area--mobile {
@@ -5427,6 +5458,10 @@ noscript {
&:active {
background: lighten($ui-highlight-color, 7%);
}
+
+ @media screen and (min-width: 630px) {
+ display: none;
+ }
}
.account__header__content {