From 2328172c6965cbb9e034b2c21bbd29023902a099 Mon Sep 17 00:00:00 2001
From: erdgeist <erdgeist@erdgeist.org>
Date: Sun, 26 Jul 2026 17:29:14 +0200
Subject: More visual cleanups for input fields

---
 app/views/users/edit.html.erb | 18 +++++------
 public/stylesheets/admin.css  | 72 +++++++++++++++++++------------------------
 2 files changed, 39 insertions(+), 51 deletions(-)

diff --git a/app/views/users/edit.html.erb b/app/views/users/edit.html.erb
index 4f1a22b8..9df93815 100644
--- a/app/views/users/edit.html.erb
+++ b/app/views/users/edit.html.erb
@@ -1,14 +1,13 @@
-<h1><%= @user == current_user ? t(".my_account") : t(".edit_user", :login => @user.login) %></h1>
+<div id="admin_layout">
+  <h1><%= @user == current_user ? t(".my_account") : t(".edit_user", :login => @user.login) %></h1>
 
-<% if @user.errors.any? %>
-  <div class="error_messages">
-    <ul><% @user.errors.full_messages.each do |msg| %><li><%= msg %></li><% end %></ul>
-  </div>
-<% end %>
+  <% if @user.errors.any? %>
+    <div class="error_messages">
+      <ul><% @user.errors.full_messages.each do |msg| %><li><%= msg %></li><% end %></ul>
+    </div>
+  <% end %>
 
-<div id="admin_layout">
   <%= form_for @user do |f| %>
-  <div id="content">
     <div class="layout_row_label"><%= t("users.labels.login") %></div>
     <div class="layout_row_content"><%= f.text_field :login, :autocomplete => "username" %></div>
 
@@ -29,7 +28,6 @@
     <div class="layout_row_label"></div>
     <div class="layout_row_content"><%= submit_tag t(".update") %></div>
   <% end %>
-  </div>
 
   <% if @user == current_user %>
     <div class="layout_row_label"><%= t(".second_factor") %></div>
@@ -37,7 +35,6 @@
       <% if current_user.otp_enrolled? %>
         <p><%= t(".enabled") %></p>
         <%= form_tag otp_enrollment_path, :method => :delete, :class => "otp_form" do %>
-          <%= text_field_tag :login, current_user.login, :autocomplete => "username", :readonly => true, :tabindex => -1, :class => "visually_hidden" %>
           <%= password_field_tag :current_password, nil, :placeholder => t(".current_password"), :autocomplete => "current-password" %>
           <%= text_field_tag :code, nil, :placeholder => t(".current_code"),
                 :autocomplete => "one-time-code", :inputmode => "numeric" %>
@@ -48,7 +45,6 @@
       <% else %>
         <p><%= t(".not_enrolled") %></p>
         <%= form_tag otp_enrollment_path, :method => :post, :class => "otp_form" do %>
-          <%= text_field_tag :login, current_user.login, :autocomplete => "username", :readonly => true, :tabindex => -1, :class => "visually_hidden" %>
           <%= password_field_tag :current_password, nil, :placeholder => t(".current_password"), :autocomplete => "current-password"%>
           <%= button_tag :type => "submit", :class => "action_button" do %>
             <%= icon("shield-lock", library: "tabler", "aria-hidden": true) %> <%= t(".enable_second_factor") %>
diff --git a/public/stylesheets/admin.css b/public/stylesheets/admin.css
index 8378cf78..6664c4ce 100644
--- a/public/stylesheets/admin.css
+++ b/public/stylesheets/admin.css
@@ -59,10 +59,7 @@ summary:hover {
   background-color: #f7f7f7;
 }
 
-input[type=password] {
-  border: 1px solid #989898;
-}
-
+input[type=password],
 input[type=radio] {
   border: 1px solid #989898;
 }
@@ -72,17 +69,12 @@ input[type=radio] {
    ============================================================ */
 
 #wrapper {
-  padding: 5px;
-  width: 100%;
-  box-sizing: border-box;
+  margin: 0 5px;
 }
 
 @media(min-width:1016px) {
   #wrapper {
     margin: 0 125px;
-    padding: 0;
-    width: inherit;
-    box-sizing: inherit;
   }
 
   .node_action_bar.node_action_bar_save {
@@ -107,6 +99,16 @@ input[type=radio] {
 .right { text-align: right; }
 .clear_left { clear: left; }
 
+#login_form {
+  max-width: 22rem;
+}
+
+#login_form input[type=text],
+#login_form input[type=password] {
+  width: 100%;
+  box-sizing: border-box;
+}
+
 /* ============================================================
    Navigation
    ============================================================ */
@@ -811,7 +813,8 @@ form.button_to button[type="submit"] {
   padding: 4px 12px;
   box-sizing: border-box;
   height: 2.25rem;
-  width: 22rem;
+  width: 100%;
+  max-width: 22rem;
   border-radius: 2px;
 }
 
@@ -914,10 +917,6 @@ form.button_to button[type="submit"] {
   }
 }
 
-#new_node input[type=text], #new_node input[type=password] {
-  width: 350px;
-}
-
 input[type=text]#tag_list,
 input[type=text]#node_staged_slug,
 input#move_to_search_term {
@@ -974,21 +973,20 @@ input#tag_list {
 input[type=text]#page_title {
   box-sizing: border-box;
   width: 100%;
-  padding-top: 6px 5px 4px;
+  padding: 6px 5px 4px;
   font-weight: bold;
 }
 
-#admin_layout textarea#page_body {
-  box-sizing: border-box;
-  width: 100%;
-  height: 60vh;
-}
-
 #admin_layout textarea#page_abstract {
   width: 100%;
   box-sizing: border-box;
   height: 8rem;
+}
+
+#admin_layout textarea#page_body {
+  box-sizing: border-box;
   width: 100%;
+  height: 60vh;
 }
 
 #admin_layout #content,
@@ -1004,16 +1002,18 @@ input#move_to_search_term {
   width: 100%;
 }
 
-@media(min-width:1016px) {
-  input#menu_search_term,
-  input#menu_item_node_id,
-  input#menu_item_path,
-  input#menu_item_title {
-    width: 690px;
-  }
+input#menu_search_term,
+input#menu_item_node_id,
+input#menu_item_path,
+input#menu_item_title {
+  width: 100%;
+  max-width: 44rem;
+}
 
-  textarea#page_abstract {
+@media(min-width:1016px) {
+  #admin_layout textarea#page_abstract {
     padding: 5px;
+    height: 250px;
   }
 
   #admin_overview {
@@ -1560,7 +1560,8 @@ div#draft_list table td.actions a {
 }
 
 .restore_picker input[type=text] {
-  width: 22em;
+  width: 100%;
+  max-width: 22rem
 }
 
 .restore_picker .search_results {
@@ -1590,15 +1591,6 @@ form.otp_form input[type=text] {
   margin-bottom: 0.5rem;
 }
 
-.visually_hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
-}
-
 .otp_qr svg {
   width: 220px;
   height: auto;
-- 
cgit v1.3