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
3 changed files with 73 additions and 65 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,17 @@
+## [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: 'visible',
                  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.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