Refactor form input styles

* Fix issue where button is rendered taller in flexbox, due to default
  margin on input elements
* Refactor/improve all login and signup views

app/views/devise/sessions/new.html.erb

@@ -3,19 +3,21 @@
 <%= render MainCompactComponent.new do %>
   <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
     <%= render "devise/shared/error_messages", resource: resource %>
+    <div class="mb-6">
+      <%= f.label :cn, 'User', class: 'block mb-2 font-bold' %>
+      <p class="flex gap-2 items-center">
+        <%= f.text_field :cn, autofocus: true, autocomplete: "username",
+                              required: true, class: "relative grow"%>
+        <span class="relative shrink-0 text-gray-500">@ kosmos.org</span>
+      </p>
+    </div>
     <p>
-      <%= f.label :cn, 'User', class: 'block' %>
-      <%= f.text_field :cn, autofocus: true, autocomplete: "username",
-                            class: "w-full md:w-3/5"%>
-      <span class="ml-1 text-gray-500">@ kosmos.org</span>
-    </p>
-    <p>
-      <%= f.label :password, class: 'block' %>
+      <%= f.label :password, class: 'block mb-2 font-bold' %>
       <%= f.password_field :password, autocomplete: "current-password",
-                                      class: "w-full md:w-3/5"%>
+                                      required: true, class: "w-full"%>
     </p>
     <p class="mt-8">
-      <%= f.submit "Log in", class: 'btn-md btn-blue w-full sm:w-auto' %>
+      <%= f.submit "Log in", class: 'btn-md btn-blue w-full' %>
     </p>
   <% end %>