From e892b74cf208f0156f77200600301bba2cf0f3e8 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Wed, 14 Jan 2026 13:07:09 -0600
Subject: [PATCH] Simplify settings layout and correct h2 levels

---
 app/assets/stylesheets/profile-layout.css    | 16 --------
 app/assets/stylesheets/settings.css          | 23 +++++++++--
 app/views/account/settings/_entropy.html.erb | 13 ++++---
 app/views/account/settings/_export.html.erb  | 34 +++++++++--------
 app/views/account/settings/_name.html.erb    | 16 ++++----
 app/views/account/settings/_users.html.erb   | 40 ++++++++++----------
 app/views/account/settings/show.html.erb     |  4 +-
 app/views/users/_access_tokens.html.erb      | 10 +++--
 app/views/users/_data_export.html.erb        | 34 +++++++++--------
 app/views/users/_theme.html.erb              |  6 ++-
 app/views/users/_transfer.html.erb           | 21 +++++-----
 app/views/users/show.html.erb                | 10 ++---
 12 files changed, 119 insertions(+), 108 deletions(-)
 delete mode 100644 app/assets/stylesheets/profile-layout.css

diff --git a/app/assets/stylesheets/profile-layout.css b/app/assets/stylesheets/profile-layout.css
deleted file mode 100644
index bb18c2655..000000000
--- a/app/assets/stylesheets/profile-layout.css
+++ /dev/null
@@ -1,16 +0,0 @@
-@layer components {
-  .profile-layout {
-    display: flex;
-    gap: var(--inline-space);
-
-    @media (min-width: 800px) {
-      align-items: stretch;
-      justify-content: center;
-    }
-
-    @media (max-width: 799px) {
-      align-items: center;
-      flex-direction: column;
-    }
-  }
-}
diff --git a/app/assets/stylesheets/settings.css b/app/assets/stylesheets/settings.css
index 0f1822a23..0e39c33ee 100644
--- a/app/assets/stylesheets/settings.css
+++ b/app/assets/stylesheets/settings.css
@@ -13,18 +13,21 @@
     }
   }
 
+  /* Sections & Panels
+  /* -------------------------------------------------------------------------- */
+
   .settings__panel {
     --panel-size: 100%;
     --panel-padding: calc(var(--settings-spacer) / 1);
 
     display: flex;
     flex-direction: column;
-    gap: calc(var(--settings-spacer) / 2);
+    gap: var(--panel-padding);
     min-block-size: 100%;
     min-inline-size: 0;
 
-    @media (min-width: 960px) {
-      --panel-padding: calc(var(--settings-spacer) * 1.5) calc(var(--settings-spacer) * 2);
+    @media (min-width: 640px) {
+      --panel-padding: calc(var(--settings-spacer) * 2);
     }
   }
 
@@ -38,6 +41,20 @@
     }
   }
 
+  .settings__section {
+    h2 {
+      font-size: var(--text-large);
+    }
+
+    > * + * {
+      margin-block-start: calc(var(--panel-padding) / 2);
+    }
+
+    &:is(:first-child):has(h2) {
+      margin-top: -0.33lh; /* Align h2 letters caps with panel padding */
+    }
+  }
+
   /* Users
   /* ------------------------------------------------------------------------ */
 
diff --git a/app/views/account/settings/_entropy.html.erb b/app/views/account/settings/_entropy.html.erb
index daac70a4a..4a24d4cd6 100644
--- a/app/views/account/settings/_entropy.html.erb
+++ b/app/views/account/settings/_entropy.html.erb
@@ -1,7 +1,8 @@
-<header>
-  <h2 class="divider txt-large">Auto close</h2>
-  <p class="margin-none-block-start">Fizzy doesn’t let stale cards stick around forever. Cards automatically move to “Not Now” if there is no activity for a specific period of time. <em>This is the default, global setting — you can override it on each board.</em></p>
-</header>
-
-<%= render "entropy/auto_close", model: account.entropy, url: account_entropy_path, disabled: !Current.user.admin? %>
+<section class="settings__section">
+  <header>
+    <h2 class="divider">Auto close</h2>
+    <div>Fizzy doesn’t let stale cards stick around forever. Cards automatically move to “Not Now” if there is no activity for a specific period of time. <em>This is the default, global setting — you can override it on each board.</em></div>
+  </header>
 
