Style form as table

app/assets/stylesheets/application.css

@@ -115,16 +115,31 @@ a:not(:hover) {
   opacity: 1;
 }
 
-.field + .field, .field + .actions {
+form {
-  margin-top: 0.8em;
+  margin: 0 auto;
+  display: table;
+  border-spacing: 0.8em;
 }
-form label {
+.form-row {
-  display: inline-block;
+  display: table-row;
-  font-weight: bold;
+}
+.form-label, .form-field {
+  display: table-cell;
+}
+.form-label {
   font-size: 0.9em;
   padding-right: 0.25em;
   text-align: right;
-  width: 50%;
+}
+.form-label.required {
+  font-weight: bold;
+}
+.form-label.error {
+  color: #ff1f5b;
+}
+.form-actions {
+  caption-side: bottom;
+  display: table-caption;
 }
 form input[type=submit] {
   display: block;

app/helpers/application_helper.rb

@@ -1,2 +1,28 @@
 module ApplicationHelper
+  class TabularFormBuilder < ActionView::Helpers::FormBuilder
+    (field_helpers - [:label]).each do |selector|
+      class_eval <<-RUBY_EVAL, __FILE__, __LINE__ + 1
+        def #{selector}(method, options = {})
+          @template.content_tag :div, class: "form-row" do
+            label_text = label(method, options.delete(:label))
+            label_class = ["form-label"]
+            label_class << "required" if options[:required]
+            label_class << "error" if @object&.errors[method].present?
+
+            @template.content_tag(:div, label_text, class: label_class) +
+            @template.content_tag(:div, super, class: "form-field")
+          end
+        end
+      RUBY_EVAL
+    end
+
+    def submit(value, options = {})
+      @template.content_tag :div, super, class: "form-actions"
+    end
+  end
+
+  def tabular_form_for(record, options = {}, &block)
+    options.merge! builder: TabularFormBuilder
+    form_for(record, **options, &block)
+  end
 end

app/views/users/sessions/new.html.erb

@@ -1,26 +1,12 @@
-<h2 style="text-align:center;"><%= t :sign_in %></h2>
+<%= tabular_form_for resource, as: resource_name, url: session_path(resource_name) do |f| %>
-
+  <%= f.email_field :email, required: true, size: 32, autofocus: true, autocomplete: "email" %>
-<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
+  <%= f.password_field :password, required: true, size: 32, autocomplete: "current-password" %>
-  <div class="field">
-    <%= f.label t(:email) -%>
-    <%= f.email_field :email, size: 32, autofocus: true, autocomplete: "email" %>
-  </div>
-
-  <div class="field">
-    <%= f.label t(:password) -%>
-    <%= f.password_field :password, size: 32, autocomplete: "current-password" %>
-  </div>
 
   <% if devise_mapping.rememberable? %>
-    <div class="field">
+    <%= f.check_box :remember_me %>
-      <%= f.label t(:remember_me) -%>
-      <%= f.check_box :remember_me %>
-    </div>
   <% end %>
 
-  <div class="actions">
+  <%= f.submit t(:sign_in) %>
-    <%= f.submit t(:sign_in) %>
-  </div>
 <% end %>
 
 <%= render "users/shared/links" %>