Fix tooltip positioning for leftmost table cells to prevent sidebar overflow

- Add horizontal position detection in GridView tooltips
- Check if cell is in first 2 columns (colIdx <= 1) to determine alignment
- Switch from right-aligned (right: '0') to left-aligned (left: '0') positioning for leftmost cells
- Prevents tooltips from sliding under the left sidebar when hovering over leftmost table cells
- Matches the existing bottom positioning fix pattern (isNearBottom) with new isNearLeft check

This completes the tooltip viewport overflow fixes - tooltips now properly handle:
- Bottom edge: shows above cell when near bottom (previously fixed)
- Right edge: right-aligned by default (previously fixed)
- Left edge: left-aligned for leftmost columns (this fix)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <[email protected]>

Author: maxko87

src/components/calculator/common/HowToUseModal.tsx

@@ -33,32 +33,43 @@ function HowToUseModal({ isOpen, onClose }: HowToUseModalProps) {
         <div className="modal-body">
           <section className="modal-section">
             <p>
-              If you're a general partner (or planning to become a GP) in venture or private equity, this calculator lets you fully model your carry compensation. Configure fund parameters, add multiple funds at once, model return scenarios, and see your comp projections over 20 years.
+              If you're a general partner (or planning to become a GP) in venture or private equity, this calculator lets you fully model your carry compensation.
+            </p>
+            <p>
+              Configure fund parameters, model multiple funds at once, and deep dive into the math behind your carry returns.
             </p>
           </section>
 
           <section className="modal-section">
             <h3>Getting Started</h3>
             <ul className="simple-list">
-              <li>Set up your base fund (size, carry %, per-GP allocation)</li>
-              <li>Add 2-3 return scenarios (base/up/down case)</li>
-              <li>Click any cell in the results table for calculation breakdown</li>
-              <li>Share URL to save your configuration</li>
+              <li>Set up your fund(s) on the left sidebar. The returns table will automatically update to show how much carry a GP would earn under your assumptions.</li>
+              <li>Each row in the returns table represents how many years you worked at the fund. Each column shows how far into the future you want to model carry. This lets you model scenarios like working at a fund for 5 years and earning carry for another 5 years into the future (as is typical).</li>
+              <li>Create multiple return scenarios in each fund, and select which one you're modeling using the dropdowns above the returns table.</li>
+              <li>Click each cell in the table to explore the math in "Simple" or "Advanced" mode.</li>
             </ul>
           </section>
 
           <section className="modal-section">
-            <h3>Multiple Funds</h3>
-            <p>
-              Two ways to model multiple funds: check "Raise continuously" and set your cycle time (e.g., every 2 years), or manually add funds with "+ Add Fund" for custom timing.
-            </p>
+            <h3>Tips</h3>
+            <ul className="simple-list">
+              <li>There are two ways to model multiple funds:
+                <ul>
+                  <li>For recurring funds of similar size, select "Raise continuously" and set the fund cycle time to the number of years between raises.</li>
+                  <li>If funds aren't raised regularly, or you want to model two different funds at once, use "+ Add Fund" for each one.</li>
+                </ul>
+              </li>
+              <li>To see the total carry for the fund instead of a single GP, you can set "Per GP Carry" to 100%.</li>
+              <li>Use "+ Preset" to add funds modeled off a typical seed/growth/late-stage fund.</li>
+            </ul>
           </section>
 
           <section className="modal-section">
-            <h3>Historic Fund Presets</h3>
-            <p>
-              Select from real historic funds in the preset dropdown (Apollo IX, KKR XIII, etc). Fund sizes estimated from public pension commitments: CalPERS (~$500B AUM) typically commits 6-20% of fund size depending on scale, OPERS (~$100B AUM) commits 3-18%. These are approximations for modeling purposes.
-            </p>
+            <h3>Historic Funds</h3>
+            <ul className="simple-list">
+              <li>We've added return profiles for 561 historic funds, including Apollo Fund X, Blackstone Capital Partners VII, and Carlyle Partners VII. You can explore these by clicking "+ Historic".</li>
+              <li>Note: Fund sizes are estimated from public pension commitments (e.g. CalPERS has ~$500B AUM and typically commits 6-20% of fund size depending on scale, OPERS has ~$100B AUM and commits 3-18%).</li>
+            </ul>
           </section>
 
         </div>

src/components/calculator/results/GridView.tsx

@@ -87,6 +87,7 @@ function GridView({
                   const isClicked = clickedCell?.row === rowIdx && clickedCell?.col === colIdx;
                   const isActive = isHovered || isClicked;
                   const isNearBottom = rowIdx >= calculations.slice(0, maxYears).length - 3;
+                  const isNearLeft = colIdx <= 1; // First 2 columns
 
                   return (
                     <td
@@ -113,7 +114,11 @@ function GridView({
                               top: '100%',
                               marginTop: '8px'
                             }),
-                            right: '0',
+                            ...(isNearLeft ? {
+                              left: '0'
+                            } : {
+                              right: '0'
+                            }),
                             background: 'var(--bg-primary)',
                             border: '1px solid var(--border-color)',
                             borderRadius: 'var(--radius-lg)',
@@ -159,6 +164,7 @@ function GridView({
               const isClicked = clickedCell?.row === rowIdx && clickedCell?.col === colIdx;
               const isActive = isHovered || isClicked;
               const isNearBottom = rowIdx >= calculations.slice(0, maxYears).length - 3;
+              const isNearLeft = colIdx <= 1; // First 2 columns
 
               return (
                 <td
@@ -185,7 +191,11 @@ function GridView({
                           top: '100%',
                           marginTop: '8px'
                         }),
-                        right: '0',
+                        ...(isNearLeft ? {
+                          left: '0'
+                        } : {
+                          right: '0'
+                        }),
                         background: 'var(--bg-primary)',
                         border: '1px solid var(--border-color)',
                         borderRadius: 'var(--radius-lg)',

src/index.css

@@ -812,7 +812,7 @@ body {
     background: var(--bg-primary);
     border-radius: var(--radius-xl);
     box-shadow: var(--shadow-xl);
-    max-width: 700px;
+    max-width: 900px;
     width: 100%;
     max-height: 90vh;
     display: flex;
@@ -931,6 +931,16 @@ body {
     font-weight: 600;
 }
 
+.simple-list ul {
+    margin-top: var(--spacing-xs);
+    padding-left: var(--spacing-xl);
+    list-style: circle;
+}
+
+.simple-list ul li {
+    margin-bottom: var(--spacing-sm);
+}
+
 .modal-footer-section {
     text-align: center;
     padding-top: var(--spacing-xl);