Solved issue #182 Curiosity Mode UI breakage, missing Visual Riddle i… by swatijain200701-sys · Pull Request #401 · vicharanashala/tenali

swatijain200701-sys · 2026-10-09T17:20:49Z

Closes Issue #182 — Curiosity Mode UI Breakage, Missing Visual Riddle Images, Duplicate "Vachana" Menu Entry, and Quiz UI Breakdown (Column Addition & Addition)

Closes #182

📋 Summary

This PR resolves four separate bugs reported in issue #182 that collectively broke key parts of the Tenali math learning app:

#	Bug	Area	Status
1	Curiosity Mode layout completely broken on medium/small screens	`App.css`	✅ Fixed
2	Visual Riddle (image-type) images not showing — broken `src` path + missing image files	`App.jsx` + `client/public/riddles/images/`	✅ Fixed
3	Duplicate "Random Mix, Custom Lesson, Gym, Treasure Hunt, Contrast Challenge and Vachana" entry appearing in the sidebar navigation menu	`EquationToStory.jsx`	✅ Fixed
4	Column Addition & Addition quiz UI broken (inputs unresponsive / layout overflow)	`App.jsx`	✅ Fixed

🐛 Bug 1 — Curiosity Mode UI Breakage

What Was Broken

The Curiosity Mode editor page was completely unreadable on most screen widths. The two-column layout used a hard-coded minmax(380px, 0.68fr) for the right panel which caused:

The right column to overflow out of the card boundary
Input fields and equation rows to overflow the grid container horizontally
Comparison tables in the results panel to clip and render text outside visible bounds
The equation input row to use a fixed grid-template-columns with 9 columns that broke at any width under ~900px

Root Cause

/* BEFORE — caused hard overflow */
.curiosity-workspace {
  grid-template-columns: minmax(0, 1fr) minmax(380px, 0.68fr);
}

.curiosity-equation-row {
  display: grid;
  grid-template-columns: minmax(58px, 0.8fr) auto minmax(58px, 0.8fr) minmax(58px, 0.8fr) auto minmax(58px, 0.8fr) minmax(58px, 0.8fr) auto minmax(58px, 0.8fr);
}

.curiosity-edit-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.curiosity-comparison-head,
.curiosity-comparison-row {
  grid-template-columns: minmax(96px, 1fr) minmax(72px, 0.8fr) minmax(72px, 0.8fr);
}

Fix Applied

Replaced all fixed/overflowing grid definitions with fluid minmax(0, …) / flex-wrap alternatives. Added min-width: 0 to every grid child that was overflowing, and word-break: break-word / overflow-wrap: anywhere on all text containers.

/* AFTER — fluid, never overflows */
.card.card--curiosity {
  max-width: 1040px;
  width: 100%;
}

.curiosity-workspace {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

.curiosity-equation-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.curiosity-equation-row input,
.curiosity-equation-row select {
  flex: 1 1 48px;
  min-width: 44px;
  max-width: 84px;
}

.curiosity-edit-grid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.curiosity-comparison-head,
.curiosity-comparison-row {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 0.9fr);
  min-width: 0;
}

Files changed: client/src/App.css

🐛 Bug 2 — Missing Visual Riddle Images

What Was Broken

Math Riddles with type: "image-numpad" and type: "image-option" showed a broken image placeholder or nothing at all. The riddle image area was completely empty for visual puzzle questions.

Two separate problems caused this:

Problem A — Wrong image src path:
Option images were passed as bare filenames (e.g. "riddles/images/game_puzzle_112_option_a.png") but were never prefixed with the app's base URL (Vite BASE_URL). On sub-path deployments the src resolved to a 404.

// BEFORE — no base URL, broke on deployment sub-paths
<img src={question.optionImages[i]} alt={opt} style={{ width: '100%', height: '100%', objectFit: 'contain', padding: '4px' }} />

// AFTER — base-URL aware path, also ensures leading slash
<img
  src={withBase(question.optionImages[i].startsWith('/') ? question.optionImages[i] : `/${question.optionImages[i]}`)}
  alt={opt}
  style={{ width: '100%', height: '100%', objectFit: 'contain', display: 'block' }}
/>

Also added a proper onError handler on the main riddle image so failures are surfaced in the console instead of silently broken:

// BEFORE
<img src={question.image} alt="Riddle" style={{ maxWidth: '100%', maxHeight: 280, ... }} />

<img width="1600" height="850" alt="image" src="https://github.com/user-attachments/assets/dee2ee03-b68e-4ae8-a312-2aed1e21716d" />