+  <%= render "entropy/auto_close", model: account.entropy, url: account_entropy_path, disabled: !Current.user.admin? %>
+</section>
diff --git a/app/views/account/settings/_export.html.erb b/app/views/account/settings/_export.html.erb
index 3d1946996..2b831837c 100644
--- a/app/views/account/settings/_export.html.erb
+++ b/app/views/account/settings/_export.html.erb
@@ -1,19 +1,21 @@
-<header class="margin-block-start-double">
-  <h2 class="divider txt-large">Export account data</h2>
-  <p class="margin-none-block">Download a complete archive of all account data.</p>
-</header>
+<section class="settings__section">
+  <header>
+    <h2 class="divider">Export account data</h2>
+    <div>Download a complete archive of all account data.</div>
+  </header>
 
-<div data-controller="dialog" data-dialog-modal-value="true">
-  <button type="button" class="btn" data-action="dialog#open">Begin export...</button>
+  <div data-controller="dialog" data-dialog-modal-value="true">
+    <button type="button" class="btn" data-action="dialog#open">Begin export...</button>
 
-  <dialog class="dialog panel panel--wide shadow" data-dialog-target="dialog">
-    <h2 class="margin-none txt-large">Export all account data</h2>
-    <p class="margin-none-block-start">This will generate a ZIP archive of all data in this account including all boards, cards, users, and settings.</p>
-    <p>When the file is ready, we'll email you a link to download it. The link will expire after 24 hours.</p>
+    <dialog class="dialog panel panel--wide shadow" data-dialog-target="dialog">
+      <h2 class="margin-none txt-large">Export all account data</h2>
+      <p class="margin-none-block-start">This will generate a ZIP archive of all data in this account including all boards, cards, users, and settings.</p>
+      <p>When the file is ready, we'll email you a link to download it. The link will expire after 24 hours.</p>
 
-    <div class="flex gap justify-center">
-      <%= button_to "Start export", account_exports_path, method: :post, class: "btn btn--link", form: { data: { action: "submit->dialog#close" } } %>
-      <button type="button" class="btn" data-action="dialog#close">Cancel</button>
-    </div>
-  </dialog>
-</div>
\ No newline at end of file
+      <div class="flex gap justify-center">
+        <%= button_to "Start export", account_exports_path, method: :post, class: "btn btn--link", form: { data: { action: "submit->dialog#close" } } %>
+        <button type="button" class="btn" data-action="dialog#close">Cancel</button>
+      </div>
+    </dialog>
+  </div>
+</section>
diff --git a/app/views/account/settings/_name.html.erb b/app/views/account/settings/_name.html.erb
index e3b12f325..6ad866781 100644
--- a/app/views/account/settings/_name.html.erb
+++ b/app/views/account/settings/_name.html.erb
@@ -1,10 +1,12 @@
-<%= form_with model: account, url: account_settings_path, method: :put, scope: :account, data: { controller: "form" }, class: "flex gap-half" do |form| %>
-  <strong class="full-width"><%= form.text_field :name, required: true, class: "input input--transparent full-width txt-medium", placeholder: "Account name…", data: { action: "input->form#disableSubmitWhenInvalid" }, readonly: !Current.user.admin? %></strong>
+<section class="settings__section">
+  <%= form_with model: account, url: account_settings_path, method: :put, scope: :account, data: { controller: "form" }, class: "flex gap-half" do |form| %>
+    <strong class="full-width"><%= form.text_field :name, required: true, class: "input input--transparent full-width txt-medium", placeholder: "Account name…", data: { action: "input->form#disableSubmitWhenInvalid" }, readonly: !Current.user.admin? %></strong>
 
-  <% if Current.user.admin? %>
-    <%= form.button class: "btn btn--circle btn--link txt-medium", data: { form_target: "submit" }, disabled: form.object do %>
-      <%= icon_tag "arrow-right" %>
-      <span class="for-screen-reader">Save changes</span>
+    <% if Current.user.admin? %>
+      <%= form.button class: "btn btn--circle btn--link txt-medium", data: { form_target: "submit" }, disabled: form.object do %>
+        <%= icon_tag "arrow-right" %>
+        <span class="for-screen-reader">Save changes</span>
+      <% end %>
     <% end %>
   <% end %>
-<% end %>
+</section>
diff --git a/app/views/account/settings/_users.html.erb b/app/views/account/settings/_users.html.erb
index 63b5b1763..aeee05638 100644
--- a/app/views/account/settings/_users.html.erb
+++ b/app/views/account/settings/_users.html.erb
@@ -1,24 +1,26 @@
-<header>
-  <h2 class="divider txt-medium margin-block-start">People on this account</h2>
-</header>
+<section class="settings__section">
+  <header>
+    <h2 class="divider">People on this account</h2>
+  </header>
 
