docs: fix withLiveEdits sticky section behaviour for actions
#2546
Conversation
|
Hey @malavshah9, I'm sorry if the issue wasn't clear enough, I meant it should always be visible and stick on the right bottom side. From the very beginning and even when scrolled (middle or bottom of scroll) |
|
@YossiSaadi Updated PR with sticky behavior. Thanks! |
malavshah9
changed the title
withLiveEdits sticky section behaviour for actions
talkor
changed the title
withLiveEdits sticky section behaviour for actionswithLiveEdits sticky section behaviour for actions
There was a problem hiding this comment.
Amazing @malavshah9, very elegant solution!
I had a few comments :)
- I think the
max-heighttrick forcm-editor, alongside theposition: relative, should get the job done, without renderingchildrenforLiveEditor - And maybe even the
position: relativecan also be removed!
mind making sure? :)
| @@ -18,7 +18,8 @@ | |||
| } | |||
|
|
|||
| & :global(.cm-editor) { | |||
| padding: var(--sb-spacing-medium); | |||
| padding: 0 0 0 var(--sb-spacing-medium); | |||
There was a problem hiding this comment.
can you please change that one to
| padding: 0 0 0 var(--sb-spacing-medium); | |
| padding: var(--sb-spacing-medium); | |
| padding-right: 0; |
we want the rest of the padding, only the right padding is now an issue (because of the scrollbar)
| @@ -18,7 +18,8 @@ | |||
| } | |||
|
|
|||
| & :global(.cm-editor) { | |||
| padding: var(--sb-spacing-medium); | |||
| padding: 0 0 0 var(--sb-spacing-medium); | |||
| max-height: 500px; | |||
There was a problem hiding this comment.
I think we can give up on those changes
The actions can be rendered as a sibling and it should still work I believe
| @@ -6,4 +6,5 @@ | |||
| right: 0; | |||
| border-top-left-radius: 4px; | |||
| overflow: hidden; | |||
| z-index: 1; | |||
There was a problem hiding this comment.
If we don't insert the LiveEditor changes for actionComp, this also might be redundant, as the actions would be after the cm-editor in the DOM
| actionComp={ | ||
| <> | ||
| <section className={styles.actions}> | ||
| <LiveEditorAction onClick={onCopyClick} disabled={isCopied}> | ||
| {isCopied ? "Copied" : "Copy"} | ||
| </LiveEditorAction> | ||
| <LiveEditorAction onClick={onFormatClick}>Format</LiveEditorAction> | ||
| <LiveEditorAction onClick={onResetClick}>Reset</LiveEditorAction> | ||
| </section> | ||
| </> | ||
| } |
There was a problem hiding this comment.
can you restore this one to be a sibling rather than as a prop for LiveEditor?
| <section className={styles.actions}> | ||
| <LiveEditorAction onClick={onCopyClick} disabled={isCopied}> | ||
| {isCopied ? "Copied" : "Copy"} | ||
| </LiveEditorAction> | ||
| <LiveEditorAction onClick={onFormatClick}>Format</LiveEditorAction> | ||
| <LiveEditorAction onClick={onResetClick}>Reset</LiveEditorAction> | ||
| </section> |
|
@YossiSaadi All required changes are done from my side, you can re-review now. |
There was a problem hiding this comment.
Amazing work @malavshah9, thanks for your contribution to Vibe!!
Resolves #2513
