chore(release): 4.33.4 [skip ci]

## [4.33.4](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.33.3...v4.33.4) (2025-10-20) ### Bug Fixes * **levels:** stabilize slider position and prevent abacus clipping ([09004dc](09004dc2c0))
fix(levels): stabilize slider position and prevent abacus clipping
2025-10-20 13:58:06 +00:00 · 2025-10-20 08:56:57 -05:00 · 2025-10-20 13:51:02 +00:00 · 2025-10-20 08:49:59 -05:00 · 2025-10-20 13:46:27 +00:00 · 2025-10-20 08:45:17 -05:00
3 changed files with 107 additions and 77 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,31 @@
+## [4.33.4](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.33.3...v4.33.4) (2025-10-20)
+
+
+### Bug Fixes
+
+* **levels:** stabilize slider position and prevent abacus clipping ([09004dc](https://github.com/antialias/soroban-abacus-flashcards/commit/09004dc2c055031ee2f71c964ceee6f7b1d42ecd))
+
+## [4.33.3](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.33.2...v4.33.3) (2025-10-20)
+
+
+### Code Refactoring
+
+* **levels:** move slider into level display pane above abacus ([2d8bb4a](https://github.com/antialias/soroban-abacus-flashcards/commit/2d8bb4ab8804f399d1ccc8a18feff9f09eca8029))
+
+## [4.33.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.33.1...v4.33.2) (2025-10-20)
+
+
+### Bug Fixes
+
+* **levels:** add fixed height to entire level display pane ([200b26c](https://github.com/antialias/soroban-abacus-flashcards/commit/200b26c2cd35d1d637ede9dcfc3dbbc7f3f19320))
+
+## [4.33.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.33.0...v4.33.1) (2025-10-20)
+
+
+### Bug Fixes
+
+* **levels:** only animate abacus, not container with background/border ([c80477d](https://github.com/antialias/soroban-abacus-flashcards/commit/c80477d24877ddada5f3f4405abbf05e1d753b5d))
+
 ## [4.33.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.32.1...v4.33.0) (2025-10-20)


--- a/apps/web/src/app/levels/page.tsx
+++ b/apps/web/src/app/levels/page.tsx
@@ -253,10 +253,22 @@ export default function LevelsPage() {
                        : 'amber.500',
                rounded: 'xl',
                p: { base: '6', md: '8' },
+                height: { base: 'auto', md: '700px' },
+                display: 'flex',
+                flexDirection: 'column',
              })}
            >
              {/* Level Info */}
-              <div className={css({ textAlign: 'center', mb: '6' })}>
+              <div
+                className={css({
+                  textAlign: 'center',
+                  mb: '4',
+                  height: '160px',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  justifyContent: 'center',
+                })}
+              >
                <div className={css({ fontSize: '5xl', mb: '3' })}>{currentLevel.emoji}</div>
                <h2
                  className={css({
@@ -287,31 +299,82 @@ export default function LevelsPage() {
                )}
              </div>

+              {/* Range Slider with hover support */}
+              <div className={css({ mb: '6', px: { base: '2', md: '8' } })}>
+                <div className={css({ mb: '3', textAlign: 'center' })}>
+                  <p className={css({ fontSize: 'sm', color: 'gray.400' })}>
+                    Hover, drag, or touch the slider to explore all levels
+                  </p>
+                </div>
+
+                <div
+                  onMouseMove={handleSliderHover}
+                  onTouchMove={handleSliderHover}
+                  className={css({ position: 'relative' })}
+                >
+                  <input
+                    ref={sliderRef}
+                    type="range"
+                    min="0"
+                    max={allLevels.length - 1}
+                    value={currentIndex}
+                    onChange={(e) => setCurrentIndex(Number(e.target.value))}
+                    className={css({
+                      w: '100%',
+                      h: '2',
+                      bg: 'gray.700',
+                      rounded: 'full',
+                      outline: 'none',
+                      cursor: 'pointer',
+                    })}
+                  />
+                </div>
+
+                {/* Level Markers */}
+                <div
+                  className={css({
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    mt: '3',
+                    fontSize: 'xs',
+                    color: 'gray.500',
+                  })}
+                >
+                  <span>10th Kyu</span>
+                  <span>1st Kyu</span>
+                  <span>10th Dan</span>
+                </div>
+              </div>
+
              {/* Abacus Display */}
-              <animated.div
+              <div
                className={css({
                  display: 'flex',
                  justifyContent: 'center',
-                  mb: '6',
+                  alignItems: 'center',
                  p: '6',
                  bg: 'rgba(0, 0, 0, 0.3)',
                  rounded: 'lg',
                  border: '1px solid',
                  borderColor: 'gray.700',
-                  overflowX: 'auto',
+                  overflow: 'visible',
+                  flex: 1,
                })}
-                style={{
-                  transform: animatedProps.scaleFactor.to((s) => `scale(${s / scaleFactor})`),
-                }}
              >
-                <AbacusReact
-                  value={displayValue}
-                  columns={currentLevel.digits}
-                  scaleFactor={scaleFactor}
-                  showNumbers={true}
-                  customStyles={darkStyles}
-                />
-              </animated.div>
+                <animated.div
+                  style={{
+                    transform: animatedProps.scaleFactor.to((s) => `scale(${s / scaleFactor})`),
+                  }}
+                >
+                  <AbacusReact
+                    value={displayValue}
+                    columns={currentLevel.digits}
+                    scaleFactor={scaleFactor}
+                    showNumbers={true}
+                    customStyles={darkStyles}
+                  />
+                </animated.div>
+              </div>

              {/* Digit Count */}
              <div className={css({ textAlign: 'center', color: 'gray.400', fontSize: 'sm' })}>
@@ -319,67 +382,6 @@ export default function LevelsPage() {
              </div>
            </div>

-            {/* Slider Control */}
-            <div
-              className={css({
-                bg: 'rgba(0, 0, 0, 0.3)',
-                border: '1px solid',
-                borderColor: 'gray.700',
-                rounded: 'xl',
-                p: '6',
-              })}
-            >
-              <div className={css({ mb: '4', textAlign: 'center' })}>
-                <h3
-                  className={css({ fontSize: 'lg', fontWeight: 'bold', color: 'white', mb: '2' })}
-                >
-                  Explore All Levels
-                </h3>
-                <p className={css({ fontSize: 'sm', color: 'gray.400' })}>
-                  Hover, drag, or touch the slider to see each rank
-                </p>
-              </div>
-
-              {/* Range Slider with hover support */}
-              <div
-                onMouseMove={handleSliderHover}
-                onTouchMove={handleSliderHover}
-                className={css({ position: 'relative' })}
-              >
-                <input
-                  ref={sliderRef}
-                  type="range"
-                  min="0"
-                  max={allLevels.length - 1}
-                  value={currentIndex}
-                  onChange={(e) => setCurrentIndex(Number(e.target.value))}
-                  className={css({
-                    w: '100%',
-                    h: '2',
-                    bg: 'gray.700',
-                    rounded: 'full',
-                    outline: 'none',
-                    cursor: 'pointer',
-                  })}
-                />
-              </div>
-
-              {/* Level Markers */}
-              <div
-                className={css({
-                  display: 'flex',
-                  justifyContent: 'space-between',
-                  mt: '4',
-                  fontSize: 'xs',
-                  color: 'gray.500',
-                })}
-              >
-                <span>10th Kyu</span>
-                <span>1st Kyu</span>
-                <span>10th Dan</span>
-              </div>
-            </div>
-
            {/* Legend */}
            <div
              className={css({
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "soroban-monorepo",
-  "version": "4.33.0",
+  "version": "4.33.4",
  "private": true,
  "description": "Beautiful Soroban Flashcard Generator - Monorepo",
  "workspaces": [
Author	SHA1	Message	Date
semantic-release-bot	a85815fdf9	chore(release): 4.33.4 [skip ci] ## [4.33.4](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.33.3...v4.33.4) (2025-10-20) ### Bug Fixes * levels: stabilize slider position and prevent abacus clipping ([`09004dc`](`09004dc2c0`))	2025-10-20 13:58:06 +00:00
Thomas Hallock	09004dc2c0	fix(levels): stabilize slider position and prevent abacus clipping Fixed three layout issues with the levels page slider interaction: 1. Fixed height for level info section (160px with flexbox centering) - Prevents slider from shifting vertically when switching between Kyu and Dan levels (Dan levels have extra text for name + minScore) - Keeps slider position stable during hover interaction 2. Changed abacus container overflow from 'auto' to 'visible' - Prevents abacus from being clipped at container boundaries - Allows full abacus display without scrollbars 3. Reduced spacing between sections for better layout balance These changes ensure the slider stays perfectly under the mouse cursor during hover interaction while the abacus smoothly animates. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-20 08:56:57 -05:00
semantic-release-bot	22c8a57a16	chore(release): 4.33.3 [skip ci] ## [4.33.3](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.33.2...v4.33.3) (2025-10-20) ### Code Refactoring * levels: move slider into level display pane above abacus ([`2d8bb4a`](`2d8bb4ab88`))	2025-10-20 13:51:02 +00:00
Thomas Hallock	2d8bb4ab88	refactor(levels): move slider into level display pane above abacus Relocate the slider control from a separate container below the level display to inside the level pane itself, positioned above the abacus. Changes: - Move slider markup into main level display pane - Position between level info and abacus display - Remove separate slider container that was below - Adjust spacing for better visual hierarchy Improves UX by keeping the control close to the content it affects. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-20 08:49:59 -05:00
semantic-release-bot	8e345cfb4c	chore(release): 4.33.2 [skip ci] ## [4.33.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.33.1...v4.33.2) (2025-10-20) ### Bug Fixes * levels: add fixed height to entire level display pane ([`200b26c`](`200b26c2cd`))	2025-10-20 13:46:27 +00:00
Thomas Hallock	200b26c2cd	fix(levels): add fixed height to entire level display pane Fix slider hover interaction by making the entire level display pane (including level info, abacus, and digit count) a fixed height. This prevents the slider from moving when hovering over it. Changes: - Add fixed height of 700px on desktop (auto on mobile) to level pane - Convert container to flexbox with column direction - Make abacus display area flex: 1 to fill remaining space - Slider now stays perfectly still under mouse during hover This makes the hover interaction much more usable - you can now smoothly move your mouse across the slider without it jumping away. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-20 08:45:17 -05:00
semantic-release-bot	66e38af457	chore(release): 4.33.1 [skip ci] ## [4.33.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.33.0...v4.33.1) (2025-10-20) ### Bug Fixes * levels: only animate abacus, not container with background/border ([`c80477d`](`c80477d248`))	2025-10-20 13:44:30 +00:00
Thomas Hallock	c80477d248	fix(levels): only animate abacus, not container with background/border Fix React Spring animation to only affect the abacus itself, not the container with background and border. Also keep container height fixed. Changes: - Move animation from container div to inner wrapper around AbacusReact - Add minHeight to container to prevent height changes - Add alignItems: 'center' to vertically center the abacus - Container background/border now stays fixed while abacus animates This provides a cleaner, more polished animation where only the abacus scales smoothly while the container remains stable. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-20 08:43:24 -05:00