-<%= tag.div class: "flex flex-column gap settings__user-filter", data: {
-  controller: "filter navigable-list",
-  action: "keydown->navigable-list#navigate filter:changed->navigable-list#reset",
-  navigable_list_focus_on_selection_value: true,
-  navigable_list_actionable_items_value: true
-} do %>
+  <%= tag.div class: "flex flex-column gap settings__user-filter", data: {
+    controller: "filter navigable-list",
+    action: "keydown->navigable-list#navigate filter:changed->navigable-list#reset",
+    navigable_list_focus_on_selection_value: true,
+    navigable_list_actionable_items_value: true
+  } do %>
 
-  <div class="settings__user-filter">
-    <input placeholder="Filter…" class="input input--transparent full-width txt-small" type="search" autocorrect="off" autocomplete="off" data-1p-ignore="true" data-filter-target="input" data-action="input->filter#filter">
+    <div class="settings__user-filter">
+      <input placeholder="Filter…" class="input input--transparent full-width txt-small" type="search" autocorrect="off" autocomplete="off" data-1p-ignore="true" data-filter-target="input" data-action="input->filter#filter">
 
-    <ul class="settings__user-list margin-block-half" data-filter-target="list" role="listbox">
-      <%= render partial: "account/settings/user", collection: users %>
-    </ul>
-  </div>
+      <ul class="settings__user-list margin-block-half" data-filter-target="list" role="listbox">
+        <%= render partial: "account/settings/user", collection: users %>
+      </ul>
+    </div>
 
-  <%= link_to account_join_code_path, class: "btn btn--link center txt-small" do %>
-    <%= icon_tag "add" %>
-    <span>Invite people</span>
+    <%= link_to account_join_code_path, class: "btn btn--link center" do %>
+      <%= icon_tag "add" %>
+      <span>Invite people</span>
+    <% end %>
   <% end %>
-<% end %>
+</section>
diff --git a/app/views/account/settings/show.html.erb b/app/views/account/settings/show.html.erb
index b730afcd4..91bb85aff 100644
--- a/app/views/account/settings/show.html.erb
+++ b/app/views/account/settings/show.html.erb
@@ -9,7 +9,7 @@
   </h1>
 <% end %>
 
-<section class="settings margin-block-start-half">
+<div class="settings margin-block-start-half">
   <div class="settings__panel settings__panel--users panel shadow center">
     <%= render "account/settings/name", account: @account %>
     <%= render "account/settings/users", users: @users %>
@@ -20,6 +20,6 @@
     <%= render "account/settings/export" if Current.user.admin? || Current.user.owner? %>
     <%= render "account/settings/cancellation" %>
   </div>
-</section>
+</div>
 
 <%= render "account/settings/subscription_panel" if Fizzy.saas? %>
diff --git a/app/views/users/_access_tokens.html.erb b/app/views/users/_access_tokens.html.erb
index 285f87149..75bffa95c 100644
--- a/app/views/users/_access_tokens.html.erb
+++ b/app/views/users/_access_tokens.html.erb
@@ -1,4 +1,6 @@
-<div class="flex flex-column align-center">
-  <h2 class="divider txt-large margin-none-block full-width">Developer</h2>
-  <p class="margin-none">Manage <%= link_to "personal access tokens", my_access_tokens_path, class: "btn btn--plain txt-link" %> used with the Fizzy developer API.</p>
-</div>
\ No newline at end of file
+<section class="settings__section flex flex-column align-center">
+  <header>
+    <h2 class="divider">Developer</h2>
+    <div>Manage <%= link_to "personal access tokens", my_access_tokens_path, class: "btn btn--plain txt-link" %> used with the Fizzy developer API.</div>
+  </header>
+</section>
diff --git a/app/views/users/_data_export.html.erb b/app/views/users/_data_export.html.erb
index a6cd3bde8..2359fbbef 100644
--- a/app/views/users/_data_export.html.erb
+++ b/app/views/users/_data_export.html.erb
@@ -1,19 +1,21 @@
-<header class="margin-block-start-double">
-  <h2 class="divider txt-large">Export your data</h2>
-  <p class="margin-none-block">Download an archive of your Fizzy data.</p>
-</header>
+<section class="settings__section">
+  <header>
+    <h2 class="divider">Export your data</h2>
+    <div>Download an archive of your Fizzy data.</div>
+  </header>
 
-<div data-controller="dialog" data-dialog-modal-value="true">
-  <button type="button" class="btn" data-action="dialog#open">Begin export...</button>
+  <div data-controller="dialog" data-dialog-modal-value="true">
+    <button type="button" class="btn" data-action="dialog#open">Begin export...</button>
 
