-<div id="<%= id %>_container" class="row richtext_container">
- <div id="<%= id %>_content" class="col-sm-8 mb-3 mb-sm-0 richtext_content">
- <ul class="nav nav-tabs mb-3" role="tablist">
- <li class="nav-item">
- <button type="button" class="nav-link active richtext_doedit"><%= t(".edit") %></button>
- </li>
- <li class="nav-item">
- <button type="button" class="nav-link richtext_dopreview"><%= t(".preview") %></button>
- </li>
- </ul>
- <%= builder.text_area(attribute, options.merge(:wrapper => false, "data-preview-url" => preview_url(:type => type))) %>
- <div id="<%= id %>_preview" class="richtext_preview richtext text-break"></div>
- </div>
- <div id="<%= id %>_help" class="col-sm-4 richtext_help">
- <div class="card bg-body-tertiary h-100">
- <div class="card-body">
- <%= render :partial => "shared/#{type}_help" %>
+<div class="richtext_container">
+ <ul class="nav nav-tabs mb-3">
+ <li class="nav-item">
+ <button type="button" class="nav-link active" data-bs-toggle="tab" data-bs-target="#<%= id %>_edit"><%= t(".edit") %></button>
+ </li>
+ <li class="nav-item">
+ <button type="button" class="nav-link" data-bs-toggle="tab" data-bs-target="#<%= id %>_preview"><%= t(".preview") %></button>
+ </li>
+ <li class="nav-item d-block d-sm-none">
+ <button type="button" class="nav-link" data-bs-toggle="tab" data-bs-target="#<%= id %>_help"><%= t(".help") %></button>
+ </li>
+ </ul>
+ <div class="row g-3">
+ <div class="tab-content col-sm-8">
+ <div id="<%= id %>_edit" class="tab-pane show active">
+ <%= builder.text_area(attribute, options.merge(:wrapper => false, "data-preview-url" => preview_url(:type => type))) %>
+ </div>
+ <div id="<%= id %>_preview" class="tab-pane richtext text-break"></div>
+ <div id="<%= id %>_help" class="tab-pane">
+ <div class="card bg-body-tertiary h-100">
+ <div class="card-body">
+ <%= render :partial => "shared/#{type}_help" %>
+ </div>
+ </div>
</div>
</div>
+ <aside class="col-sm-4 d-none d-sm-block richtext_help_sidebar"></aside>
</div>
</div>