The two cards on the playlist manage page overlapped: the Add Content card
was painted on top of the playlist content card.
Cause: the 9-column playlist table needs ~830px, but its grid column was
only ~683px, so the table overflowed its card by ~150px. The Add Content
card comes later in the DOM, so it painted over the overflowing table.
This was introduced by the minmax(0, ...) I added in the previous commit
to stop a long filename widening the track. That fixed a page-wide
horizontal scrollbar but capped the track, which is what made the table
spill. Reverting alone would not have been correct either — it swaps the
overlap for the scrollbar — so this fixes the underlying width problem:
- Widen the page container. The template already declared max-width:1400px,
but on its own wrapper — a child cannot widen its parent, so it did
nothing and the layout was stuck at base.html's 1200px.
- Use 3fr/1fr instead of 2fr/1fr. At 2fr/1fr the table column came out
~50px too narrow and sat in a permanent horizontal scrollbar.
- Stack the cards below 1440px, where side-by-side cannot give the table
the width it needs. Stacked, it fits outright.
- The stacked rule uses minmax(0, 1fr): a bare 1fr keeps the min-content
floor, which let the table widen the track and push the whole page into
horizontal overflow at <=900px.
- Trim cell padding 12px -> 8px to reclaim ~72px for the table.
- Keep .playlist-table-scroll (overflow-x:auto) as a last-resort clip for
genuinely narrow screens, so the table can never paint over its
neighbour again.
Verified by hit-testing the Add Content card at 500-1920px: zero elements
from the table are painted over it at any width. No page-wide horizontal
overflow at any width; the table fits without scrolling at >=1024px.
The "Add Content" card listed available media as an icon plus a filename,
so the only way to tell two media items apart was to read near-identical
filenames. Images now render an actual thumbnail.
Previews are shown for every image type, not just JPEG: the library is a
mix of JPEG and PNG (the PDF/PPTX converter emits PNG), so a JPEG-only
rule would have left most items without a preview. Non-images keep the
existing emoji icon. A missing or unreadable file falls back to the icon
via onerror, and images are `loading="lazy"` since the list is scrollable.
This surfaced two layout bugs in the same card, both now fixed:
- .content-grid used bare `2fr 1fr`. A grid track has an automatic
min-content floor, so the long unbreakable media filenames forced the
track wider than the viewport — the page had a horizontal scrollbar
(scrollWidth 1475 in a 1185px viewport). minmax(0, ...) fixes it.
- Long names were truncated with ellipsis, which hides the distinguishing
part: media filenames differ at the END (..._slide_003.png). Names now
wrap with overflow-wrap: anywhere instead.
The row is flex-wrap so that on a narrow card the Add button drops to its
own line rather than squeezing the name.
Verified: 5/5 items render an <img> whose URL returns HTTP 200 (including
a nested edited_media/ JPEG), no element overlaps at 1000-1500px, and dark
mode picks up the theme variables.
- Content model: add url column + is_weblink() for web page content items
- Player model: add deployment tracking fields (status, timestamps, message)
- Content blueprint: add add_weblink and add_weblink_to_playlist routes;
weblinks auto-deleted when removed from playlist
- Players blueprint: add SSH deploy mode in add_player; weblink-aware playlist
- API blueprint: weblink URL served directly in playlist response;
add /api/deploy/test-ssh and /api/deploy/player endpoints
- Admin blueprint: add build-player page (clone from Gitea, write base config);
replace nginx status card with Caddy status on HTTPS config page
- caddy_manager: rewritten to generate proper HTTPS/internal-CA Caddyfiles
and reload Caddy via admin API (/load) for live config updates
- ssh_deploy, background_tasks, player_build: new utils for SSH deployment
- background_tasks: push Flask app context into background thread so DB
updates after deployment complete correctly
- ssh_deploy: robust install script detection with passwordless sudo injection
(uses SSH credentials, cleaned up after install)
- Dockerfile: add git, sshpass, openssh-client, rsync
- docker-compose: switch nginx to Caddy on ports 80/443; add port 5000 for dev
- Templates: add_player deploy mode UI, weblink form in playlist/upload pages,
build_player admin page, Caddy status on HTTPS config page
- Migrations: add_url_to_content, add_deployment_fields_to_player
- app.py: call db.create_all() on startup for schema bootstrap
- config.py: add PLAYER_CODE_DIR and PLAYER_REPO_URL settings
- Implement Docker image-based deployment (Option 1)
* Code immutable in image, no volume override
* Eliminated init-data.sh manual step
* Simplified deployment process
- Unified persistence in data/ folder
* Moved nginx.conf and nginx-custom-domains.conf to data/
* All runtime configs and data in single location
* Clear separation: repo (source) vs data/ (runtime)
- Archive legacy features
* Groups blueprint and templates removed
* Legacy playlist routes redirected to content area
* Organized in old_code_documentation/
- Added network migration support
* New migrate_network.sh script for IP changes
* Regenerates SSL certs for new IP
* Updates database configuration
* Tested workflow: clone → deploy → migrate
- Enhanced deploy.sh
* Creates data directories
* Copies nginx configs from repo to data/
* Validates file existence before deployment
* Prevents incomplete deployments
- Updated documentation
* QUICK_DEPLOYMENT.md shows 4-step workflow
* Complete deployment workflow documented
* Migration procedures included
- Production ready deployment workflow:
1. Clone & setup (.env configuration)
2. Deploy (./deploy.sh)
3. Migrate network (./migrate_network.sh if needed)
4. Normal operations (docker compose restart)
- Changed ownership of all files to scheianu:scheianu
- Set directories to 755 permissions (rwxr-xr-x)
- Set files to 644 permissions (rw-r--r--)
- Made shell scripts executable (755)
- Allows development without requiring sudo for file modifications
- Improves development workflow and security
- Added edit_on_player_enabled column to playlist_content table
- Updated playlist model to track edit enablement per content item
- Added UI checkbox on upload media page to enable/disable editing
- Added toggle column on manage playlist page for existing content
- Updated API endpoint to return edit_on_player_enabled flag to players
- Fixed docker-entrypoint.sh to use production config
- Supports PDF, Images, and PPTX content types
- Created 10 SVG icon files in app/static/icons/ (Feather Icons style)
- Updated base.html with SVG icons in navigation and dark mode toggle
- Updated dashboard.html with icons in stats cards and quick actions
- Updated content_list_new.html (playlist management) with SVG icons
- Updated upload_media.html with upload-related icons
- Updated manage_player.html with player management icons
- Icons use currentColor for automatic theme adaptation
- Removed emoji dependency for better Raspberry Pi compatibility
- Added ICON_INTEGRATION.md documentation
ske087
Deployment System
Quality App Developer
DigiServer Developer
ske087