diff --git a/app/javascript/styles/cybre-base.scss b/app/javascript/styles/cybre-base.scss index b9bb4ecb8..a8c642cbb 100644 --- a/app/javascript/styles/cybre-base.scss +++ b/app/javascript/styles/cybre-base.scss @@ -1,15 +1,8 @@ @import 'application'; -/* Allow columns to grow wider as the screen gets - * wider, but don't ever let them get more than - * 400px (some people have a bunch of columns!) */ +/* Wider compose area */ @media screen and (min-width: 1300px) { - .column { - flex-grow: 1 !important; - max-width: 400px; - } - .drawer { width: 17%; /* Not part of the flex fun */ max-width: 400px; @@ -17,14 +10,7 @@ } } -/* Cap the column height at 100vh (fixed an old - * bug someone encountered in safari, but which - * I've seen resurface from time to time) */ -.column { - max-height:100vh; -} - -/* Don't show outline around statuses if we're in +/* Don't show outline around statuses if we're in * mouse or touch mode (rather than keyboard) */ [data-whatinput="mouse"], [data-whatinput="touch"] { .status__content:focus, .status:focus, @@ -69,7 +55,22 @@ overflow-y:auto; } -/* Use display: none instead of visibility:hidden +/* Put a reasonable background on the single-column compose form */ +.layout-single-column .compose-panel { + background-color: $ui-base-color; + height: auto; + overflow-y: visible; + margin-top: 65px; +} + +/* Better distinguish the search bar */ +.layout-single-column .compose-panel .search { + position:relative; + top: -55px; + margin-bottom: -55px; +} + +/* Use display: none instead of visibility:hidden * to hide the suggested follows list on non-mobile */ @media screen and (min-width: 630px) { .search-results .trends {