feat(tiptap): float css tweaks - allow floating on mobile#568
feat(tiptap): float css tweaks - allow floating on mobile#568
Conversation
The additional_html action was missing from Folio::File::CANCAN_MAPPINGS[:read], causing CanCan::AccessDenied (401) for non-superadmin roles (editors, redactors) when accessing the file detail API endpoint in console.
…le is added (#525) * When file is updated it should be reflected on articles where this file is added
…ent (#549) * fix(audited-dropdown): flex-wrap and full-width label/small in component Made-with: Cursor * chore(changelog): log audited dropdown fix --------- Co-authored-by: Jiri Prusek <george@Jiri--Mac-mini.home> Co-authored-by: Petr Marek <contact@petrmarek.eu>
…link popover input
# Conflicts: # CHANGELOG.md # Gemfile.lock # app/jobs/folio/files/after_save_job.rb # lib/folio/version.rb
There was a problem hiding this comment.
Pull request overview
This PR updates the Folio TipTap float layout styles to enable floated “aside” content behavior on mobile (not just at container-query breakpoints), and records the change in the changelog.
Changes:
- Adjusts default float CSS custom properties (notably setting mobile aside width and introducing a
--f-tiptap-float__aside-sidevariable). - Moves float-aside layout properties (margins/width/float) into the base
.f-tiptap-float__asiderule so they apply on mobile too. - Adds/relocates selectors for right-side floats and size variants, and updates
CHANGELOG.md.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| app/assets/stylesheets/folio/tiptap/_styles.scss | Refactors float aside styling to use variables and apply floating behavior on mobile. |
| CHANGELOG.md | Notes the TipTap float CSS change under Unreleased. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
|
||
| .f-tiptap-float[data-f-tiptap-float-side="right"] .f-tiptap-float__aside { | ||
| margin-right: var(--f-tiptap-float__aside-offset); | ||
| margin-left: var(--f-tiptap-float__aside-margin-x); |
There was a problem hiding this comment.
On narrow screens, the data-f-tiptap-float-side="right" variant never sets --f-tiptap-float__aside-side: right, so float: var(--f-tiptap-float__aside-side) still resolves to left. If the intent is to support right-floating on mobile, set the variable (or set float: right) for the right-side variant at this breakpoint as well.
| margin-left: var(--f-tiptap-float__aside-margin-x); | |
| margin-left: var(--f-tiptap-float__aside-margin-x); | |
| --f-tiptap-float__aside-side: right; |
| .f-tiptap-float[data-f-tiptap-float-side="right"] { | ||
| --f-tiptap-float__aside-side: right; | ||
| } | ||
|
|
||
| .f-tiptap-float__aside { | ||
| float: left; | ||
| margin-right: var(--f-tiptap-float__aside-margin-x); | ||
| margin-bottom: var(--f-tiptap__spacer); | ||
| margin-left: var(--f-tiptap-float__aside-offset); | ||
| width: var(--f-tiptap-float__aside-width); | ||
| position: relative; | ||
| container-type: inline-size; | ||
| box-sizing: border-box; | ||
| min-height: 2rem; |
There was a problem hiding this comment.
Inside the tablet @container block, .f-tiptap-float__aside { float: left; } overrides the earlier float: var(--f-tiptap-float__aside-side), which makes the --f-tiptap-float__aside-side: right override (set on .f-tiptap-float[data-f-tiptap-float-side="right"]) ineffective at tablet+ sizes. Consider removing this hard-coded float: left here or switching it to float: var(--f-tiptap-float__aside-side) so right-side floats work consistently.
| .f-tiptap-float[data-f-tiptap-float-size="small"] .f-tiptap-float__aside { | ||
| width: var(--f-tiptap-float__aside-width); | ||
| } | ||
|
|
||
| .f-tiptap-float[data-f-tiptap-float-size="large"] .f-tiptap-float__aside { | ||
| width: var(--f-tiptap-float__aside-width); | ||
| } | ||
|
|
There was a problem hiding this comment.
The data-f-tiptap-float-size="small"|"large" rules just re-apply width: var(--f-tiptap-float__aside-width), which is already set on .f-tiptap-float__aside. These selectors appear redundant now and could be removed to reduce CSS noise (or change them to actually override the variable if that was the intent for mobile sizing).
| .f-tiptap-float[data-f-tiptap-float-size="small"] .f-tiptap-float__aside { | |
| width: var(--f-tiptap-float__aside-width); | |
| } | |
| .f-tiptap-float[data-f-tiptap-float-size="large"] .f-tiptap-float__aside { | |
| width: var(--f-tiptap-float__aside-width); | |
| } |
| .f-tiptap-float[data-f-tiptap-float-side="right"] .f-tiptap-float__aside { | ||
| margin-right: var(--f-tiptap-float__aside-offset); | ||
| margin-left: var(--f-tiptap-float__aside-margin-x); | ||
| } | ||
|
|
||
| .f-tiptap-float[data-f-tiptap-float-size="small"] .f-tiptap-float__aside { | ||
| width: var(--f-tiptap-float__aside-width); | ||
| } | ||
|
|
||
| .f-tiptap-float[data-f-tiptap-float-size="large"] .f-tiptap-float__aside { | ||
| width: var(--f-tiptap-float__aside-width); | ||
| } | ||
|
|
||
| .f-tiptap-float[data-f-tiptap-float-side="right"] .f-tiptap-float__aside { | ||
| float: var(--f-tiptap-float__aside-side); | ||
| } |
There was a problem hiding this comment.
There are two separate .f-tiptap-float[data-f-tiptap-float-side="right"] .f-tiptap-float__aside blocks back-to-back (one for margins, one for float). Consider combining them into a single rule to avoid duplicated selectors and reduce the chance of the two blocks drifting out of sync over time.
No description provided.