inserted spans in debug mode on view component content content break layout

[dweinand]

This is a version of the issue in marcoroth/reactionview#39 But in this case the problem isn't just rails helpers, but a view component's content getting wrapped in a span.

I make heavy use of space-* layouts, and am also in the process of making heavy use of view components for everything, so at this point I have to disable debug mode entirely.

Here is the template:

<%= render CardComponent.new(class: 'w-full sm:max-w-md space-y-4 md:space-y-6 sm:p-8') do %>
  <h1 class="text-xl font-semibold text-heading md:text-2xl">
    Sign in to your account
  </h1>
  <%= form_with url: session_path, class: 'space-y-4 md:space-y-6' do |form| %>
    <div>
      <%= form.label :email_address, class: "block mb-2 text-sm font-medium text-heading" %>
      <%= form.email_field :email_address,
                       class:
                         "bg-neutral-secondary-medium border border-default-medium text-heading focus:ring-brand focus:border-brand block w-full px-3 py-2.5 shadow-xs placeholder:text-body",
                       required: true,
                       autofocus: true,
                       autocomplete: "username",
                       placeholder: "user@example.com",
                       value: params[:email_address] %>

    </div>
    <div>
      <%= form.label :password, class: "block mb-2 text-sm font-medium text-heading" %>
      <%= form.password_field :password,
                          class:
                            "bg-neutral-secondary-medium border border-default-medium text-heading focus:ring-brand focus:border-brand block w-full px-3 py-2.5 shadow-xs placeholder:text-body",
                          required: true,
                          autocomplete: "current-password",
                          placeholder: "••••••••",
                          maxlength: 72 %>

    </div>
    <%= form.submit "Sign in",
                class:
                  "cursor-pointer text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none w-full" %>
  <% end %>

  <%= link_to "Forgot password?",
  new_password_path,
  class: "text-sm font-medium text-fg-brand hover:underline" %>
<% end %>

and here is the output

<div class="bg-neutral-primary-soft p-6 border border-default rounded-base shadow-xs w-full sm:max-w-md space-y-4 md:space-y-6 sm:p-8">
--
<span data-herb-debug-outline-type="erb-output component" data-herb-debug-erb="&lt;%= content %&gt;" data-herb-debug-file-name="CardComponent" data-herb-debug-file-relative-path="app/components/card_component.html.erb" data-herb-debug-file-full-path="/Users/dweinand/Projects/Head-Teller/head_teller/app/components/card_component.html.erb" data-herb-debug-inserted="true" data-herb-debug-line="2" data-herb-debug-column="3" style="display: contents;">
<h1 class="text-xl font-semibold text-heading md:text-2xl">
Sign in to your account
</h1>
 
 
<form class="space-y-4 md:space-y-6" action="/session" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="91h-IvzVrmPSZ-CumBF-wYw-e_RxuFV4bCXnh8IIP2JEp_Y-bKQpoNOh_5603Opm_Uxz6pAYV769WCZHMwI-6g" />
<div>
<span data-herb-debug-outline-type="erb-output view" data-herb-debug-erb="&lt;%= form.label :email_address, class: &quot;block mb-2 text-sm font-medium text-heading&quot; %&gt;" data-herb-debug-file-name="new.html.erb" data-herb-debug-file-relative-path="app/views/sessions/new.html.erb" data-herb-debug-file-full-path="/Users/dweinand/Projects/Head-Teller/head_teller/app/views/sessions/new.html.erb" data-herb-debug-inserted="true" data-herb-debug-line="19" data-herb-debug-column="7" style="display: contents;"><label class="block mb-2 text-sm font-medium text-heading" for="email_address">Email address</label></span>
<span data-herb-debug-outline-type="erb-output view" data-herb-debug-erb="&lt;%= form.email_field :email_address,
class:
&quot;bg-neutral-secondary-medium border border-default-medium text-heading focus:ring-brand focus:border-brand block w-full px-3 py-2.5 shadow-xs placeholder:text-body&quot;,
required: true,
autofocus: true,
autocomplete: &quot;username&quot;,
placeholder: &quot;user@example.com&quot;,
value: params[:email_address] %&gt;" data-herb-debug-file-name="new.html.erb" data-herb-debug-file-relative-path="app/views/sessions/new.html.erb" data-herb-debug-file-full-path="/Users/dweinand/Projects/Head-Teller/head_teller/app/views/sessions/new.html.erb" data-herb-debug-inserted="true" data-herb-debug-line="20" data-herb-debug-column="7" style="display: contents;"><input class="bg-neutral-secondary-medium border border-default-medium text-heading focus:ring-brand focus:border-brand block w-full px-3 py-2.5 shadow-xs placeholder:text-body" required="required" autofocus="autofocus" autocomplete="username" placeholder="user@example.com" type="email" name="email_address" id="email_address" /></span>
 
