Fix icon shrinking issue with long URLs #6
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add flex-shrink: 0 to icon containers in both AppCard and BookmarkCard components to prevent icons from shrinking when text/URLs are long. Also add /uploads proxy to vite.config.ts for development environment to properly load custom uploaded icons. Fixes icon display issue where longer bookmark/app names or URLs would cause the icon containers to shrink, making icons appear smaller.
Fixed issues preventing edit/delete actions from working: - Fixed nested <p> tags in Message components (invalid HTML that broke React rendering) - Moved drag-and-drop listeners from entire row to dedicated drag handle column - Added visual drag handle (⋮⋮) as first column in all tables This allows users to: - Click edit/delete/visibility buttons without triggering drag - Drag rows by grabbing the dedicated ⋮⋮ handle - Properly interact with table actions Affects: AppTable, CategoryTable, BookmarksTable 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Implemented automatic favicon fetching for apps and bookmarks without custom icons: Server-side proxy (/api/favicon): - Uses curl for better HTTP/2 support and networking - Tries common favicon locations (/favicon.ico, /apple-touch-icon.png) - Validates downloaded files are actual images (not HTML error pages) - Falls back to Google's favicon service for public domains - Caches favicons for 7 days to improve performance - Handles both local IPs and public domains Client-side changes: - Created getFaviconUrl utility that uses server proxy - Made icon field optional in AppForm and BookmarkForm - Apps/bookmarks without icons automatically display website favicon - Validates icon field is not empty/whitespace before using Benefits: - No CORS issues (everything goes through server) - Works with sites requiring authentication (tries public favicon paths) - Better reliability with HTTP/2 sites - Automatic fallback to Google's service - Proper error handling and validation 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Added per-app/bookmark setting to invert icon colors for better visibility: Database changes: - Migration 06_invert-icon.js adds invertIcon column to apps and bookmarks - Updated App and Bookmark models with invertIcon field (boolean, default false) UI changes: - Added checkbox in AppForm and BookmarksForm: "Invert icon colors (for dark icons on dark backgrounds)" - Applied CSS filter: invert(1) to icon containers when enabled - Checkbox uses direct state update with e.target.checked Use case: Solves visibility issues with dark icons (like Tailscale's black logo) that don't work well on dark backgrounds. Users can toggle inversion per-app/bookmark. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Extended icon upload support to include WebP format: Changes: - Added 'webp' to multer fileFilter supported types - Updated isImage validator regex to recognize .webp extension - Updated file input accept attributes to include .webp Users can now upload WebP images as custom icons alongside existing formats (jpg, jpeg, png, svg, ico). 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Automatically builds and pushes Docker image to GHCR - Triggers on push to master or manual workflow dispatch - Tags as both 'custom' and 'latest' - Uses GitHub's built-in authentication 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This PR fixes an issue where icons would shrink when bookmark/app names or URLs were long.
Problem
The flexbox layout in both
AppCardandBookmarkCardcomponents allowed icon containers to shrink when text content was long, resulting in smaller-than-intended icons.Solution
Added
flex-shrink: 0to:.BookmarkIconinBookmarkCard.module.css.AppCardIconinAppCard.module.cssThis ensures icons maintain their fixed size (20px × 20px for bookmarks, 35px × 35px for apps) regardless of text length.
Additional Changes
Added
/uploadsproxy tovite.config.tsfor development environment to properly load custom uploaded icons during local development.Testing
Tested locally with bookmarks and apps containing long URLs. Icons now maintain consistent size across all entries regardless of name/URL length.