Skip to content

Fix password field height on login page in Safari #1036

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
maebeale merged 8 commits into from
Feb 17, 2026
+188 −168
Merged

Fix password field height on login page in Safari #1036

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
e69e944
Initial plan
Copilot Feb 15, 2026
e23f32d
Add Safari-specific CSS fix for password field height
Copilot Feb 15, 2026
f8e703b
Remove redundant min-height from password field CSS
Copilot Feb 15, 2026
309984e
Fix password field width by adding w-full class instead of CSS hack
Copilot Feb 15, 2026
c8c64f7
Fix password field height by using px-3 py-2 padding to match email f…
Copilot Feb 15, 2026
ba221a2
Futz w password field to make safari work
maebeale Feb 16, 2026
a8bc69b
Change all password fields to lower-level field so we can control hei…
maebeale Feb 17, 2026
34c6847
Update tests to newer password field edits
maebeale Feb 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 17 additions & 2 deletions app/frontend/stylesheets/application.tailwind.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,10 +134,16 @@
position: relative;
}

.password-field {
-webkit-appearance: none;
appearance: none;
}

.toggle-password {
position: absolute;
right: 12px;
top: 36px; /* aligns with input vertically */
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
padding: 0;
Expand All @@ -151,7 +157,10 @@

/* Hide Chrome / Edge / Safari (macOS + iOS) password reveal icon */
input[type="password"]::-webkit-textfield-decoration-container {
display: none;
visibility: hidden;
pointer-events: none;
width: 0;
height: 0;
}

input[type="password"]::-webkit-credentials-auto-fill-button {
Expand All @@ -160,6 +169,12 @@ input[type="password"]::-webkit-credentials-auto-fill-button {
pointer-events: none;
}

<<<<<<< HEAD
/* Safari fix: Ensure password field has proper height */
.password-field {
height: 2.5rem; /* Matches Tailwind's default input height with p-2 */
}

/* Truncated comment textareas - compact at rest, expand on hover/focus */
textarea.comment-truncated {
overflow: hidden;
Expand Down
74 changes: 33 additions & 41 deletions app/views/devise/passwords/edit.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,50 +12,42 @@
<%= f.hidden_field :reset_password_token %>

<!-- NEW PASSWORD -->
<div class="form-group password-container" data-controller="password-toggle">
<%= f.input :password,
as: :password,
label: "New password",
required: true,
autofocus: true,
autocomplete: "new-password",
autocorrect: "off",
autocapitalize: "off",
spellcheck: "false",
input_html: {
class: "form-control form-input password-field",
data: { password_toggle_target: "input" }
} %>
<button
type="button"
class="toggle-password"
data-action="password-toggle#toggle"
aria-label="Toggle password visibility">
<i class="fa-solid fa-eye" data-password-toggle-target="icon"></i>
</button>
<div data-controller="password-toggle" class="input password required">
<label class="password required" for="user_password">New password <abbr title="required">*</abbr></label>
<div class="relative">
<%= f.password_field :password,
class: "w-full form-control form-input password-field pr-10",
required: true,
minlength: 5,
autofocus: true,
autocomplete: "new-password",
autocorrect: "off",
autocapitalize: "off",
spellcheck: "false",
data: { password_toggle_target: "input" } %>
<button type="button" class="toggle-password" data-action="password-toggle#toggle" aria-label="Toggle password visibility">
<i class="fa-solid fa-eye" data-password-toggle-target="icon"></i>
</button>
</div>
<p class="text-sm text-gray-500 mt-1">Password must be at least 5 characters long</p>
</div>

<!-- CONFIRM PASSWORD -->
<div class="form-group password-container" data-controller="password-toggle">
<%= f.input :password_confirmation,
as: :password,
label: "Confirm new password",
required: true,
autocomplete: "new-password",
autocorrect: "off",
autocapitalize: "off",
spellcheck: "false",
input_html: {
class: "form-control form-input password-field",
data: { password_toggle_target: "input" }
} %>
<button
type="button"
class="toggle-password"
data-action="password-toggle#toggle"
aria-label="Toggle password visibility">
<i class="fa-solid fa-eye" data-password-toggle-target="icon"></i>
</button>
<div data-controller="password-toggle" class="input password required">
<label class="password required" for="user_password_confirmation">Confirm new password <abbr title="required">*</abbr></label>
<div class="relative">
<%= f.password_field :password_confirmation,
class: "w-full form-control form-input password-field pr-10",
required: true,
autocomplete: "new-password",
autocorrect: "off",
autocapitalize: "off",
spellcheck: "false",
data: { password_toggle_target: "input" } %>
<button type="button" class="toggle-password" data-action="password-toggle#toggle" aria-label="Toggle password visibility">
<i class="fa-solid fa-eye" data-password-toggle-target="icon"></i>
</button>
</div>
</div>

<div class="action-buttons mt-8 flex justify-center gap-3">
Expand Down
43 changes: 20 additions & 23 deletions app/views/devise/sessions/new.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,29 +16,26 @@
autofocus: true,
required: true,
input_html: { class: "w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 shadow-sm" } %>
<div
class="flex flex-col relative"
data-controller="password-toggle">
<%= f.input :password,
as: :password,
required: true,
autocomplete: "current-password",
autocorrect: "off",
autocapitalize: "off",
spellcheck: "false",
input_html: {
class: "form-control password-field rounded-md border-gray-300 shadow-sm
focus:ring-blue-500 focus:border-blue-500 p-2 pr-10",
data: { password_toggle_target: "input" }
} %>

<button
type="button"
class="toggle-password"
data-action="password-toggle#toggle"
aria-label="Toggle password visibility">
<i class="fa fa-eye" data-password-toggle-target="icon"></i>
</button>
<div data-controller="password-toggle" class="input password required">
<label class="password required" for="user_password">Password <abbr title="required">*</abbr></label>
<div class="relative">
<%= f.password_field :password,
class: "w-full form-control password-field rounded-md border-gray-300 shadow-sm
focus:ring-blue-500 focus:border-blue-500 px-3 py-2 pr-10",
required: true,
autocomplete: "current-password",
autocorrect: "off",
autocapitalize: "off",
spellcheck: "false",
data: { password_toggle_target: "input" } %>
<button
type="button"
class="toggle-password"
data-action="password-toggle#toggle"
aria-label="Toggle password visibility">
<i class="fa fa-eye" data-password-toggle-target="icon"></i>
</button>
</div>
</div>

<% if devise_mapping.rememberable? %>
Expand Down
97 changes: 38 additions & 59 deletions app/views/users/change_password.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,26 +7,21 @@
method: :post,
html: { class: "space-y-4" } do |f| %>
<!-- CURRENT PASSWORD -->
<div class="flex flex-col relative"
data-controller="password-toggle">
<%= f.input :current_password,
as: :password,
required: true,
autocomplete: "current-password",
autocorrect: "off",
autocapitalize: "off",
spellcheck: "false",
input_html: {
class: "password-field rounded-md border-gray-300 shadow-sm p-2 pr-10",
data: { password_toggle_target: "input" }
} %>
<button
type="button"
class="toggle-password"
data-action="password-toggle#toggle"
aria-label="Toggle password visibility">
<i class="fa fa-eye" data-password-toggle-target="icon"></i>
</button>
<div data-controller="password-toggle" class="input password required">
<label class="password required" for="user_current_password">Current password <abbr title="required">*</abbr></label>
<div class="relative">
<%= f.password_field :current_password,
class: "w-full password-field rounded-md border-gray-300 shadow-sm p-2 pr-10",
required: true,
autocomplete: "current-password",
autocorrect: "off",
autocapitalize: "off",
spellcheck: "false",
data: { password_toggle_target: "input" } %>
<button type="button" class="toggle-password" data-action="password-toggle#toggle" aria-label="Toggle password visibility">
<i class="fa fa-eye" data-password-toggle-target="icon"></i>
</button>
</div>
</div>
<p class="text-gray-500 text-sm mt-1">
Don't remember your password?
Expand All @@ -39,56 +34,40 @@
} %>
</p>
<!-- NEW PASSWORD -->
<div class="flex flex-col mt-6 pt-6">
<div class="relative" data-controller="password-toggle">
<%= f.input :password,
as: :password,
label: "New password",
<div data-controller="password-toggle" class="input password required mt-6 pt-6">
<label class="password required" for="change-password-new-password">New password <abbr title="required">*</abbr></label>
<div class="relative">
<%= f.password_field :password,
id: "change-password-new-password",
class: "w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500 p-2 pr-10",
required: true,
autocomplete: "new-password",
autocorrect: "off",
autocapitalize: "off",
spellcheck: "false",
input_html: {
id: "change-password-new-password",
class: "rounded-md border-gray-300 shadow-sm
focus:ring-blue-500 focus:border-blue-500
p-2 pr-10 w-full",
data: { password_toggle_target: "input" }
} %>
<button
type="button"
class="toggle-password absolute right-3 top-9 text-gray-500 hover:text-gray-700"
data-action="password-toggle#toggle"
aria-label="Toggle password visibility">
data: { password_toggle_target: "input" } %>
<button type="button" class="toggle-password" data-action="password-toggle#toggle" aria-label="Toggle password visibility">
<i class="fa fa-eye" data-password-toggle-target="icon"></i>
</button>
</div>
</div>
<!-- CONFIRM PASSWORD -->
<div class="flex flex-col relative" data-controller="password-toggle">
<%= f.input :password_confirmation,
as: :password,
label: "New password confirmation",
autocomplete: "new-password",
autocorrect: "off",
autocapitalize: "off",
spellcheck: "false",
required: true,
input_html: {
<div data-controller="password-toggle" class="input password required">
<label class="password required" for="change-password-new-password-confirmation">New password confirmation <abbr title="required">*</abbr></label>
<div class="relative">
<%= f.password_field :password_confirmation,
id: "change-password-new-password-confirmation",
class: "rounded-md border-gray-300 shadow-sm
focus:ring-blue-500 focus:border-blue-500
p-2 pr-10",
data: { password_toggle_target: "input" }
} %>
<button
type="button"
class="toggle-password"
data-action="password-toggle#toggle"
aria-label="Toggle password visibility">
<i class="fa fa-eye" data-password-toggle-target="icon"></i>
</button>
class: "w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500 p-2 pr-10",
required: true,
autocomplete: "new-password",
autocorrect: "off",
autocapitalize: "off",
spellcheck: "false",
data: { password_toggle_target: "input" } %>
<button type="button" class="toggle-password" data-action="password-toggle#toggle" aria-label="Toggle password visibility">
<i class="fa fa-eye" data-password-toggle-target="icon"></i>
</button>
</div>
</div>
<div class="action-buttons mt-8 flex justify-center gap-3">
<%= f.submit "Change Password", class: "btn btn-primary" %>
Expand Down
64 changes: 23 additions & 41 deletions app/views/welcome/show.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,59 +19,41 @@
<% end %>

<!-- NEW PASSWORD -->
<div class="flex flex-col mt-6 pt-6">
<div class="relative" data-controller="password-toggle">
<%= f.input :password,
as: :password,
label: "New password",
<div data-controller="password-toggle" class="input password required mt-6 pt-6">
<label class="password required" for="change-password-new-password">New password <abbr title="required">*</abbr></label>
<div class="relative">
<%= f.password_field :password,
id: "change-password-new-password",
class: "w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500 p-2 pr-10",
required: true,
autocomplete: "new-password",
autocorrect: "off",
autocapitalize: "off",
spellcheck: "false",
input_html: {
id: "change-password-new-password",
class: "rounded-md border-gray-300 shadow-sm
focus:ring-blue-500 focus:border-blue-500
p-2 pr-10 w-full",
data: { password_toggle_target: "input" }
} %>

<button
type="button"
class="toggle-password absolute right-3 top-9 text-gray-500 hover:text-gray-700"
data-action="password-toggle#toggle"
aria-label="Toggle password visibility">
data: { password_toggle_target: "input" } %>
<button type="button" class="toggle-password" data-action="password-toggle#toggle" aria-label="Toggle password visibility">
<i class="fa fa-eye" data-password-toggle-target="icon"></i>
</button>
</div>
</div>

<!-- CONFIRM PASSWORD -->
<div class="flex flex-col relative" data-controller="password-toggle">
<%= f.input :password_confirmation,
as: :password,
label: "New password confirmation",
autocomplete: "new-password",
autocorrect: "off",
autocapitalize: "off",
spellcheck: "false",
required: true,
input_html: {
<div data-controller="password-toggle" class="input password required">
<label class="password required" for="change-password-new-password-confirmation">New password confirmation <abbr title="required">*</abbr></label>
<div class="relative">
<%= f.password_field :password_confirmation,
id: "change-password-new-password-confirmation",
class: "rounded-md border-gray-300 shadow-sm
focus:ring-blue-500 focus:border-blue-500
p-2 pr-10",
data: { password_toggle_target: "input" }
} %>

<button
type="button"
class="toggle-password"
data-action="password-toggle#toggle"
aria-label="Toggle password visibility">
<i class="fa fa-eye" data-password-toggle-target="icon"></i>
</button>
class: "w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500 p-2 pr-10",
required: true,
autocomplete: "new-password",
autocorrect: "off",
autocapitalize: "off",
spellcheck: "false",
data: { password_toggle_target: "input" } %>
<button type="button" class="toggle-password" data-action="password-toggle#toggle" aria-label="Toggle password visibility">
<i class="fa fa-eye" data-password-toggle-target="icon"></i>
</button>
</div>
</div>

<% if User.devise_modules.include?(:rememberable) %>
Expand Down
4 changes: 2 additions & 2 deletions config/locales/devise.en.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,5 +58,5 @@ en:
not_found: "not found"
not_locked: "was not locked"
not_saved:
one: "1 error prohibited this %{resource} from being saved:"
other: "%{count} errors prohibited this %{resource} from being saved:"
one: "1 error prevented this %{resource} from being saved:"
other: "%{count} errors prevented this %{resource} from being saved:"
Loading