Display mode: crop to fill, crop to faces, stretch to fill, shrink to fit

Replaces the smart_crop_faces boolean with a 4-way display_mode select
on each frame's Configuration tab (image_pipeline.DISPLAY_MODES):

- Crop to fill / Crop to faces: the previous False/True behavior,
  unchanged (center-crop trimming excess, optionally shifted to keep
  faces on screen).
- Stretch to fill (new): fills the panel exactly, aspect ratio not
  preserved -- a plain resize, no crop.
- Shrink to fit (new): the whole photo visible, letterboxed with white
  where it doesn't fill the panel.

Named-face overlay label positioning (face_labels.py, the manage menu's
"who's in this photo") now goes through a shared _placement_transform()
in image_pipeline.py instead of duplicating crop-box math, so label
placement stays correct (and in-bounds) under all four modes, not just
the two crop ones -- letterbox/stretch never crop a face out, so labels
just use straight scale+offset math there.

Schema migration v5 adds display_mode, backfills it from the old
boolean (True/False -> crop_faces/crop_fill), and drops the boolean.

Verified against the live-shaped test database: the migration
(existing frames correctly preserved as crop_faces), the config page's
new 4-option select, actual renders under letterbox (confirmed real
white letterbox padding in the packed panel-code bytes) and
stretch_fill, invalid-input fallback, and the standing legacy-device
curl suite.

server/app/templates/frame_config.html

@@ -37,10 +37,21 @@
             <input type="number" id="refresh_interval_minutes" min="1" max="1440"
                    value="{{ (frame.refresh_interval_s // 60) or 60 }}" required>
           </label>
-          <div class="checkbox-row">
-            <input type="checkbox" id="smart_crop_faces" {% if frame.smart_crop_faces %}checked{% endif %}>
-            <label for="smart_crop_faces">Center faces in crop</label>
-          </div>
+          <label>Display mode
+            <select id="display_mode">
+              {% for mode, label in display_mode_labels.items() %}
+                <option value="{{ mode }}" {% if frame.display_mode == mode %}selected{% endif %}>{{ label }}</option>
+              {% endfor %}
+            </select>
+          </label>
+          <p class="sub" style="margin-top: 8px;">How a photo's aspect ratio
+            is reconciled with the panel's: <strong>Crop to fill</strong>
+            trims the excess; <strong>Crop to faces</strong> does the same
+            but shifts the crop to keep people on screen; <strong>Stretch to
+            fill</strong> fills the panel exactly without cropping (photos
+            not matching the panel's aspect ratio look stretched);
+            <strong>Shrink to fit</strong> shows the whole photo, letterboxed
+            if needed.</p>
           <div class="checkbox-row">
             <input type="checkbox" id="quiet_hours_enabled" {% if frame.quiet_hours_enabled %}checked{% endif %}>
             <label for="quiet_hours_enabled">Quiet hours (don't wake overnight)</label>