diff --git a/client/src/components/trello-board/styles/Base.js b/client/src/components/trello-board/styles/Base.js index 670f95599..e79e3c391 100644 --- a/client/src/components/trello-board/styles/Base.js +++ b/client/src/components/trello-board/styles/Base.js @@ -3,13 +3,15 @@ import styled, { createGlobalStyle, css } from "styled-components"; const getBoardWrapperStyles = (props) => { if (props.orientation === "vertical") { - return ` `; + return ``; } if (props.orientation === "horizontal") { + // TODO: The white-space: nowrap; would be a good place to offer further customization return ` - display: flex; - flex-direction: row; - align-items: flex-start; + display: flex; + flex-direction: row; + overflow-x: auto; + white-space: nowrap; `; } return ""; @@ -35,7 +37,7 @@ export const GlobalStyle = createGlobalStyle` -webkit-user-modify: read-write-plaintext-only; cursor: text; } - + .comPlainTextContentEditable--has-placeholder::before { content: attr(placeholder); opacity: 0.5; @@ -78,6 +80,7 @@ export const StyleHorizontal = styled.div` min-width: 250px; min-height: 25px; } + .react-trello-lane.lane-collapsed { min-height: 15px; } @@ -87,9 +90,11 @@ export const StyleVertical = styled.div` .react-trello-column-header { text-align: left; } + .react-trello-card { flex: 0 1 auto; } + .react-trello-board { display: flex; }