Skip to content

Keep the Leveled Reader control block visible while the stats scroll (BL-16585) #8160

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
StephenMcConnel wants to merge 2 commits into
base: master
Choose a base branch
from
+72 −30
Open

Keep the Leveled Reader control block visible while the stats scroll (BL-16585) #8160

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0cb93bb
Keep the Leveled Reader control block visible while the stats scroll …
StephenMcConnel Aug 5, 2026
2b5d35a
Say out loud that the Leveled Reader panel itself scrolls (BL-16585)
StephenMcConnel Aug 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
102 changes: 72 additions & 30 deletions src/BloomBrowserUI/bookEdit/toolbox/readers/leveledReader/LeveledReaderToolControls.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -623,6 +623,14 @@ export const LeveledReaderToolControls: FunctionComponent = () => {
flex: 1 1 auto;
min-height: 0;
overflow-x: hidden;
// Stated rather than left implicit: this is what keeps
// everything reachable in a panel too short for the nav,
// the scrolling region's floor and the control block —
// the whole tool scrolls. (It is what overflow-x: hidden
// alone already computes to, since a non-visible axis
// forces the other to auto, but the fallback matters
// enough not to leave it as a side effect.)
overflow-y: auto;
// A single horizontal padding on the whole panel keeps
// every row (including "Level x of y") on one left edge,
// instead of each section supplying its own left margin.
Expand All @@ -631,53 +639,87 @@ export const LeveledReaderToolControls: FunctionComponent = () => {
>
{showTool && (
<>
{/* "Level x of y" and its arrows stay pinned at the top,
outside the scrolling region below, just as the
Decodable Reader's stage nav does. (BL-16585) */}
<ReaderToolNav
isForLeveled={true}
changeFunction={changeLevel}
/>
{/* The over-level warning banner and the within/over
legend only make sense when at least one measure is
actually over the current level's limit. */}
{isBookOverLevel(model, bookStats) && (
<>
<OverLevelBanner
levelNumber={model.levelNumber}
{/* The stats and lists scroll here, inside the panel,
rather than letting the whole panel scroll. That
keeps the nav above and the control block below (the
"Book is Leveled" toggle and Set Up Levels) always
visible, the way the Decodable Reader's word lists
scroll between its fixed nav and control block. */}
<div
css={css`
display: flex;
flex-direction: column;
flex: 1 1 auto;
// A floor, not min-height:0, for the same reason
// the Decodable Reader's sections have one: with
// nothing to stop it, this region is the only
// shrinkable thing in the column, so in a short
// panel it would shrink to 0 and the stats would
// be invisible AND unscrollable. Kept short so it
// rarely forces the panel to scroll; when the
// panel is too short even for this, the panel
// scrolls as a whole (as it did before) and
// everything stays reachable.
min-height: 120px;
Comment thread
StephenMcConnel marked this conversation as resolved.
overflow-y: auto;
overflow-x: hidden;
// Reserve space for the vertical scrollbar so
// its appearance (when the stats grow tall)
// doesn't shrink/reflow the content, matching
// the Decodable Reader's word grids.
scrollbar-gutter: stable;
`}
>
{/* The over-level warning banner and the within/over
legend only make sense when at least one measure
is actually over the current level's limit. */}
{isBookOverLevel(model, bookStats) && (
<>
<OverLevelBanner
levelNumber={model.levelNumber}
/>
<StatsLegend />
</>
)}
<LeveledReaderStats bookStats={bookStats} />
{levelReminders.length > 0 && (
<LeveledReaderList
l10nKeySuffix="FoThisLevel"
listHeaderText="For this Level"
listItems={levelReminders}
/>
<StatsLegend />
</>
)}
<LeveledReaderStats bookStats={bookStats} />
{levelReminders.length > 0 && (
)}
<LeveledReaderList
l10nKeySuffix="FoThisLevel"
listHeaderText="For this Level"
listItems={levelReminders}
l10nKeySuffix="KeepInMind"
listHeaderText="Keep in mind"
listItems={getKeepInMindLinks()}
/>
)}
<LeveledReaderList
l10nKeySuffix="KeepInMind"
listHeaderText="Keep in mind"
listItems={getKeepInMindLinks()}
/>
</div>
</>
)}
{/* Bottom group, top to bottom: Copy Book Stats, the "Book is
Leveled" toggle, then the Set Up Levels button last. When
the tool content is showing, margin-top:auto pushes the
group to the bottom; it scrolls with the content when the
panel overflows. The toggle stays mounted even when the
content is hidden so the user can turn the book back into a
leveled reader. */}
Leveled" toggle, then the Set Up Levels button last. It
never shrinks or scrolls: the scrolling region above takes
all the leftover height, so this group stays parked at the
bottom of the panel however tall the stats get. The toggle
stays mounted even when the content is hidden so the user
can turn the book back into a leveled reader. */}
<div
css={css`
display: flex;
flex-direction: column;
align-items: flex-start;
flex: 0 0 auto;
gap: 8px;
margin-bottom: 10px;
${showTool
? "margin-top: auto; padding-top: 12px;"
: ""}
${showTool ? "padding-top: 12px;" : ""}
`}
>
{showTool && (
Expand Down