Skip to content

fix(ui): suppress button hover transform inside VList rows to prevent smearing#614

Merged
7w1 merged 2 commits intoSableClient:devfrom
Just-Insane:fix/vlist-hover-transform
Apr 14, 2026
Merged

fix(ui): suppress button hover transform inside VList rows to prevent smearing#614
7w1 merged 2 commits intoSableClient:devfrom
Just-Insane:fix/vlist-hover-transform

Conversation

@Just-Insane
Copy link
Copy Markdown
Contributor

Related to closed PR #598 (fix/perf-rerender-reduction), which was split into smaller focused PRs.

Description

Buttons inside VList rows were applying a CSS transform on :hover. Because VList row elements use position: relative with will-change: transform for virtualisation, the button transform was composited against the row's own transform layer, producing a visual smear — the button appeared to shift or blur while the row stayed in place.

Fix: add a scoped CSS override in General.css.ts that resets transform: none on :hover for buttons inside VList row containers.

Fixes #

Type of change

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • This change requires a documentation update

Checklist:

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • My changes generate no new warnings

AI disclosure:

  • Partially AI assisted (clarify which code was AI assisted and briefly explain what it does).
  • Fully AI generated (explain what all the generated code does in moderate detail).

The CSS override was partially AI assisted. I identified the smearing symptom and verified that the transform interaction between VList row layers and button hover state was the cause before applying the fix.

@Just-Insane Just-Insane requested review from 7w1 and hazre as code owners March 31, 2026 18:43
@Just-Insane Just-Insane marked this pull request as draft March 31, 2026 20:13
@Just-Insane Just-Insane force-pushed the fix/vlist-hover-transform branch from 7958366 to a650985 Compare April 6, 2026 16:58
@Just-Insane Just-Insane marked this pull request as ready for review April 8, 2026 21:54
@Just-Insane Just-Insane deleted the fix/vlist-hover-transform branch April 12, 2026 19:33
@Just-Insane Just-Insane restored the fix/vlist-hover-transform branch April 12, 2026 19:41
@Just-Insane Just-Insane reopened this Apr 12, 2026
Copilot AI review requested due to automatic review settings April 14, 2026 02:52
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR addresses a UI rendering artifact (“smearing”) caused by hover transform styles on interactive elements inside virtualized list rows, by overriding the hover transform within [data-index] row containers.

Changes:

  • Update the global CSS override to disable transform on button:hover and [role="button"]:hover within [data-index] (virtual list row) containers.
  • Add a changeset documenting the user-facing fix.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File Description
src/app/styles/overrides/General.css.ts Scopes a transform: none !important override to hovered buttons inside virtualized rows to prevent compositing smears.
.changeset/vlist-hover-transform.md Documents the patch-level user-facing fix for the release tooling.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

The catch-all [data-index] button:hover and [data-index] [role="button"]:hover
selectors already cover every button variant inside VList items, making the
intermediate class-specific selectors redundant. Remove them.
@Just-Insane Just-Insane force-pushed the fix/vlist-hover-transform branch from a0f8d9c to 2db7b60 Compare April 14, 2026 03:58
@7w1 7w1 added this pull request to the merge queue Apr 14, 2026
Merged via the queue into SableClient:dev with commit 7783707 Apr 14, 2026
12 checks passed
@Just-Insane Just-Insane deleted the fix/vlist-hover-transform branch April 15, 2026 13:52
ProfessorVarox pushed a commit to ProfessorVarox/sable that referenced this pull request May 5, 2026
> [!IMPORTANT]
> Merging this PR will create a new release.

## Features

