From 881946ae7919cd6cdc900143b0d65b732e4b420d Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Fri, 31 Oct 2025 15:24:28 -0500
Subject: [PATCH] Put profile boxes side-by-side

---
 app/assets/stylesheets/profile-layout.css | 16 +++++
 app/views/users/show.html.erb             | 76 ++++++++++++-----------
 2 files changed, 57 insertions(+), 35 deletions(-)
 create mode 100644 app/assets/stylesheets/profile-layout.css

diff --git a/app/assets/stylesheets/profile-layout.css b/app/assets/stylesheets/profile-layout.css
new file mode 100644
index 000000000..bb18c2655
--- /dev/null
+++ b/app/assets/stylesheets/profile-layout.css
@@ -0,0 +1,16 @@
+@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/views/users/show.html.erb b/app/views/users/show.html.erb
index 62f1847f2..9e49972f1 100644
--- a/app/views/users/show.html.erb
+++ b/app/views/users/show.html.erb
@@ -4,48 +4,54 @@
   <%= render "my/menus/menu" %>
 <% end %>
 
-<div class="panel shadow center txt-align-center margin-block-end-double" style="--panel-size: 45ch;">
-  <div class="flex flex-column gap position-relative">
-    <% if Current.user == @user %>
-      <%= link_to edit_user_path(@user), class: "user-edit-link btn" do %>
-        <%= icon_tag "pencil" %>
-        <span class="for-screen-reader">Edit</span>
-      <% end %>
-    <% end %>
-
-    <div class="avatar txt-xx-large center fill-white btn--circle hide-focus-ring">
-      <%= image_tag user_avatar_path(@user), alt: "Profile avatar for #{@user.name}" %>
-    </div>
-
-    <div class="flex flex-column gap-half margin-block-end">
-      <h1 class="txt-x-large margin-none"><%= @user.name %></h1>
-      <div class="txt-medium">
-        <% if @user.active? %>
-          <%= mail_to @user.email_address %>
-        <% else %>
-          <%= @user.name %> is no longer on this account
+<div class="profile-layout">
+  <section class="panel shadow txt-align-center" style="--panel-size: 45ch;">
+    <div class="flex flex-column gap position-relative">
+      <% if Current.user == @user %>
+        <%= link_to edit_user_path(@user), class: "user-edit-link btn" do %>
+          <%= icon_tag "pencil" %>
+          <span class="for-screen-reader">Edit</span>
         <% end %>
+      <% end %>
+
+      <div class="avatar txt-xx-large center fill-white btn--circle hide-focus-ring">
+        <%= image_tag user_avatar_path(@user), alt: "Profile avatar for #{@user.name}" %>
+      </div>
+
+      <div class="flex flex-column gap-half margin-block-end">
+        <h1 class="txt-x-large margin-none"><%= @user.name %></h1>
+        <div class="txt-medium">
+          <% if @user.active? %>
+            <%= mail_to @user.email_address %>
+          <% else %>
+            <%= @user.name %> is no longer on this account
+          <% end %>
+        </div>
+      </div>
+
+      <div class="flex-inline center justify-center flex-wrap gap">
+        <%= link_to "Which cards are assigned to #{ Current.user == @user ? "me" : @user.first_name }?", cards_path(assignee_ids: [@user.id], sorted_by: "newest"), class: "btn", data: { turbo_frame: "_top" } %>
+        <%= link_to "Which cards were added by #{ Current.user == @user ? "me" : @user.first_name }?", cards_path(creator_ids: [@user.id], sorted_by: "newest"), class: "btn", data: { turbo_frame: "_top" } %>
       </div>
     </div>
+  </section>
 
-    <div class="flex-inline center justify-center flex-wrap gap">
-      <%= link_to "Which cards are assigned to #{ Current.user == @user ? "me" : @user.first_name }?", cards_path(assignee_ids: [@user.id], sorted_by: "newest"), class: "btn", data: { turbo_frame: "_top" } %>
-      <%= link_to "Which cards were added by #{ Current.user == @user ? "me" : @user.first_name }?", cards_path(creator_ids: [@user.id], sorted_by: "newest"), class: "btn", data: { turbo_frame: "_top" } %>
-    </div>
-  </div>
+  <% if Current.user == @user %>
+    <section class="panel shadow" style="--panel-size: 45ch;">
+      <%= render "users/transfer", user: @user %>
+
+      <div class="center margin-block-start-double">
+        <%= button_to session_url(script_name: nil), method: :delete, class: "btn btn--plain txt-link txt-small", data: { turbo: false } do %>
+        <span>Sign out</span>
+      <% end %>
+      </div>
+    </section>
+  <% end %>
 </div>
 
-<% if Current.user == @user %>
-  <div class="panel shadow center margin-block-double" style="--panel-size: 45ch;">
-    <%= render "users/transfer", user: @user %>
 
-    <div class="center margin-block-start-double">
-      <%= button_to session_url(script_name: nil), method: :delete, class: "btn btn--plain txt-link txt-small", data: { turbo: false } do %>
-      <span>Sign out</span>
-    <% end %>
-    </div>
-  </div>
-<% end %>
+
+
 
 <h1 class="font-weight-black txt-large margin-block-double"><%= "What #{ Current.user == @user ? "have you" : "has #{ @user.first_name }" } been up to?" %></h1>