Fix on alignement on Topic form

Author: Oli0li

app/views/topics/_form.html.erb

@@ -67,18 +67,18 @@
             <small class="flex-fill text-end fw-light text-muted text-uppercase">Press enter to add a new tag</small>
           </div>
           <p>Please note: For any tag you add or remove, its cognates are also added or removed.</p>
-        <%= f.select :tag_list,
-                     options_from_collection_for_select(
-                       ActsAsTaggableOn::Tag.all&.order(name: :asc),
-                       :name,
-                       :name,
-                       topic.tag_list
-                     ),
-                     { prompt: "Select tags", include_blank: true },
-                     multiple: true,
-                     style: "width: 100%; min-height: 120px; padding: 0.75rem 1rem; border: 2px solid #e5e7eb; border-radius: 0.5rem; font-size: 0.875rem; transition: all 0.2s; background: #f9fafb;",
-                     data: { "allow-new": "true", "allow-clear": "true", "select-tags-target": "tagList" }
-        %>
+          <%= f.select :tag_list,
+                      options_from_collection_for_select(
+                        ActsAsTaggableOn::Tag.all&.order(name: :asc),
+                        :name,
+                        :name,
+                        topic.tag_list
+                      ),
+                      { prompt: "Select tags", include_blank: true },
+                      multiple: true,
+                      style: "width: 100%; min-height: 120px; padding: 0.75rem 1rem; border: 2px solid #e5e7eb; border-radius: 0.5rem; font-size: 0.875rem; transition: all 0.2s; background: #f9fafb;",
+                      data: { "allow-new": "true", "allow-clear": "true", "select-tags-target": "tagList" }
+          %>
         </div>
         <p style="margin-top: 0.5rem; font-size: 0.75rem; color: #6b7280;">Add relevant tags to help users discover this content. You can select existing tags or create new ones.</p>
       </div>
@@ -99,30 +99,28 @@
           <%= f.hidden_field :documents, multiple: true, value: document.signed_id, data: { upload_target: "hiddenField" } %>
         <% end %>
 
-          <%= f.file_field :documents, multiple: true, class: "form-control mt-4", id: "documents", data: { upload_target: "filesInput", action: "change->upload#uploadFile" } %>
+        <%= f.file_field :documents, multiple: true, class: "form-control mt-4", id: "documents", data: { upload_target: "filesInput", action: "change->upload#uploadFile" } %>
 
-          <div class="d-none" data-upload-target="spinner">
-            <div class="spinner-border spinner-border-sm mt-4" role="status">
-              <span class="visually-hidden">Uploading in progress...</span>
-            </div>
-            <span>Uploading in progress...</span>
+        <div class="d-none" data-upload-target="spinner">
+          <div class="spinner-border spinner-border-sm mt-4" role="status">
+            <span class="visually-hidden">Uploading in progress...</span>
           </div>
+          <span>Uploading in progress...</span>
+        </div>
 
-          <div class="col-12 d-flex justify-content-end mt-4">
-            <%= f.submit class: "btn btn-primary me-1 mb-1", data: { upload_target: "submitButton" } %>
-            <%= link_to "Cancel Editing", topics_path, class: "btn btn-light-secondary me-1 mb-1" %>
-          </div>
+        <div class="col-12 d-flex justify-content-end mt-4">
+          <%= f.submit class: "btn btn-primary me-1 mb-1", data: { upload_target: "submitButton" } %>
+          <%= link_to "Cancel Editing", topics_path, class: "btn btn-light-secondary me-1 mb-1" %>
         </div>
       </div>
     </div>
 
     <div style="display: flex; justify-content: space-between; align-items: center; padding-top: 2rem; border-top: 1px solid #f3f4f6; margin-top: 2rem;">
       <div style="display: flex; gap: 1rem;">
-    <%= f.submit "Save Topic",
-      style: "background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; font-weight: 600; padding: 0.75rem 2rem; border-radius: 0.5rem; border: none; cursor: pointer; font-size: 0.875rem; box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.3); transition: all 0.2s;" %>
-    <%= link_to "Back to Topics", topics_path,
-      class: "topic-form-cancel-btn",
-      style: "background: #f3f4f6; color: #6b7280; font-weight: 600; padding: 0.75rem 2rem; border-radius: 0.5rem; text-decoration: none; font-size: 0.875rem; transition: all 0.2s; display: inline-block;" %>
+        <%= f.submit "Save Topic", style: "background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; font-weight: 600; padding: 0.75rem 2rem; border-radius: 0.5rem; border: none; cursor: pointer; font-size: 0.875rem; box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.3); transition: all 0.2s;" %>
+        <%= link_to "Back to Topics", topics_path,
+          class: "topic-form-cancel-btn",
+          style: "background: #f3f4f6; color: #6b7280; font-weight: 600; padding: 0.75rem 2rem; border-radius: 0.5rem; text-decoration: none; font-size: 0.875rem; transition: all 0.2s; display: inline-block;" %>
       </div>
 
       <% if topic.persisted? %>

app/views/topics/edit.html.erb

@@ -2,7 +2,7 @@
 
 <div style="min-height: 100vh; background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); padding: 2rem 0;">
   <div style="max-width: 1200px; margin: 0 auto; padding: 0 1rem;">
-    
+
     <!-- Header Section -->
     <div style="margin-bottom: 2rem;">
       <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem;">
@@ -18,7 +18,7 @@
           <%= @topic.title %>
         </div>
       </div>
-      
+
       <!-- Breadcrumb -->
       <nav style="font-size: 0.875rem; color: #6b7280;">
         <ol style="display: flex; gap: 0.5rem; list-style: none; padding: 0; margin: 0;">
@@ -35,7 +35,7 @@
 
     <!-- Main Form Card -->
     <div style="background: white; border-radius: 1rem; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); overflow: hidden;">
-      
+
       <!-- Card Header -->
       <div style="background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); padding: 2rem; color: white;">
         <div style="display: flex; align-items: center; gap: 1rem;">
@@ -52,7 +52,7 @@
           </div>
         </div>
       </div>
-      
+
       <!-- Form Content -->
       <div style="padding: 2rem;">
         <%= render "form", topic: @topic, errors: @errors %>
@@ -68,7 +68,7 @@
         </svg>
         View Topic Details
       <% end %>
-      
+
       <%= link_to topics_path, style: "background: #f3f4f6; color: #6b7280; font-weight: 600; padding: 0.75rem 1.5rem; border-radius: 0.5rem; text-decoration: none; font-size: 0.875rem; transition: all 0.2s; display: inline-flex; align-items: center; gap: 0.5rem;" do %>
         <svg style="width: 1rem; height: 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"/>
@@ -101,7 +101,7 @@
               <span style="font-weight: 500; color: #374151;">Tags:</span> <%= @topic.tags.count %> assigned
             </div>
             <div>
-              <span style="font-weight: 500; color: #374151;">Status:</span> 
+              <span style="font-weight: 500; color: #374151;">Status:</span>
               <span style="<%= @topic.archived? ? 'color: #dc2626;' : 'color: #059669;' %>"><%= @topic.archived? ? 'Archived' : 'Active' %></span>
             </div>
             <div>