Skip to content

fix(editor): position description toolbar button on left border#136

Open
Rishavraaj wants to merge 2 commits into
mainfrom
fix/editor-toolbar-left-border
Open

fix(editor): position description toolbar button on left border#136
Rishavraaj wants to merge 2 commits into
mainfrom
fix/editor-toolbar-left-border

Conversation

@Rishavraaj
Copy link
Copy Markdown
Contributor

Summary

  • The EditorJS + toolbar button was appearing on the right side of the description field in the task create sheet due to EditorJS's
    mobile/narrow layout fallback (right: auto with no left set)
  • Fixed by positioning the button flush against the left border of the description container — left: 0 on .ce-toolbar__actions with the
    container's left padding removed (pl-0) so the button sits on the border without overlapping text
  • Scoped all CSS changes to [id^="task-description-editor"] (matches both the create form and detail view editors) to prevent bleeding into
    other EditorJS instances (e.g. deal/company/contact description editors)

Changes

  • globals.css — Add scoped CSS for task description editors: position toolbar actions on the left, hide the settings/drag button, and indent
    block content by 30px to clear the + button
  • TaskForm.tsx — Remove left padding (pl-0) from the description container so the editor starts flush with the border
  • TaskDetail.tsx — Same pl-0 treatment for the task detail description editor

Test plan

  • Open the Create Task sheet — description field should show + button on the left border with placeholder text starting after it
  • Open a Task Detail view — description editor should have the same left-border button placement
  • Verify other editors (deal description, contact description, company description) are unaffected
  • Confirm no horizontal overflow/scrollbar appears in the description fields
  • Check both light and dark mode

Rishavraaj and others added 2 commits May 21, 2026 10:53
Scope EditorJS toolbar CSS to task description editors only, preventing
bleed into detail views. Remove left padding from description containers
so the + button sits flush against the left border with text indented.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
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.

1 participant