* Add background styling to user profile cards
([SableClient#712](SableClient#712) by @nushea)
* Add preventing url preview cards by surrounding a link in
anglebrackets like <https://app.sable.moe>
([SableClient#717](SableClient#717) by @nushea)
* Reorganize Embed settings and reintroduce multiple embeds
([SableClient#667](SableClient#667) by @nushea)
* Change Misc. data styling in users profile pages
([SableClient#663](SableClient#663) by @nushea)
* add initial support for sending discoverable emojis and sticker
([SableClient#730](SableClient#730) by @dozro)

### Themes and tweaks from the catalog
([SableClient#633](SableClient#633) by @7w1)

Themes are pulled from [a repo](https://github.com/SableClient/themes)
now, so you get the full power of CSS instead of a palette. Tweaks are
new: CSS overlays that sit on top of whatever theme you are using.

You'll be prompted to migrate to the new system whenever you update, if
you choose not to, you'll be limited to the basic dark/light themes. A
few additional themes have been added (Rose Pine variantes, Catpuccin)
along with some basic tweaks (circular avatars, monochrome avatars, and
square stuff).

You can share themes and tweaks. For themes uploaded online, simply hit
the copy button in settings and paste the link in chat. If the setting
is enabled, a preview will be generated. Third party themes (as defined
by the config.json) have prominent warning banners and fetching is
disabled by default.

You can also export and share theme files directly, although no previews
are generated for these.

If you're intrested in getting a theme or tweak added to the official
catalog, contribute to the themes repo linked above! We're eager to add
more!

### Markdown parser and render updates
([SableClient#727](SableClient#727) by @7w1)

Migrated markdown parsing and rendering to use marked, which should fix
most (all?) markdown issues involving lists/nested structures,
inconsistent/inaccurate code blocks, escape sequences, and all the other
bugs with literally everything.

Added math rendering support via marked and KaTeX, uses standard `$$`
and `$` delimiters. Only renders a subset of latex tags that will likely
need to be expanded so feel free to make issues if needed.

Also adds support for sending markdown tables (although they're rendered
rather plainly at the moment), sending valid html directly (such as for
colored text), and properly escaping anything with backslashes.

Fixes link previews appearing in code blocks, fixes pmp new line
behavior, fixes links not opening in new tabs, and fixes editing
arbitrary html messages, probably.

Finally, the old WYSIWYG editor has been completely removed.

## Fixes

* Fix spam-clicking abbreviations crashing sable
([SableClient#665](SableClient#665) by @nushea)
* Add cache-control headers in Caddyfile for assets, service worker, and
index.html ([SableClient#609](SableClient#609) by
@Just-Insane)
* Fix the first pin event in a room looking empty
([SableClient#685](SableClient#685) by @nushea)
* Fix read receipt scrolling not working
([SableClient#631](SableClient#631) by @Septicity)
* Fix status sometimes sticking in member tile
([SableClient#664](SableClient#664) by @nushea)
* Fix apng files not animating.
([SableClient#737](SableClient#737) by @7w1)
* Some fixes to sync requests being spammed on loading screen and for
multi-account background syncing, it should also load faster now!
([SableClient#736](SableClient#736) by @7w1)
* Fix other dmed party not being added as a founder by default when
creating a dm. ([SableClient#737](SableClient#737) by
@7w1)
* Update verbiage in the credits
([SableClient#728](SableClient#728) by @nushea)
* spoilered text now gets replaced with `[Spoiler]` in the plain text
fallback, as per MSC4454
([SableClient#715](SableClient#715) by @dozro)
* Hide copied settings links on dynamic rows
([SableClient#695](SableClient#695) by @hazre)
* Fix button hover background smearing in virtual list rows by
suppressing transform on hover
([SableClient#614](SableClient#614) by @Just-Insane)
* Fix Workbox precaching by removing injectionPoint override that was
silently disabling all precache entries
([SableClient#611](SableClient#611) by @Just-Insane)

### Change how settings links are shared
([SableClient#695](SableClient#695) by @hazre)

Settings links copied from Sable now stay on the current client URL and
include a small Sable marker in the link. That lets Sable recognize
settings links copied from other Sable instances without treating
unrelated third-party `/settings/...` links as Sable settings links.

When you send a bare settings link in the composer, Sable now rewrites
it into a labeled link so it looks better on non-Sable clients too. For
example: `[Settings > Account > Display
Name](https://client.example/settings/account?focus=display-name&moe.sable.client.action=settings)`.

Invalid or malformed settings-looking links now stay normal links
instead of being shown as settings chips.

If you previously set `settingsLinkBaseUrl` in `config.json`, remove it.
Sable now derives settings links from the runtime app URL, and the old
config key is no longer used.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants