Clean up the plugin page and make previews legible (#162) - #165
Merged
Conversation
The Uploaded Widgets list was a second view of the same uploadedWidgets array the Plugin Settings section below already renders — and that one carries the delete button, the description and the live preview, so nothing is lost by removing it, including for legacy widgets with no manifest. With it gone the repository spans the width it needs, and is renamed to GitHub Plugin Repository since everything in it is a plugin. Upload Custom Widget keeps its place in the flow, now directly above the settings it feeds. Browse thumbnails are 96x60 with objectFit: cover, so a plugin screenshot is cropped to an unreadable sliver — the previews were there but not much use. Clicking one now opens it at full size. The trigger is a button rather than a bare image so it is reachable from a keyboard, and Dialog gives Escape-to-close alongside the X. The image is capped at its natural width: these screenshots are around 620px, and stretching one to fill the dialog only makes it blurrier. Removing the list orphaned widgets.uploaded and widgets.fileName, so they are dropped from both locales — parity is enforced, so removing from one alone would fail check:i18n. Four new keys cover the enlarged view and the empty state, in English and Spanish. Added an empty state: Plugin Settings only renders when something is installed, so on a fresh install the page would otherwise stop at the upload button with nothing explaining the gap. Verified in a browser against a running instance: the old section is gone, the repository heading and full width are right, the thumbnail is a labelled button, the dialog shows the real screenshot at 624x460 rather than upscaled, and both the X and Escape close the preview while leaving the Admin Panel open. Client 176/176, translation parity passes, build clean. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The 400px cap was sized for the old half-width column: it cut off mid-row and showed under five of the 23 plugins, which felt tight once the list spanned the page. Relative to the viewport rather than a taller fixed value. A fixed 680px looked right on a large screen but on a 950px-high laptop it ran the list past the fold, leaving a scrolling list inside a scrolling dialog. 50vh gives 475px there and 700px on a tall wall display, and 360px on phones where the panel is full screen. Still capped rather than unbounded: the full list is 1994px, which would push the upload button and every plugin setting off the page. Verified at two viewport heights with all 23 plugins loaded: 950px -> 475px list, 1400px -> 700px, both scrolling internally with every row present. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Owner
Author
|
Raised the browse list cap ( The 400px was sized for the old half-width column — it cut off mid-row and showed under five of the 23 plugins. I first tried a taller fixed value (680px) and it was wrong: on a 950px-high laptop it ran the list past the fold, leaving a scrolling list inside a scrolling dialog. It's now relative to the viewport, so it adapts instead:
Still capped rather than unbounded — the full list is 1994px, which would push the upload button and every plugin setting off the page. Verified at both heights with all 23 plugins loaded: every row present, scrolling internally, nothing clipped. Client 176/176, translation parity passes, build clean. |
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Closes #162.
Removing the Uploaded Widgets list is safe
Verified rather than assumed: both sections map the same
uploadedWidgetsarray (:2314 and :2418). Plugin Settings already lists every uploaded widget — including legacy ones with no manifest — and already carries the delete button, plus the description and live preview the old list never had. Nothing is lost.With it gone the repository spans the width it needs, and is renamed GitHub Plugin Repository. Upload Custom Widget keeps its place in the flow, now directly above the settings it feeds.
The previews were there but not much use
Browse thumbnails are 96×60 with
objectFit: cover, so a plugin screenshot was cropped to an unreadable sliver. Clicking one now opens it at full size.Three decisions inside that:
<img>, so the enlarged view is reachable from a keyboard, with a:focus-visiblering and a labelled action.Dialoggives Escape-to-close alongside the X — and I checked Escape closes only the preview, leaving the Admin Panel (itself aDialog) open underneath.width: 100%displayed a 624px screenshot at 852px — upscaled and soft, the opposite of why an enlarged view exists. Now 1:1.Two things the issue didn't mention
widgets.uploadedandwidgets.fileName. They're dropped from both locales — parity is enforced, so removing from one alone failscheck:i18n. Four new keys cover the enlarged view and empty state, English and Spanish.Verification
Driven in a browser against a running instance, with the browse list fed real preview PNGs from the plugins repo:
Client 176/176, translation parity passes, production build clean.
One thing I left alone
The browse list keeps its
maxHeight: 400internal scroll. At full width with 23 plugins that cap is starting to feel tight, but raising it wasn't asked for — easy follow-up if you want it.🤖 Generated with Claude Code