Tools disagree about where input, result and history go, and history falls below the fold on Financial and GST
- Dominant language
- JavaScript
- Stars
- 5
- Forks
- 1
- Avg merge
- 1h 25m
- Merged PRs (30d)
- 1
Description
## What a visitor sees
On `/compound-interest-calculator` the right column holds the result panel, and **History is stacked underneath it**. The result panel is tall — figure, three-row breakdown, chart, Formula, Assumption, disclaimer — so History starts well below the fold. At the same time the left column ends at the **Clear** button and the whole lower-left of the page is blank. The visitor scrolls past an empty half-page to reach History.
Other tools do not do this. On `/calculator` and the nine unit converters, History sits at the top of the right column and the result is inline in the tool card, so History is visible without scrolling.
## The layout each tool uses today
Ten views set a two-column grid. They agree on nothing:
| View | Tools | Right column width | Right column holds | History |
| --- | --- | --- | --- | --- |
| `CalculatorView.vue:18` | Calculator | `19rem` | History | yes |
| `CurrencyConverterView.vue:8` | Currency Converter | `20rem` | History | yes |
| `UnitConverterView.vue:18` | 9 converters | `20rem` | History | yes |
| `TimerView.vue:13,25,34` | Timer, Stopwatch, Countdown | `20rem` | the live time display | no |
| `FinancialCalculatorsView.vue:18` | 6 calculators | `23rem` | **Result, then History** | yes |
| `GstCalculatorView.vue:18` | GST Calculator | `23rem` | **Result, then History** | yes |
| `HealthCalculatorsView.vue:12` | 4 calculators | `23rem` | Result | **none** |
Seven more views have no second column at all: Dictionary, HSN and SAC Lookup, PIN and IFSC search, Script Conversion, Audio Recorder, Audio Editor, World Clock.
So the sidebar is three different widths, carries three different things, and 5 of 34 tools have history while tools beside them do not.
The specific defect is `FinancialCalculatorsView.vue:64` and `GstCalculatorView.vue:101` — `flex flex-col gap-8` stacks Result above History inside one sticky column.
## The rule wanted
Reported by Vibhav:
1. **History always occupies the same space on the right**, on every tool that has one.
2. **When result and input are separate panels, the result goes below the input area** — in the left column, not the right.
3. **Everything is visible in one fold.**
4. **Input, result, chart and history are placed consistently across tools.**
Moving the result to the left column also fills the blank lower-left the screenshot shows, and it lets the right column stay short enough to be sticky and stay in view — `lg:sticky lg:top-6` is already on every one of these columns.
## Three decisions this needs before it can be built
- **Health has no history.** The four health calculators produce a repeatable result and record none. Do they gain history under this contract, or does the column sit empty on those pages?
- **Seven views have no right column.** Does the contract cover the lookups (Dictionary, HSN, PIN, IFSC), the audio tools and World Clock, or is it only for tools that compute a reusable result from typed input? The lookups have recents rather than history, which may be the same idea under another name.
- **One column width.** `19rem`, `20rem` and `23rem` are in use. Pick one so every tool page has the same lane.
## Related
- **#276 (compact the tool cards) does most of the work for "one fold".** A denser card plus the result moved left is what makes a tool fit without scrolling; neither achieves it alone.
- **#274 settles the page width.** The column split reads against that width, so #274 should land first or these two get built twice.
- **This is the same shape as the fix in #237** (tools disagreeing about arrival state) — the cause is again that each view writes its own layout, with no shared primitive to disagree with. The durable form of this change is a shared tool-page layout that names the input, result and history slots, which is also what #276 recommends for the card.
Reported by Vibhav, QA pass on the live site, 2026-08-16.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with the grid declarations in CalculatorView.vue, CurrencyConverterView.vue, UnitConverterView.vue, TimerView.vue, FinancialCalculatorsView.vue, GstCalculatorView.vue, and HealthCalculatorsView.vue, then review #274 and #276. Resolve the history coverage, no-sidebar coverage, and shared width decisions before defining the common layout. Done means input, result, chart, and history occupy consistent slots and the affected tools fit within one fold.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Refactor
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100