chore(release): 4.33.5 [skip ci]

## [4.33.5](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.33.4...v4.33.5) (2025-10-20) ### Bug Fixes * **levels:** revert delayed column change, keep overflow hidden ([22f00f5](22f00f59f5))
fix(levels): revert delayed column change, keep overflow hidden
2025-10-20 14:03:23 +00:00 · 2025-10-20 09:02:19 -05:00 · 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
3 changed files with 80 additions and 65 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,24 @@
+## [4.33.5](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.33.4...v4.33.5) (2025-10-20)
+
+
+### Bug Fixes
+
+* **levels:** revert delayed column change, keep overflow hidden ([22f00f5](https://github.com/antialias/soroban-abacus-flashcards/commit/22f00f59f5facc36a846408dcd196ec54ea676b1))
+
+## [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)


--- a/apps/web/src/app/levels/page.tsx
+++ b/apps/web/src/app/levels/page.tsx
@@ -259,7 +259,16 @@ export default function LevelsPage() {
              })}
            >
              {/* 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({
@@ -290,19 +299,65 @@ 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 */}
              <div
                className={css({
                  display: 'flex',
                  justifyContent: 'center',
                  alignItems: 'center',
-                  mb: '6',
                  p: '6',
                  bg: 'rgba(0, 0, 0, 0.3)',
                  rounded: 'lg',
                  border: '1px solid',
                  borderColor: 'gray.700',
-                  overflowX: 'auto',
+                  overflow: 'hidden',
                  flex: 1,
                })}
              >
@@ -327,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.2",
+  "version": "4.33.5",
  "private": true,
  "description": "Beautiful Soroban Flashcard Generator - Monorepo",
  "workspaces": [
Author	SHA1	Message	Date
semantic-release-bot	ccaad3abc8	chore(release): 4.33.5 [skip ci] ## [4.33.5](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.33.4...v4.33.5) (2025-10-20) ### Bug Fixes * levels: revert delayed column change, keep overflow hidden ([`22f00f5`](`22f00f59f5`))	2025-10-20 14:03:23 +00:00
Thomas Hallock	22f00f59f5	fix(levels): revert delayed column change, keep overflow hidden Reverted the delayed column change approach (using displayedIndex state and onRest callback) which was causing bugs. Went back to the simpler direct approach where currentIndex immediately drives all changes. Changes: - Removed displayedIndex state and displayedLevel variable - Removed onRest callback from React Spring configuration - All UI elements now use currentLevel directly - Kept overflow: 'hidden' on abacus container The simpler approach provides better UX with immediate feedback while React Spring still provides smooth scale transitions. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-20 09:02:19 -05:00
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