# Page Scaling Solutions for Chromium Fullscreen

## Problem
When Chromium loads in fullscreen, the page content requires scrolling (scrollbar appears) instead of fitting the viewport.

## Solutions

### Solution 1: Automatic Zoom via Script (Current Implementation) ⭐

The startup script now automatically zooms out the page after it loads using `xdotool`.

**How it works:**
- Waits for Chromium to load
- Sends keyboard commands to zoom out (Ctrl+-)
- Adjusts zoom level to fit content

**Configuration:**
Edit `~/start-chromium.sh` and adjust the zoom-out loop:
```bash
# Change the number of zoom-out commands (currently 3)
for i in {1..3}; do  # Increase number for larger pages
    xdotool key --window $WINDOW_ID ctrl+minus
    sleep 0.5
done
```

**Pros:**
- Works with any page
- No page modification needed
- Easy to adjust

**Cons:**
- Requires xdotool
- May need fine-tuning for different page sizes

---

### Solution 2: Edit the Page Itself (Best Long-term Solution)

If you control the web page at `http://127.0.0.1:8080`, add responsive CSS:

**Add to your HTML `<head>`:**
```html
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
```

**Add responsive CSS:**
```css
/* Make page fit viewport */
html, body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

/* Scale content to fit */
.container {
    width: 100%;
    height: 100%;
    transform-origin: top left;
}

/* Use CSS media queries for different screen sizes */
@media (max-width: 1280px) {
    .container {
        transform: scale(calc(100vw / 1280));
    }
}
```

**Pros:**
- Most reliable solution
- Works without external tools
- Better user experience

**Cons:**
- Requires access to edit the page
- May need to redesign layout

---

### Solution 3: JavaScript Injection

Inject JavaScript to auto-scale the page.

**Create a user script:**
```javascript
// Auto-fit page to viewport
(function() {
    function autoFit() {
        const vw = window.innerWidth;
        const vh = window.innerHeight;
        const pw = document.body.scrollWidth;
        const ph = document.body.scrollHeight;
        
        const zoom = Math.min(vw/pw, vh/ph, 1.0);
        
        if (zoom < 1.0) {
            document.body.style.transform = 'scale(' + zoom + ')';
            document.body.style.transformOrigin = 'top left';
            document.body.style.width = (100/zoom) + '%';
            document.body.style.height = (100/zoom) + '%';
            document.body.style.overflow = 'hidden';
        }
    }
    
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', autoFit);
    } else {
        autoFit();
    }
    window.addEventListener('resize', autoFit);
    setTimeout(autoFit, 2000);
})();
```

**To use:**
1. Install a userscript extension (like Tampermonkey)
2. Create a script that runs on `http://127.0.0.1:8080`
3. Paste the JavaScript above

**Pros:**
- Works automatically
- No page modification needed
- Can be fine-tuned

**Cons:**
- Requires browser extension
- May conflict with page JavaScript

---

### Solution 4: Chromium User Stylesheet

Use a custom CSS file to override page styles.

**Location:** `~/.config/chromium/Default/User StyleSheets/Custom.css`

**Content:**
```css
/* Hide scrollbars and scale content */
html, body {
    overflow: hidden !important;
    width: 100vw !important;
    height: 100vh !important;
}

/* Scale body to fit */
body {
    transform: scale(0.8) !important; /* Adjust value as needed */
    transform-origin: top left !important;
    width: 125% !important; /* Inverse of scale */
}
```

**Pros:**
- Simple CSS solution
- No JavaScript needed

**Cons:**
- Fixed scale value (not dynamic)
- May break some layouts

---

### Solution 5: Chromium Zoom Flag

Use Chromium's force-device-scale-factor flag.

**Add to startup script:**
```bash
--force-device-scale-factor=0.8  # Adjust value (0.5-2.0)
```

**Pros:**
- Built-in Chromium feature
- Simple to use

**Cons:**
- Affects entire browser, not just page
- May make UI elements too small

---

## Recommended Approach

### For Immediate Fix (No Page Editing):
✅ **Use Solution 1** (already implemented in script)
- Automatic zoom via xdotool
- Works immediately
- Adjust zoom level in script if needed

### For Long-term Solution:
✅ **Use Solution 2** (Edit the page)
- Add responsive viewport meta tag
- Add responsive CSS
- Best user experience
- No external dependencies

---

## Testing and Adjustment

### Test Current Implementation:
1. Reboot or restart Chromium:
   ```bash
   ssh pi@10.130.60.253 "pkill chromium && sleep 2 && DISPLAY=:0 ~/start-chromium.sh"
   ```

2. Check if scrollbar is gone
3. Verify content fits viewport

### Adjust Zoom Level:

If content is too small or still scrolling:

**Edit the script:**
```bash
ssh pi@10.130.60.253 "nano ~/start-chromium.sh"
```

**Find this section and adjust:**
```bash
# Increase number for more zoom-out (smaller content)
for i in {1..5}; do  # Changed from 3 to 5
    xdotool key --window $WINDOW_ID ctrl+minus
    sleep 0.5
done
```

**Or decrease for less zoom-out:**
```bash
for i in {1..2}; do  # Less zoom-out
    xdotool key --window $WINDOW_ID ctrl+minus
    sleep 0.5
done
```

---

## Troubleshooting

### Scrollbar Still Appears:
1. Increase zoom-out commands in script
2. Check if page has fixed-width elements
3. Consider editing the page CSS

### Content Too Small:
1. Decrease zoom-out commands
2. Or use zoom-in: `xdotool key --window $WINDOW_ID ctrl+plus`

### Zoom Not Working:
1. Verify xdotool is installed: `which xdotool`
2. Check window ID is found: Add `echo $WINDOW_ID` to script
3. Try manual test: `xdotool key ctrl+minus`

---

## Current Script Location

- **Device**: `~/start-chromium.sh`
- **Local**: `chromium-setup/start-chromium.sh`

The script now includes automatic page scaling via xdotool zoom commands.
