Use new turbo morph / scroll preserve option

When editing the forms on the user settings page this improves the
experience, as the scroll position is preserved between page
refreshes, making it easier to spot the validation errors if there are
any.

I've had to change the toast message so that it's always fixed in the
viewport on all screen sizes so that it is also always visible when
scroll position is preserved.

app/components/toast_component/toast_component.html.erb

@@ -1,4 +1,4 @@
-<div data-controller="toasts" class="flex flex-col items-center fixed z-10 sm:z-0 sm:absolute bottom-3 sm:top-3 w-full" role="alert" data-toasts-target="toast">
+<div data-controller="toasts" class="flex flex-col items-center z-20 fixed top-3 w-full" role="alert" data-toasts-target="toast">
   <div class="flex flex-row items-center bg-slate-50 gap-3 max-w-xs p-4 bg-white sm:shadow shadow-lg border-l-4 <%= type_class %>">
     <%= @message %>
 

app/views/layouts/application.html.erb

@@ -14,6 +14,7 @@
     <% if Rails.env.production? %>
       <script defer data-domain="jam.coop" src="https://plausible.io/js/script.js"></script>
     <% end %>
+    <%= turbo_refreshes_with method: :morph, scroll: :preserve %>
     <%= yield :head %>
   </head>