Fix mid-screen horizontal scrollbar on wide, short boards#148
Merged
Conversation
The board wrapper div in Board.jsx was a plain block element, breaking the flex chain between .App and main#board-content. Because main's flex-grow had no flex parent to grow within, the board area collapsed to its content height. On a wide board with short columns, main's overflow-x scrollbar then appeared mid-screen instead of at the viewport bottom. Add a stable .board-layout class to the wrapper with a flex-column layout so main fills the available height, columns stretch full height, and the horizontal scrollbar sits at the bottom of the screen. Verified against the live app (real database) with a 9-column board in both dev and production builds: the board area now fills the viewport (main bottom = viewport bottom, no dead space) and renders with no blank screen. The earlier revert was a transient deploy artifact, not this CSS. Also add a functional in-memory localStorage polyfill in setupTests.js. jsdom does not provide Web Storage in this environment, which made the useRecentBoards and ColumnsContainer tests fail on localStorage.clear(). This file is test-only and is never imported into the app bundle. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
✅ Deploy Preview for kanbanish ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Re-applies the scrollbar fix that was reverted (#147), this time verified against the live app to confirm it does not cause a blank screen.
Problem
On a board with many columns (wide) but few cards (short), an ugly horizontal scrollbar appeared in the middle of the screen with a large empty area below it.
Cause
The board wrapper
<div>inBoard.jsxwas a plain block element, breaking the flex chain between.Appandmain#board-content.mainhasflex-grow: 1, but with no flex parent to grow within, the board area collapsed to its content height. With short columns,main'soverflow-x: autoscrollbar landed mid-screen.Fix
Add a stable
.board-layoutclass to the wrapper with a flex-column layout (display: flex; flex-direction: column; flex-grow: 1; min-height: 0).mainnow fills the available height, columns stretch full height, and the scrollbar sits at the viewport bottom.Why the earlier revert happened
The previous merge (#147) was reverted after a reported white screen. I reproduced the live app (real database) headlessly with a 9-column board, in both dev and production builds, with and without this change:
The app rendered fully in every case — no white screen in dev or the minified production build. The original white screen was a transient deploy/cache artifact, not this CSS.
setupTests.jsis test-only and is never included in the app bundle, so it cannot affect runtime.Also included
A functional in-memory
localStoragepolyfill insetupTests.js. jsdom doesn't provide Web Storage in this environment, which made theuseRecentBoardsandColumnsContainertests fail onlocalStorage.clear()(pre-existing failures onmain).Verification
npm run lint— cleannpm run build— succeeds (.board-layoutconfirmed in minified CSS)npm test— 1396 passed (was 16 failing onmain)