Merge pull request #1688 from basecamp/jz-11-21-25

JZ 11-21-25

app/assets/stylesheets/buttons.css

@@ -113,7 +113,12 @@
       span:last-of-type {
         display: none;
       }
+    }
+  }
 
+  @media (min-width: 640px) {
+    .btn--circle-mobile .icon--mobile-only {
+      display: none !important;
     }
   }
 
@@ -221,6 +226,7 @@
     }
   }
 
+
   /* Button groups
   /* ------------------------------------------------------------------------ */
 

app/assets/stylesheets/reactions.css

@@ -74,10 +74,14 @@
     gap: 0.25ch;
     max-inline-size: 100%;
     opacity: 1;
-    padding: 0.1em 0.12em;
-    postion: relative;
+    padding: 0.1em 0.36em 0.1em 0.12em;
+    position: relative;
     transition: opacity 100ms ease-in-out, transform 150ms ease-in-out;
 
+    &:has(span.txt-small.txt-medium) { /* emoji only reactions */
+      padding: 0.1em 0.12em;
+    }
+
     .btn {
       font-size: 0.6em;
       inline-size: auto;

app/assets/stylesheets/steps.css

@@ -33,7 +33,7 @@
       transform-origin: center;
       transition: 150ms transform ease-in-out;
     }
-    
+
     &:checked::before {
       transform: scale(1) rotate(10deg);
     }
@@ -73,6 +73,7 @@
 
       @supports (field-sizing: content) {
         field-sizing: content;
+        max-inline-size: 100%;
         min-inline-size: 15ch;
       }
     }

app/views/cards/assignments/new.html.erb

@@ -1,5 +1,5 @@
 <%= turbo_frame_tag @card, :assignment do %>
