diff --git a/app/assets/javascripts/components/features/getting_started/index.jsx b/app/assets/javascripts/components/features/getting_started/index.jsx
index 157bdf8f2ff..77253dd731c 100644
--- a/app/assets/javascripts/components/features/getting_started/index.jsx
+++ b/app/assets/javascripts/components/features/getting_started/index.jsx
@@ -43,13 +43,11 @@ const GettingStarted = ({ intl, me }) => {
{followRequests}
+
-
-
);
};
diff --git a/app/assets/javascripts/components/features/ui/components/tabs_bar.jsx b/app/assets/javascripts/components/features/ui/components/tabs_bar.jsx
index 219979522b3..dbfdc3f8529 100644
--- a/app/assets/javascripts/components/features/ui/components/tabs_bar.jsx
+++ b/app/assets/javascripts/components/features/ui/components/tabs_bar.jsx
@@ -3,15 +3,14 @@ import { FormattedMessage } from 'react-intl';
const outerStyle = {
background: '#373b4a',
- margin: '10px',
flex: '0 0 auto',
- marginBottom: '0'
+ overflowY: 'auto'
};
const tabStyle = {
display: 'block',
flex: '1 1 auto',
- padding: '10px',
+ padding: '10px 5px',
color: '#fff',
textDecoration: 'none',
textAlign: 'center',
diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss
index acfa85c6bdc..c6441924321 100644
--- a/app/assets/stylesheets/components.scss
+++ b/app/assets/stylesheets/components.scss
@@ -331,11 +331,15 @@
}
.columns-area {
- margin: 10px;
- margin-left: 0;
flex-direction: row;
}
+@media screen and (min-width: 360px) {
+ .columns-area {
+ margin: 10px;
+ }
+}
+
.column {
width: 330px;
position: relative;
@@ -346,11 +350,20 @@
}
.column, .drawer {
- margin-left: 10px;
+ margin-left: 5px;
+ margin-right: 5px;
flex: 0 0 auto;
overflow: hidden;
}
+.column:first-child, .drawer:first-child {
+ margin-left: 0;
+}
+
+.column:last-child, .drawer:last-child {
+ margin-right: 0;
+}
+
@media screen and (max-width: 1024px) {
.column, .drawer {
width: 100%;
@@ -359,7 +372,6 @@
}
.columns-area {
- margin: 10px;
flex-direction: column;
}
}
@@ -368,6 +380,13 @@
display: flex;
}
+@media screen and (min-width: 360px) {
+ .tabs-bar {
+ margin: 10px;
+ margin-bottom: 0;
+ }
+}
+
@media screen and (min-width: 1025px) {
.tabs-bar {
display: none;
@@ -589,12 +608,8 @@
}
}
-.getting-started__illustration {
- width: 330px;
- height: 235px;
- background: image-url('mastodon-getting-started.png') no-repeat 0 0;
- position: absolute;
- pointer-events: none;
- bottom: 0;
- left: 0;
+.getting-started {
+ overflow-y: auto;
+ padding-bottom: 235px;
+ background: image-url('mastodon-getting-started.png') no-repeat 0 100% local;
}