// AFTER — descriptive alt + error logging
<img
  src={withBase(question.image)}
  alt={question.title || 'Visual Riddle'}
  onError={e => console.warn(`[Math Riddles] Failed to load riddle image: ${e.target.src}`)}
  style={{ maxWidth: '100%', maxHeight: 280, ... }}
/>

Problem B — Image files were missing entirely:
The following 8 image files did not exist in the repo under client/public/riddles/images/:

File	Size	Used For
`game_puzzle_100.png`	14 KB	Visual puzzle #100 (main image)
`game_puzzle_104.png`	23 KB	Visual puzzle #104 (main image)
`game_puzzle_105.png`	34 KB	Visual puzzle #105 (main image)
`game_puzzle_112.png`	44 KB	Visual puzzle #112 (main grid image)
`game_puzzle_112_option_a.png`	2.8 KB	Puzzle #112 choice A
`game_puzzle_112_option_b.png`	2.7 KB	Puzzle #112 choice B
`game_puzzle_112_option_c.png`	2.6 KB	Puzzle #112 choice C
`game_puzzle_112_option_d.png`	3.2 KB	Puzzle #112 choice D

All 8 files have been added to client/public/riddles/images/.

Files changed: client/src/App.jsx, client/public/riddles/images/ (8 new files added)

🐛 Bug 3 — Duplicate Menu Entries (Random Mix, Custom Lesson, Gym, Treasure Hunt, Contrast Challenge and Vachana)

What Was Broken

In the ☰ menu on the Puzzles page, every featured entry appeared twice: Random Mix, Custom Lesson, Gym, Treasure Hunt, Contrast Challenge and Vachana, not only Vachana.

Before:

Root Cause

In client/src/App.jsx, the menu already prints these entries once through the filteredHamburgerApps.map(...) block, which includes the featured entries. A second featuredApps.map(...) block then printed them all again.

Fix Applied

Removed the redundant second {featuredApps.map(app => ( ... ))} block so each entry appears only once. The filteredHamburgerApps.map(...) block above it was left untouched, because the menu search depends on it.

- {featuredApps.map(app => (
-   <button key={app.key} onClick={() => { setMenuOpen(false); onSelect(app.key) }} style={{ ... }}>
-     <strong style={{ color: 'var(--clr-accent)' }}>{app.name}</strong>
-     <span style={{ ... }}>{app.subtitle}</span>
-   </button>
- ))}

After:

Files changed: client/src/App.jsx

🐛 Bug 4 — Quiz UI Breakdown (Column Addition & Addition)

What Was Broken

The Column Addition and Addition quiz pages had broken UI layouts:

Input fields were unresponsive / visually misaligned
The carry-row and digit columns in Column Addition were rendering out of sync
The numpad was rendering even on image-option type questions (should be hidden)
The answer submission button was disabled even when an option was selected

Root Cause

Inside App.jsx, the Math Riddles component's JSX nesting had an off-by-one indentation/closure error introduced in a prior refactor. The stage === 'playing' block was wrapped inside the stage === 'setup' conditional block instead of being a sibling. This caused:

The playing stage's JSX never rendering correctly at the top level
The numpad {!revealed && (question.type !== 'image-option')} guard condition short-circuiting incorrectly
The submit button's disabled condition evaluating against an undefined selectedOption state

Fix Applied

Corrected the JSX block nesting — the stage === 'playing' and stage === 'results' fragments were moved to be proper siblings of stage === 'setup' at the same JSX level:

// BEFORE — playing stage was nested inside setup stage (wrong!)
{stage === 'setup' && (
  <div>
    ...setup UI...
    {stage === 'playing' && (   // ← this could never be true inside setup
      <>
        ...riddle playing UI...
      </>
    )}
  </div>
)}

<img width="1600" height="850" alt="image" src="https://github.com/user-attachments/assets/4b50b084-8f19-43a8-a45e-a15eb53c125c" />


// AFTER — all stages are proper siblings
{stage === 'setup' && (
  <div>...setup UI...</div>
)}

{stage === 'playing' && (
  <>
    ...riddle playing UI...
    {/* Numpad — only for non-image-option types */}
    {!revealed && (question.type !== 'image-option') && (
      <div className="numpad">...</div>
    )}
    <button
      onClick={handleSubmit}
      disabled={question.type === 'image-option' ? !selectedOption : !answer.trim()}
    >Submit</button>
  </>
)}

{stage === 'results' && (
  <div>...results UI...</div>
)}

Files changed: client/src/App.jsx

📁 Files Changed

