Nicer buttons on small screens

README.md

@@ -45,11 +45,6 @@ manual LDIF imports etc. (or provide a staging instance)
 
 * [Tailwind CSS](https://tailwindcss.com/)
 
-**Caveat:** if you only add Tailwind classes/directives to templates or
-helpers, but there's no change in the stylesheet files, then the new directives
-won't be compiled in production. In this case, count up the version comment at
-the top of `app/javascript/stylesheets/application.scss` to trigger compilation.
-
 ### Testing
 
 * [RSpec](https://rspec.info/documentation/)

app/assets/stylesheets/components/buttons.css

@@ -1,6 +1,6 @@
 @layer components {
   .btn {
-    @apply font-semibold rounded-md leading-none cursor-pointer
+    @apply font-semibold rounded-md leading-none cursor-pointer text-center
            transition-colors duration-75 focus:outline-none focus:ring-4;
   }
 

app/views/signup/index.html.erb

@@ -10,6 +10,7 @@
     by invitation. Seems like you have good friends!
   </p>
   <p class="mt-12">
-    <%= link_to "Get started", signup_steps_path(1), class: "btn btn-md btn-blue" %>
+    <%= link_to "Get started", signup_steps_path(1),
+          class: "btn-md btn-blue block w-full md:inline-block md:w-auto" %>
   </p>
 <% end %>

app/views/signup/steps.html.erb

@@ -1,8 +1,8 @@
 <%= render HeaderCompactComponent.new(title: "Signup") %>
 
 <%= render MainCompactComponent.new do %>
-  <% case @step %>
-  <% when 1 %>
+  <% case @step
+     when 1 %>
     <h2>Choose a username</h2>
     <%= form_for @user, :url => signup_validate_url do |f| %>
       <p>
@@ -16,7 +16,8 @@
         <p class="error-msg">Username <%= @validation_error %></p>
       <% end %>
       <p class="mt-12">
-        <%= f.submit "Continue", class: 'btn btn-md btn-blue' %>
+        <%= f.submit "Continue",
+              class: "btn-md btn-blue block w-full md:inline-block md:w-auto" %>
       </p>
     <% end %>
 
@@ -32,7 +33,8 @@
         <p class="error-msg">Email <%= @validation_error %></p>
       <% end %>
       <p class="mt-12">
-        <%= f.submit "Continue", class: 'btn btn-md btn-blue' %>
+        <%= f.submit "Continue",
+              class: "btn-md btn-blue block w-full md:inline-block md:w-auto" %>
       </p>
     <% end %>
 
@@ -53,7 +55,8 @@
         and Privacy Policy. Don't worry, they will be excellent!
       </p>
       <p class="mt-8">
-        <%= f.submit "Create account", class: 'btn-md btn-blue' %>
+        <%= f.submit "Create account",
+              class: "btn-md btn-blue block w-full md:inline-block md:w-auto" %>
       </p>
     <% end %>
   <% end %>