サインアップ登録時にバリデーションのエラーが表示されても枠内に文字を納めたい

Question

サインアップページにて、エラー表示されても枠内に文字を納めたい

Ruby on railsでdeviseを使って、Amazonみたいなアカウント登録ページを作ったが、
エラーが表示されたら、

発生している問題・エラーメッセージ

該当のソースコード

<%= render "shared/second-header"%>

<div class="box">
  <div class="box-inner">
    <%= form_with model: @user, as: resource_name, url: user_registration_path, local: true do |f| %>

      <h1 class='logo'>サインアップ</h1>
        <%= render 'shared/error_messages', model: f.object %>
      <div class="box-name">
        <%= f.label :nickname, "名前" %><br />
        <%= f.text_field :nickname, autofocus: true, autocomplete: "nickname" %>
      </div>
      <div class="box-email">
        <%= f.label :email, "Eメール" %><br />
        <%= f.email_field :email, id:"email", autofocus: true, autocomplete: "email" %>
      </div>
      <div class="box-password">
        <div class="a-row">
          <div class="column-left">
            <%= f.label :password, "パスワード" %>
          </div>
        </div>
        <%= f.password_field :password, id:"password", autocomplete: "current-password" %>
      </div>
      <div class="box-password">
        <%= f.label :password_confirmation, "パスワード（確認）" %><br />
        <%= f.password_field :password_confirmation, autocomplete: "off" %>
      </div>
      <div class="box-registrations">
        <%= f.submit "アカウント作成" %>
      </div>
    <% end %>
  </div>
</div>

<%= render "shared/second-footer"%>

* {
  margin: 0px;
  padding: 0px;
  text-decoration: none;
}

.box {
  width: 350px;
  height: 450px;
  margin: 60px auto 0;
  border-radius: 4px;
  border: 1px #ddd solid;
  
}

.box-inner {
  padding: 20px 26px;
  min-height: auto;
}

.logo {
  font-weight: 400;
  font-size: 28px;
  line-height: 1.2;
  margin-bottom: 10px;
  padding-bottom: 4px;
  color: #111111;
  font-family: arial black;
}



.box-name {
  margin-bottom: 13px;
  display: flex;
  flex-direction: column;
}

.box-email {
  margin-bottom: 13px;
}

.box-password {
  margin-bottom: 22px;
}

.box-name label, .box-email label, .box-password label {
  font-weight: 700;
  font-size: 13px;
  padding-left: 2px;
  padding-bottom: 2px;
}

.box-name input[type="text"], .box-email input[type="email"], .box-password input[type="password"] {
  border-style: none;
  box-sizing: border-box;
  width: 100%;
  height: 31px;
  border: 1px solid #a6a6a6;
  box-shadow: 0 1px 0 rgba(0,0,0,.07) inset;
  border-radius: 3px;
  padding: 0 7px;
}

.column-left {
  float: left;
}

.column-right {
  float: right;
}

.box-password a {
  font-size: 13px;
}

.box-login {
  margin-bottom: 26px;
}

 .box-registrations input[type="submit"] {
  border-style: none;
  width: 100%;
  background: linear-gradient(to bottom,#f7dfa5,#f0c14b);
  border-radius: 3px;
  border: 1px #a88734 solid;
  color:black;
} 

.box-registrations input[type="submit"]:hover {
  cursor: pointer;
  background: #f0c14b;
}

試したこと

CSSのbox-innerに「min-hegit: auto;」を行ったが表示に特に変更がなかった。

Comments

[winterboum]

タグにCSS追加したほうが良いでしょう

[Naccam]

ご回答頂きまして、誠にありがとうございます。
勉強不足で誠に申し訳ございませんが、今回の場合は新たにタグをつけてCSSを追記した方がいいとのことでしょうか。

[winterboum]

はい、RailsというよりはCSSの問題ですので、CSSのわかる方の目に止まるほうがよいかと思います。