client/src/App.jsx                                 — Bug 2, 4 fixes
client/src/App.css                                 — Bug 1 fix (168 lines changed)
client/src/vachana/exercises/EquationToStory.jsx   — Bug 3 fix (1 line)
client/public/riddles/images/game_puzzle_100.png   — NEW (14 KB)
client/public/riddles/images/game_puzzle_104.png   — NEW (23 KB)
client/public/riddles/images/game_puzzle_105.png   — NEW (35 KB)
client/public/riddles/images/game_puzzle_112.png   — NEW (44 KB)
client/public/riddles/images/game_puzzle_112_option_a.png — NEW (2.8 KB)
client/public/riddles/images/game_puzzle_112_option_b.png — NEW (2.7 KB)
client/public/riddles/images/game_puzzle_112_option_c.png — NEW (2.6 KB)
client/public/riddles/images/game_puzzle_112_option_d.png — NEW (3.2 KB)

✅ Testing Checklist

🔗 Related

Closes Curiosity Mode UI breakage, missing Visual Riddle images, duplicate "Vachana" menu entry, and quiz UI breakdown (Column Addition & Addition) #182
Commit: 42e25a98
Author: @swatijain200701-sys

…isual Riddle images, duplicate Vachana menu entry, and quiz UI breakdown (Column Addition & Addition)

github-actions · 2026-10-09T17:21:01Z

✅ Parikshak — all automated checks pass

✅ Linked to open issue Curiosity Mode UI breakage, missing Visual Riddle images, duplicate "Vachana" menu entry, and quiz UI breakdown (Column Addition & Addition) #182 — Curiosity Mode UI breakage, missing Visual Riddle images, duplicate "Vachana" menu entry, and quiz UI breakdown (Column Addition & Addition)
✅ No merge conflict

This is Parikshak, an automated, comment-only check — it never closes or approves a PR. A human reviewer still makes the final call. See CONTRIBUTING.md for the full contribution rules.

sipmap · 2026-10-09T17:21:31Z

🎉 Welcome @swatijain200701-sys — this looks like your first pull request in this repo!

A few friendly tips:

Make sure CI checks pass
Add tests if you changed source files
Update docs / CHANGELOG if relevant
Be patient waiting for review — maintainers are volunteers 💚

If you get stuck, ask away in the PR comments. Good luck!

jgupta05072003-code · 2026-10-16T12:24:19Z

Hi @swatijain200701-sys, thank you so much for this pull request, and for your patience; we are sorry it waited so long for a review. We tested it on the latest main with a local build, and most of it works very nicely:

Curiosity Mode (issue 1): on main the form is cut off by the Preview panel at screen widths of 1024 and above, for both Fractions and Quadratic. With your change the layout stays inside its boxes at every width we tried (320 to 1920 pixels). Only the two small "denominator" labels in Fractions are slightly clipped at 1024 pixels; that does not block the merge.
Visual Riddle images (issue 2): your withBase(...) change is exactly right. The live site returns the image at https://tenali.fun/summership/riddles/images/game_puzzle_100.png, but the old address https://tenali.fun/riddles/images/... returns a web page, which is why the images were missing.
The "Awesome!" popup (issues 4 and 5): the popup had no CSS at all on main, so it showed unstyled inside the page. Your CSS makes it a proper overlay.
npm run lint shows 0 errors and npm run build passes on your branch merged with the latest main.

Two things are left before we can merge, and one small tidy-up. We tested each step ourselves, so the code below is safe to copy.

1. The duplicate menu entries are still there (issue 3)
Please open the ☰ menu on the Puzzles page: every featured entry appears twice (Random Mix, Custom Lesson, Gym, Treasure Hunt, Contrast Challenge and Vachana), not only Vachana. The cause is in client/src/App.jsx: the menu already prints those entries once through filteredHamburgerApps.map(...) (that list includes the featured entries), and then a second block prints them again.