</div>
<div>
<span data-herb-debug-outline-type="erb-output view" data-herb-debug-erb="&lt;%= form.label :password, class: &quot;block mb-2 text-sm font-medium text-heading&quot; %&gt;" data-herb-debug-file-name="new.html.erb" data-herb-debug-file-relative-path="app/views/sessions/new.html.erb" data-herb-debug-file-full-path="/Users/dweinand/Projects/Head-Teller/head_teller/app/views/sessions/new.html.erb" data-herb-debug-inserted="true" data-herb-debug-line="31" data-herb-debug-column="7" style="display: contents;"><label class="block mb-2 text-sm font-medium text-heading" for="password">Password</label></span>
<span data-herb-debug-outline-type="erb-output view" data-herb-debug-erb="&lt;%= form.password_field :password,
class:
&quot;bg-neutral-secondary-medium border border-default-medium text-heading focus:ring-brand focus:border-brand block w-full px-3 py-2.5 shadow-xs placeholder:text-body&quot;,
required: true,
autocomplete: &quot;current-password&quot;,
placeholder: &quot;••••••••&quot;,
maxlength: 72 %&gt;" data-herb-debug-file-name="new.html.erb" data-herb-debug-file-relative-path="app/views/sessions/new.html.erb" data-herb-debug-file-full-path="/Users/dweinand/Projects/Head-Teller/head_teller/app/views/sessions/new.html.erb" data-herb-debug-inserted="true" data-herb-debug-line="32" data-herb-debug-column="7" style="display: contents;"><input class="bg-neutral-secondary-medium border border-default-medium text-heading focus:ring-brand focus:border-brand block w-full px-3 py-2.5 shadow-xs placeholder:text-body" required="required" autocomplete="current-password" placeholder="••••••••" maxlength="72" size="72" type="password" name="password" id="password" /></span>
 
</div>
<span data-herb-debug-outline-type="erb-output view" data-herb-debug-erb="&lt;%= form.submit &quot;Sign in&quot;,
class:
&quot;cursor-pointer text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none w-full&quot; %&gt;" data-herb-debug-file-name="new.html.erb" data-herb-debug-file-relative-path="app/views/sessions/new.html.erb" data-herb-debug-file-full-path="/Users/dweinand/Projects/Head-Teller/head_teller/app/views/sessions/new.html.erb" data-herb-debug-inserted="true" data-herb-debug-line="41" data-herb-debug-column="5" style="display: contents;"><input type="submit" name="commit" value="Sign in" class="cursor-pointer text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none w-full" data-disable-with="Sign in" /></span>
</form>
<span data-herb-debug-outline-type="erb-output view" data-herb-debug-erb="&lt;%= link_to &quot;Forgot password?&quot;,
new_password_path,
class: &quot;text-sm font-medium text-fg-brand hover:underline&quot; %&gt;" data-herb-debug-file-name="new.html.erb" data-herb-debug-file-relative-path="app/views/sessions/new.html.erb" data-herb-debug-file-full-path="/Users/dweinand/Projects/Head-Teller/head_teller/app/views/sessions/new.html.erb" data-herb-debug-inserted="true" data-herb-debug-line="46" data-herb-debug-column="3" style="display: contents;"><a class="text-sm font-medium text-fg-brand hover:underline" href="/passwords/new">Forgot password?</a></span>
</span>
</div>