-  <dialog class="dialog panel panel--wide shadow" data-dialog-target="dialog">
-    <h2 class="margin-none txt-large">Export your data</h2>
-    <p class="margin-none-block-start">This will generate a ZIP archive of all cards you have access to.</p>
-    <p>When ready, we'll email you a download link (expires in 24 hours).</p>
+    <dialog class="dialog panel panel--wide shadow" data-dialog-target="dialog">
+      <h2 class="margin-none txt-large">Export your data</h2>
+      <p class="margin-none-block-start">This will generate a ZIP archive of all cards you have access to.</p>
+      <p>When ready, we'll email you a download link (expires in 24 hours).</p>
 
-    <div class="flex gap justify-center">
-      <%= button_to "Start export", user_data_exports_path(@user), method: :post, class: "btn btn--link", form: { data: { action: "submit->dialog#close" } } %>
-      <button type="button" class="btn" data-action="dialog#close">Cancel</button>
-    </div>
-  </dialog>
-</div>
+      <div class="flex gap justify-center">
+        <%= button_to "Start export", user_data_exports_path(@user), method: :post, class: "btn btn--link", form: { data: { action: "submit->dialog#close" } } %>
+        <button type="button" class="btn" data-action="dialog#close">Cancel</button>
+      </div>
+    </dialog>
+  </div>
+</section>
diff --git a/app/views/users/_theme.html.erb b/app/views/users/_theme.html.erb
index 0f7db9547..47300abef 100644
--- a/app/views/users/_theme.html.erb
+++ b/app/views/users/_theme.html.erb
@@ -1,5 +1,7 @@
-<section>
-  <strong class="divider txt-large">Appearance</strong>
+<section class="settings__section">
+  <header>
+    <h2 class="divider">Appearance</h2>
+  </header>
 
   <div class="theme-switcher flex gap max-width justify-center txt-small margin-block-start-half">
     <label class="btn theme-switcher__btn">
diff --git a/app/views/users/_transfer.html.erb b/app/views/users/_transfer.html.erb
index 13f895ebc..0744e862c 100644
--- a/app/views/users/_transfer.html.erb
+++ b/app/views/users/_transfer.html.erb
@@ -1,17 +1,14 @@
-<div class="flex flex-column gap align-center margin-block-double">
+<section class="settings__section">
   <% url = session_transfer_url(user.identity.transfer_id, script_name: nil) %>
 
-  <label class="flex flex-column gap full-width">
-    <header>
-      <strong class="divider txt-large">Devices</strong>
-      <p class="margin-none" id="session_transfer_label">Link to automatically log in on another device.</p>
-    </header>
-    <span class="flex align-center gap margin-inline">
-      <input type="text" class="input fill-white" id="session_transfer_url" value="<%= url %>" aria-labelledby="session_transfer_label" readonly>
-    </span>
-  </label>
+  <header>
+    <h2 class="divider">Devices</h2>
+    <p class="margin-none" id="session_transfer_label">Link to automatically log in on another device.</p>
+  </header>
 
-  <div class="flex align-center gap">
+  <input type="text" class="input fill-white" id="session_transfer_url" value="<%= url %>" aria-labelledby="session_transfer_label" readonly>
+
+  <div class="flex justify-center gap">
     <div data-controller="dialog" data-dialog-modal-value="true" class="flex-inline">
       <%= tag.button class: "btn", data: { action: "dialog#open", controller: "tooltip" } do %>
         <%= icon_tag "qr-code" %>
@@ -35,4 +32,4 @@
       <span class="for-screen-reader">Copy auto-login link</span>
     <% end %>
   </div>
-</div>
\ No newline at end of file
+</section>
diff --git a/app/views/users/show.html.erb b/app/views/users/show.html.erb
index 6a5cc2c02..0158eacac 100644
--- a/app/views/users/show.html.erb
+++ b/app/views/users/show.html.erb
@@ -1,8 +1,8 @@
 <% @page_title = @user.name %>
 <% me_or_you = Current.user == @user ? "me" : @user.first_name %>
 
-<div class="profile-layout">
-  <section class="panel shadow txt-align-center" style="--panel-size: 45ch;">
+<div class="settings settings--profile">
+  <div class="settings__panel panel shadow txt-align-center">
     <div class="flex flex-column gap position-relative">
       <% if Current.user == @user %>
         <%= link_to edit_user_path(@user), class: "user-edit-link btn", data: { controller: "tooltip" } do %>
@@ -46,15 +46,15 @@
         <% end %>
       <% end %>
     </div>
-  </section>
+  </div>
 
   <% if Current.user == @user %>
-    <section class="panel shadow" style="--panel-size: 45ch;">
+    <div class="settings__panel panel shadow">
       <%= render "users/theme" %>
       <%= render "users/transfer", user: @user %>
       <%= render "users/access_tokens" %>
       <%= render "users/data_export" %>
-    </section>
+    </div>
   <% end %>
 </div>