fix(redesign): sort the injected report link behind RoyalRoad's own buttons - #142
Merged
Merged
Conversation
…uttons
RoyalRoad's chapter action column is a two-up grid on mobile and a flex
column from md. It orders its children with order-* utilities: Fiction
Page has none (order 0), Report Chapter is order-1, and the Donate
button — recently added, and absent from the fiction this was originally
built against — is order-2 col-span-2.
The injected report link carried no order, so it sorted at 0 alongside
Fiction Page, and its grid-column: 1 / -1 forced a full-row break
between Fiction Page and Report Chapter. That split the row those two
are meant to share and left two empty cells:
[ Fiction ] [ empty ]
[ Report Recap ]
[ Report ] [ empty ]
[ Donate ]
Sort it behind every host button instead. RoyalRoad's own buttons then
pack exactly as they intend and the full-width link lands underneath,
which holds whatever they add to that column next.
Verified live on a chapter with a Donate button, real extension loaded:
at 413px Fiction Page and Report Chapter share the top row (y=317,
x=12/x=203) with Donate and Report Recap full-width below; at 1400px all
four stay 161px, so the shrink-to-fit column does not grow.
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
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.
Summary
On RoyalRoad's redesign (beta), the injected "Report Recap" / "Report Blurb" link
broke the chapter action column's mobile layout, splitting RoyalRoad's own buttons
across separate rows and leaving two empty grid cells.
RoyalRoad orders that column with Tailwind
order-*utilities (Donate isorder-2 col-span-2, Report Chapterorder-1). Our link had noorder, so ittook the default
order: 0and sorted ahead of both — and because it alsocarries
grid-column: 1 / -1, it forced a full-row break right in the middle ofthe Fiction Page / Report Chapter pair.
The fix is
order: 99on the injected link, so it always sorts behind every hostbutton regardless of what RoyalRoad adds to that column later.
Changes
redesign-adapter.ts: addorder: 99toREDESIGN_CHROME.reportLink.styleTesting
Verified live on the beta layout (
beta-ui-v2cookie) with the built extensionloaded in Chromium, on a fiction that has a Donate button:
https://www.royalroad.com/fiction/179470/bloodstone-immortal-a-righteous-xianxia/chapter/3749121/26-second-layer-of-qi-condensation
Before, at 413px — note the two empty cells and the split pair:
After, at 413px — host buttons pack as intended, injected link goes underneath:
At 1400px the column is
md:flex-col, whereorderstill applies andgrid-columnis ignored: Fiction Page, Donate, Report Chapter, Report Recap allat x=1129 w=161 — the column did not grow.
with no browser-specific behaviour
pnpm check: 989 files, 0 errors, 0 warnings.Screenshots
Measurements above were taken from the live DOM rather than eyeballed, so they
capture the regression more precisely than a screenshot would.