-  <%= tag.div class: "max-width", data: {
+  <%= tag.div class: "max-width full-width", data: {
 				action: "turbo:before-cache@document->dialog#close dialog:show@document->navigable-list#reset keydown->navigable-list#navigate filter:changed->navigable-list#reset",
 				controller: "filter navigable-list",
 				dialog_target: "dialog",
@@ -11,10 +11,8 @@
       <kbd class="txt-xx-small hide-on-touch">a</kbd>
     </div>
 
-    <% if @users.many? %>
-			<%= text_field_tag :search, nil, placeholder: "Filter…", class: "input input--transparent txt-small margin-block-half", autofocus: true,
-						type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", action: "input->filter#filter" } %>
-    <% end %>
+    <%= text_field_tag :search, nil, placeholder: "Filter…", class: "input input--transparent txt-small margin-block-half", autofocus: true,
+          type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", action: "input->filter#filter" } %>
 
     <ul class="popup__list" data-filter-target="list">
       <% @users.each do |user| %>

app/views/cards/container/_closure.html.erb

@@ -7,12 +7,21 @@
       <% end %>
     </div>
   <% else %>
-    <%= button_to card_closure_path(card), class: "btn borderless",
-        data: { controller: "hotkey", form_target: "submit", action: "keydown.d@document->hotkey#click" },
-        form: { data: { controller: "form" } } do %>
-      <span class="overflow-ellipsis">Mark as Done</span>
-      <kbd class="txt-x-small hide-on-touch">d</kbd>
-    <% end %>
+    <div class="flex gap-half">
+      <%= link_to edit_card_path(card), class: "btn btn--circle-mobile borderless", data: { controller: "hotkey", action: "keydown.e@document->hotkey#click" } do %>
+        <%= icon_tag "pencil", class: "icon--mobile-only" %>
+        <span>Edit</span>
+        <kbd class="txt-x-small hide-on-touch">e</kbd>
+      <% end %>
+
+      <%= button_to card_closure_path(card), class: "btn btn--circle-mobile borderless",
+          data: { controller: "hotkey", form_target: "submit", action: "keydown.d@document->hotkey#click" },
+          form: { data: { controller: "form" } } do %>
+        <%= icon_tag "check", class: "icon--mobile-only" %>
+        <span class="overflow-ellipsis">Mark as Done</span>
+        <kbd class="txt-x-small hide-on-touch">d</kbd>
+      <% end %>
+    </div>
 
     <div id="<%= dom_id(card, :closure_notice) %>">
       <% if card.entropic? && card.open? && !card.postponed? %>

app/views/cards/container/_title.html.erb

@@ -10,11 +10,6 @@
         <%= card.description %>
       </div>
     <% end %>
-
-    <%= link_to edit_card_path(card), class: "btn fit-content txt-small", data: { controller: "hotkey", action: "keydown.e@document->hotkey#click" } do %>
-      <span>Edit</span>
-      <kbd class="txt-x-small hide-on-touch">e</kbd>
-    <% end %>
   <% end %>
   </div>
 <% else %>

app/views/cards/display/perma/_steps.html.erb

@@ -3,8 +3,8 @@
 
   <li id="<%= dom_id(card, :new_step) %>" class="step">
     <input type="checkbox" class="step__checkbox" disabled>
-    <%= form_with model: [card, Step.new], url: card_steps_path(card), data: { controller: "form", action: "submit->form#preventEmptySubmit turbo:submit-end->form#reset" } do |form| %>
-      <%= form.text_field :content, class: "input step__content hide-focus-ring", placeholder: "Add a step…", autocomplete: "off", data: { form_target: "input" }, aria: { label: "Add a step" } %>
+    <%= form_with model: [card, Step.new], url: card_steps_path(card), class: "min-width", data: { controller: "form", action: "submit->form#preventEmptySubmit turbo:submit-end->form#reset" } do |form| %>
+      <%= form.text_field :content, class: "input step__content hide-focus-ring", placeholder: "Add a step…", autocomplete: "off", data: { form_target: "input", "1p-ignore": "true" }, aria: { label: "Add a step" } %>
     <% end %>
   </li>
 </ol>

app/views/cards/steps/edit.html.erb

@@ -3,7 +3,7 @@
     <%= form_with model: [@card, @step], class: "step", data: { controller: "form" } do |form| %>
       <%= form.check_box :completed, { class: "step__checkbox", checked: @step.completed?, disabled: true } %>
       <%= form.text_field :content, class: "input step__content step__content--edit hide-focus-ring", placeholder: "Name this step…", required: true, autofocus: true, autocomplete: "off",
-          data: { action: "keydown.esc->form#cancel focus->form#select" } %>
+          data: { action: "keydown.esc->form#cancel focus->form#select", "1p-ignore": "true" } %>
       <%= form.button type: "submit", class: "btn btn--positive txt-xx-small" do %>
         <%= icon_tag "check" %>
         <span class="for-screen-reader">Save changes</span>

app/views/join_codes/inactive.html.erb

@@ -1,12 +1,12 @@
-<% @page_title = "You can't join #{@join_code.account.name} right now." %>
+<% @page_title = "That code is all used up" %>
 
 <div class="panel panel--centered flex flex-column gap-half">
   <h1 class="txt-x-large font-weight-black margin-none"><%= @page_title %></h1>
 
-  <p class="txt-medium">This join code has no invitations left on it.</p>
+  <p class="txt-medium margin-none">Ask someone from <%= @join_code.account.name %> to send you a new link or increase the limit.</p>
 
   <p class="txt-medium">
-    <%= link_to "Check out Fizzy", "https://www.fizzy.do" %>.
+    <%= link_to "OK", "https://www.fizzy.do", class: "btn btn--link" %>
   </p>
 </div>
 

test/controllers/join_codes_controller_test.rb

@@ -25,7 +25,7 @@ class JoinCodesControllerTest < ActionDispatch::IntegrationTest
     get join_path(code: @join_code.code, script_name: @account.slug)
 
     assert_response :gone
-    assert_in_body "This join code has no invitations left on it"
+    assert_in_body "That code is all used up"
   end
 
   test "create" do