ActionText / Trix sticky toolbar

// app/assets/stylesheets/actiontext.css
// ...
/* START ---------------------- sticky Trix toolbar -----------------------*/
.sticky-toolbar-wrapper {
    position: relative;
    z-index: 1;
    margin-bottom: 1em;
}

.sticky-toolbar-wrapper trix-toolbar {
    position: sticky;
    z-index: 1;
    top: 0px;
    left: 0px;

    background-color: #fff;
    padding: 2px 0;
}
/* END ---------------------- sticky Trix toolbar -----------------------*/

in view:

<div class="sticky-toolbar-wrapper">
  <%= form.label :content %>
  <%= form.rich_text_area :content %>
</div>

For tailwind I do (as Tailwind resets most of Actipon text features)

<div class="my-5 sticky-toolbar-wrapper">
  <%= form.label :content %>
  <%= form.rich_text_area :content, class: "trix-editor trix-content block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>
</div>

--------

original idea from https://tosbourn.com/sticky-trix-toolbar/ without wrapper

// app/assets/stylesheets/actiontext.css
// ...
/* START ---------------------- sticky Trix toolbar -----------------------*/
trix-toolbar {
  position: sticky;
  top: 0;
  z-index: 1;
}
/* END ---------------------- sticky Trix toolbar -----------------------*/