fix: mobile responsiveness — grid columns visible, touch targets ≥44px (fixes #34, #35)#52
Open
Kpa-clawbot wants to merge 51 commits into
Open
fix: mobile responsiveness — grid columns visible, touch targets ≥44px (fixes #34, #35)#52Kpa-clawbot wants to merge 51 commits into
Kpa-clawbot wants to merge 51 commits into
Conversation
added 6 commits
February 14, 2026 01:43
Fixes #34 — Grid columns E-H off-screen on mobile: - Hide non-essential columns G (Rev/yr) and H (empty) on screens ≤600px - Reduce grid to 7 columns with flexible widths - Enable horizontal scroll as fallback (overflow-x: auto) - Hide decorative toolbar to save vertical space - Compact title bar, formula bar, status bar - Make modals, toasts, and arc selection fit mobile viewports Fixes #35 — Touch targets too small: - All game buttons (Hire, Upgrade, Auto, Collect, Max) min-height 44px - Menu items and dropdown items min-height 44px - Toast close button and toast action buttons min-height 44px - Mini-task buttons min-height 44px - Modal buttons min-height 44px - Help close button min-height 44px - Title bar buttons min-width 44px All changes use @media (max-width: 600px) — desktop layout unchanged.
- Hide $/hr and $/day stats on mobile, show only $/sec and $/min (#39) - Hide debug buttons on mobile revenue bar - Scale up text across the board for mobile readability (#40): grid cells 11px→14px, buttons 10px→13px, status bar 10px→12px, sheet tabs 10px→12px, formula bar/col headers bumped to 12px, toasts/modals to 14px Fixes #39, closes #40
#41 — Toast notifications: max-width 90vw, text wraps, buttons stack #42 — Mobile boss key: minimize button in title bar triggers boss mode #43 — Touch support: touch-action:manipulation CSS, viewport meta updated #44 — Formula bar: hidden on mobile to save vertical space #45 — Mini-task bar: full-width, text wraps, touch-sized buttons #46 — Golden cells: exclude hidden columns G/H on mobile (JS fix) #50 — Status bar: hide dense info, keep only date + time on mobile #51 — Modal dialogs: max-width 95vw with proper scroll support
…#49) #47: Prevent viewport overscroll and rubber-banding - Add overscroll-behavior: none on html and body - Body already has overflow: hidden #48: Hide filler rows on mobile to save vertical space - Hide #filler-rows with display: none in portrait (<600px) - Also hidden in landscape (<900px) #49: Test and optimize landscape mode (844×390) - Add landscape-specific media query for max-width: 900px - Hide menu bar and formula bar to maximize grid space - Compact title bar (22px), column headers (18px), status bar (18px) - Reduce grid row heights (32px) and button sizes (32px min) - Hide non-essential status bar items - Hide valuation chart overlay - Compact revenue breakdown, sheet tabs, mini-task bar - Responsive toast and modal sizing for landscape - Grid gets 75% of viewport height, ~8 rows visible Cache buster bumped to v=17.
added 6 commits
February 14, 2026 10:06
- Replace spreadsheet grid with vertical card layout on mobile (<600px) - Each department is a self-contained card with name, staff, rev, buttons - Sticky green cash header with amount and per-day revenue - Bottom navigation bar: Ops | P&L | Board Room | Settings - P&L view with card-based financial summary, IR section, tax debts - Board Room view with upgrade cards - Settings view with save/autosave/boss mode/help/new game - All touch targets >= 44px - Hide desktop chrome (title bar, menu, toolbar, formula bar, column headers) - Toast notifications positioned above bottom nav - Landscape mode support - Cache bust to v18
- Toast: skip saved position on mobile, use CSS-controlled bottom placement - Toast: disable drag on mobile - Golden cell: apply glow to entire card on mobile instead of single cell - Settle tax/all: force rebuild mobile P&L after settling - Board room purchase: force rebuild mobile views - updateBoardRoomTab: also update mobile nav - Various edge case fixes for mobile state management
…ockable - Hide locked departments that can't be unlocked yet (mob-hidden class) - Fix button flex layout in cards (flex: 1 auto instead of width: 100%) - Hide empty cells in locked row cards - Add display: flex to cell-e and cell-f for proper button layout - Fix cell-d action container with display: flex and gap
- Move mobile views (P&L, Board Room, Settings) before sheet tabs/status bar so they appear in correct flex order between grid and status bar - Fix autosave toggle to use autosaveEnabled variable instead of gameState - Clean up mobileSwitchTab to not set inline display styles - Remove grid-container padding-top for edge-to-edge cash header - Add margin to source cards for side spacing
- On mobile: Hire shows cost only (no +rev/d detail) - On mobile: Upgrade shows cost only (no +rev/d detail) - On mobile: Collect shows 💰 emoji + pending amount - Allow button text wrapping instead of nowrap - Status bar height increased to 28px for readability
Kpa-clawbot
had a problem deploying
to
github-pages
GitHub Actions
Failure
Kpa-clawbot
temporarily deployed
to
github-pages
GitHub Actions
Inactive
- Landscape (>600px wide): use compact desktop grid layout instead of cards (phones in landscape have enough width for the spreadsheet) - Landscape CSS: hide menu/toolbar/formula bar, compact rows, hide G/H cols - Add white-space: pre-wrap to toast body (fixes newlines in IRS/earnings toasts) - Use matchMedia for isMobile() check instead of innerWidth
Kpa-clawbot
temporarily deployed
to
github-pages
GitHub Actions
Inactive
Kpa-clawbot
temporarily deployed
to
github-pages
GitHub Actions
Inactive
Complete design document covering: - Problem statement and solution architecture - Layout structure (ASCII diagrams) - Card format for departments, P&L, Board Room - All preserved mechanics checklist - Desktop vs mobile comparison table - Technical details (CSS, JS, HTML) - Version history
Kpa-clawbot
temporarily deployed
to
github-pages
GitHub Actions
Inactive
Kpa-clawbot
temporarily deployed
to
github-pages
GitHub Actions
Inactive
The base CSS .cell has height:100% for the grid layout, which caused cells to overflow their card containers on mobile. Now overridden to height:auto and overflow:visible for proper card rendering.
Kpa-clawbot
temporarily deployed
to
github-pages
GitHub Actions
Inactive
Kpa-clawbot
temporarily deployed
to
github-pages
GitHub Actions
Inactive
…ile layout Major rewrite of mobile support. Instead of patching the old mobile branch (which was 92 commits behind master), this rebuild starts from master's code and adds mobile CSS/JS on top. New features now working on mobile: - Overtime (Push It) button - Close the Deal popup - Management Focus (tap dept names) - Feature toggles / Game Options - Prestige/Restructure - R&D Breakthroughs - Splash screen (skipped on mobile) - Weighted events, frequency slider - DB outage visual effects - Tabbed help modal Mobile layout: - Card-based department cards with all buttons - Bottom nav: Ops | P&L | Board | More - Sticky green cash header - Mobile-optimized toasts and modals - Mobile-aware button labels (shorter) - Golden cell applies to whole card on mobile - Deal popup fixed above bottom nav - Touch-optimized (44px targets, no 300ms delay) - Safe area insets for notched phones Fixed bugs: - _mob variable scoping (was const in else block, used outside) - Toast/deal positioning reset for mobile - Toast drag disabled on mobile - Hidden non-unlockable locked rows on mobile - All onclick handlers exposed on window
Kpa-clawbot
temporarily deployed
to
github-pages
GitHub Actions
Inactive
…on, transitions - P&L tab shows red alert badge when tax debts exist (with pop animation) - Nav badge auto-adds/removes based on tax debt state - Collect buttons highlight green when pending revenue available - Automate button double-tap prevention (400ms debounce) - Automated department card border transition animation - Refined collect highlight detection for sh.00 case - Cache bust v88
Kpa-clawbot
temporarily deployed
to
github-pages
GitHub Actions
Inactive
…ayout - Fix mobile flex ordering: status bar (order:90) and nav (order:100) always at bottom, cash header (order:-2) always at top on non-ops tabs - Active effects display in Settings tab (power outage, rev penalty/bonus, db outage, hire freeze, IRS garnishment with timers) - Arc selection: wrap icon+text in flex container for proper side-by-side layout - Restructure button gets full width when department is automated+public - Restructure button gradient background - Cache bust v89
Kpa-clawbot
temporarily deployed
to
github-pages
GitHub Actions
Inactive
…eanup - Consolidated toast button mobile styles (removed duplicate block) - Toast actions flex-direction column for vertical stacking - Full-width toast buttons for easier tapping on guidance selection - Help tab buttons: larger touch targets (min-height 36px, border-radius 6px) - Cache bust v90
Kpa-clawbot
temporarily deployed
to
github-pages
GitHub Actions
Inactive
- Mobile P&L change detection hash now includes tax debt current amounts and stages (not just count) — fixes view not updating when debt accrues interest or changes stage - Also includes cash in hash so settle buttons update enabled/disabled state in real-time as cash changes - Cache bust v91
Kpa-clawbot
temporarily deployed
to
github-pages
GitHub Actions
Inactive
Kpa-clawbot
temporarily deployed
to
github-pages
GitHub Actions
Inactive
- Mark Phase 1 as complete in MOBILE.md with summary - Create MOBILE-PHASE2.md with baseline rules, known issues, roadmap - Fix white flash on tap: global -webkit-tap-highlight-color: transparent - Add Total Rev/yr to ops cash header (was hidden, now visible) - Add stock price, rev/yr to non-ops mini cash header - Restructure non-ops header with stacked right-side info - Bump cache busters to v=92
Kpa-clawbot
temporarily deployed
to
github-pages
GitHub Actions
Inactive
…alation, touch feedback, valuation display Bug 1 (CRITICAL): Board Room Growth Initiative now uses getUpgradeCost() instead of static upgrade.cost for both canAfford check and cost display. Also added dynamic description and cost label with owned count. Bug 2 (MAJOR): Board Room upgrades now grouped by category with headers (Finance, Revenue, Tax, Investor Relations, Protection), matching desktop. Upgrades sorted by effective cost within each category. Bug 3 (MAJOR): Tax debt cards now show 'Next Escalation' countdown row (e.g., '2nd Notice in 27d', 'Garnish in 60d', 'Seizure in 90d'). Bug 4 (MAJOR): Added :active touch feedback for .source-name.focusable with background flash + subtle scale. Added tappable indicator emoji. Bug 5 (MAJOR): Added Valuation display to mobile Settings stats when company is public (shows formatCompact valuation).
Kpa-clawbot
temporarily deployed
to
github-pages
GitHub Actions
Inactive
…e cell-h in cash row, clean up separators
Kpa-clawbot
temporarily deployed
to
github-pages
GitHub Actions
Inactive
…improve skip button visibility, full-width upgrade for automated depts
Kpa-clawbot
temporarily deployed
to
github-pages
GitHub Actions
Inactive
… (cards were blank)
Kpa-clawbot
temporarily deployed
to
github-pages
GitHub Actions
Inactive
… larger auto indicator
Kpa-clawbot
temporarily deployed
to
github-pages
GitHub Actions
Inactive
Kpa-clawbot
temporarily deployed
to
github-pages
GitHub Actions
Inactive
…indicators, fix colors on dark background
Kpa-clawbot
temporarily deployed
to
github-pages
GitHub Actions
Inactive
…e button disabled state
Kpa-clawbot
temporarily deployed
to
github-pages
GitHub Actions
Inactive
Kpa-clawbot
temporarily deployed
to
github-pages
GitHub Actions
Inactive
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Mobile Responsiveness Fixes
Fixes #34 — Grid columns E-H off-screen on mobile
Fixes #35 — Touch targets too small for mobile
Changes
All changes are behind
@media (max-width: 600px)— desktop layout is completely unchanged.Issue #34: Grid columns off-screen
overflow-x: auto) as safety fallbackIssue #35: Touch targets too small
All interactive elements now meet the 44px minimum touch target guideline:
Testing