## Description @PlasticDigits On mobile and tablet viewports, some TimeCurve/WarBow sections do not fit cleanly within the available screen area. On iPhone 14 Pro Max viewport, the buy panel content is very tight and parts of the layout appear clipped near the right edge. On iPad Air/iPad Mini viewport, the **Counterpunch Revenge** card heading/content overflows outside the parent container border. This affects both safe-area usability and tablet reflow behavior. ## Related Checklist Items **2.2 — Main content stays within safe areas**\ **Status:** Fail\ **Reason:** Some content appears too close to the viewport edge and may be clipped or hard to use on mobile-sized screens. **2.4 — Tablet layout uses width sensibly**\ **Status:** Fail\ **Reason:** The split-column layout does not reflow properly on tablet viewport. The **Counterpunch Revenge** heading/card overflows outside the container. ## Steps to Reproduce 1. Open the app in Chrome. 2. Open DevTools. 3. Enable mobile/tablet viewport using `Ctrl + Shift + M`. 4. Select **iPhone 14 Pro Max** viewport. 5. Go to the TimeCurve/WarBow buy panel. 6. Observe the right-side clipping/tight layout around the buy panel. 7. Change viewport to **iPad Air** or **iPad Mini**. 8. Go to the WarBow/Defense section with **Guard** and **Counterpunch Revenge** cards. 9. Observe the Counterpunch Revenge card overflow. ## Expected Result Mobile and tablet layouts should stay within safe screen areas. Cards, headings, and CTAs should fit inside their containers without clipping, overflow, or stranded headings. ## Actual Result On mobile viewport, the buy panel content appears cramped and partially clipped near the right side. On tablet viewport, the **Counterpunch Revenge** card/heading overflows outside the container border instead of reflowing cleanly. ## Severity **Medium** ## Priority **Medium** ## Labels `bug`, `ux`, `frontend`, `responsive`, `layout`, `mobile`, `tablet` ## Evidence {width="610" height="544"} {width="604" height="600"}