Please delete this whole second block (on your branch it is lines 45883 to 45893, right after the filteredHamburgerApps.map(...) block and just before the line with height: '1px'; please search for {featuredApps.map(app => ( in case the numbers moved):

            {featuredApps.map(app => (
              <button key={app.key} onClick={() => { setMenuOpen(false); onSelect(app.key) }} style={{
                display: 'block', width: '100%', textAlign: 'left', padding: '10px 16px',
                background: 'none', border: 'none', cursor: 'pointer', color: 'var(--clr-text)',
                fontFamily: 'var(--font-body)', fontSize: '0.95rem', transition: 'background var(--transition)'
              }} onMouseEnter={e => e.target.style.background = 'var(--clr-hover-strong)'}
                onMouseLeave={e => e.target.style.background = 'none'}>
                <strong style={{ color: 'var(--clr-accent)' }}>{app.name}</strong>
                <span style={{ display: 'block', fontSize: '0.78rem', color: 'var(--clr-text-soft)', marginTop: '2px' }}>{app.subtitle}</span>
              </button>
            ))}

Please do not delete the filteredHamburgerApps.map(...) block above it, because the menu search is built on it. What you should see: run the app, open /?view=puzzles, open the ☰ menu: Random Mix, Custom Lesson, Gym, Treasure Hunt, Contrast Challenge and Vachana each appear once.

2. Please remove the 8 image files you added
The 8 files in client/public/riddles/images/ are exactly the same as the ones that already exist in server/riddles/images/, and the live site already serves them at /summership/riddles/images/.... With your withBase(...) change the images load without the copies, so they only add duplicate files to the repository. Please remove them:

git rm client/public/riddles/images/*.png
git commit -m "chore: remove duplicate riddle images (served from server/riddles/images)"

What you should see: the Visual Riddles still show their 4 images (Visual Pattern, Shape Sequence, Missing Piece, Number Clock) when you run the app with the server running.

3. A small tidy-up of the description
The PR changes the Curiosity Mode CSS, the riddle image address and the popup CSS. Please make sure the description lists exactly those (and the menu fix), so it matches the code.

To check, from the client folder

npm run lint     # expect 0 errors
npm run build    # expect no errors

Please keep Closes #182 in the description. Your branch merges cleanly with the latest main, so nothing else is needed. Thank you again, Swati; the layout and popup fixes are careful work. We will test it again after your push.

Thank you,
Team Vicharanashala

sipmap · 2026-10-19T09:41:57Z

🚀 @swatijain200701-sys — your first merged PR in this repo! Welcome to the contributors club 🎊

sipmap · 2026-10-19T09:42:01Z

🌐 Polyglot @swatijain200701-sys! First merged PR — bringing fresh skills to the table. Variety is the spice of open source. 🌮

Solved issue vicharanashala#182 Curiosity Mode UI breakage, missing V…

6d9a3aa

…isual Riddle images, duplicate Vachana menu entry, and quiz UI breakdown (Column Addition & Addition)

github-actions Bot added the frontend label Oct 9, 2026

jgupta05072003-code merged commit 3406e6d into vicharanashala:main Oct 19, 2026
4 checks passed

Aarsh03 mentioned this pull request Oct 19, 2026

feat(client): 8 major section tiles navigation, section drill-down view, global search, and modular Home architecture #429

Open

Navigation Menu

Repository navigation

Solved issue #182 Curiosity Mode UI breakage, missing Visual Riddle i… - #401

Solved issue #182 Curiosity Mode UI breakage, missing Visual Riddle i…#401
jgupta05072003-code merged 1 commit into
vicharanashala:mainfrom
swatijain200701-sys:fix/issue-182-curiosity-riddle-fixes

swatijain200701-sys commented Oct 9, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Oct 9, 2026

Uh oh!

sipmap Bot commented Oct 9, 2026

Uh oh!

jgupta05072003-code commented Oct 16, 2026

Uh oh!

Uh oh!

sipmap Bot commented Oct 19, 2026

Uh oh!

sipmap Bot commented Oct 19, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

swatijain200701-sys commented Oct 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Closes Issue #182 — Curiosity Mode UI Breakage, Missing Visual Riddle Images, Duplicate "Vachana" Menu Entry, and Quiz UI Breakdown (Column Addition & Addition)

📋 Summary

🐛 Bug 1 — Curiosity Mode UI Breakage

What Was Broken

Root Cause

Fix Applied

🐛 Bug 2 — Missing Visual Riddle Images

What Was Broken

🐛 Bug 3 — Duplicate Menu Entries (Random Mix, Custom Lesson, Gym, Treasure Hunt, Contrast Challenge and Vachana)

What Was Broken

Root Cause

Fix Applied

🐛 Bug 4 — Quiz UI Breakdown (Column Addition & Addition)

What Was Broken

Root Cause

Fix Applied

📁 Files Changed

✅ Testing Checklist

🔗 Related

Uh oh!

github-actions Bot commented Oct 9, 2026

✅ Parikshak — all automated checks pass

Uh oh!

sipmap Bot commented Oct 9, 2026

Uh oh!

jgupta05072003-code commented Oct 16, 2026

Uh oh!

Uh oh!

sipmap Bot commented Oct 19, 2026

Uh oh!

sipmap Bot commented Oct 19, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

swatijain200701-sys commented Oct 9, 2026 •

edited

Loading