From d556be2968641c265360297fd268a24119c68670 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=82=8A=E3=82=93=E3=81=99=E3=81=8D?= <6533808+rinsuki@users.noreply.github.com> Date: Thu, 26 Oct 2017 22:52:48 +0900 Subject: [PATCH] Fix column design broken with very long title (#5493) * Fix #5314 * fix not beautiful code * fix broken design with mobile view * remove no longer needed code --- .../mastodon/components/column_header.js | 4 +++- app/javascript/styles/mastodon/components.scss | 17 ++++++++++++----- 2 files changed, 15 insertions(+), 6 deletions(-) diff --git a/app/javascript/mastodon/components/column_header.js b/app/javascript/mastodon/components/column_header.js index e4fa8fa7a7..80a8fbdb3a 100644 --- a/app/javascript/mastodon/components/column_header.js +++ b/app/javascript/mastodon/components/column_header.js @@ -137,7 +137,9 @@ export default class ColumnHeader extends React.PureComponent {

- {title} + + {title} +
{backButton} diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index d7216cd1db..516f8de7d1 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -2280,6 +2280,7 @@ button.icon-button.active i.fa-retweet { } .column-header { + display: flex; padding: 15px; font-size: 16px; background: lighten($ui-base-color, 4%); @@ -2305,12 +2306,10 @@ button.icon-button.active i.fa-retweet { } .column-header__buttons { - position: absolute; - right: 0; - top: 0; - height: 100%; - display: flex; height: 48px; + display: flex; + margin: -15px; + margin-left: 0; } .column-header__button { @@ -2378,6 +2377,14 @@ button.icon-button.active i.fa-retweet { } } +.column-header__title { + display: inline-block; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + flex: 1; +} + .text-btn { display: inline-block; padding: 0;