Refactor vehicle views for improved formatting and note handling

app/views/vehicles/_details.html.erb

@@ -1,13 +1,12 @@
 <div class="issue">
   <div class="splitcontent">
     <div class="splitcontentleft">
-      <h4><%=t(:label_details)%>:</h4>
+      <h4><%= t(:label_details) %>:</h4>
       
       <table>
         <tbody>
-
           <tr>
-            <th><%= t(:field_customer)%></th>
+            <th><%= t(:field_customer) %></th>
             <td><%= vehicle.customer ? link_to(vehicle.customer.name, customer_path(vehicle.customer)) : t(:no_customer) %></td>
           </tr>
         
@@ -19,39 +18,33 @@
           <tr>
             <th><%= t(:field_vin) %></th>
             <td>
-               <div onclick="handleCopy(event)"><%= @vin[0] if @vin %><b><%=@vin[1] if @vin%></b></div>
+               <div onclick="handleCopy(event)"><%= @vin[0] if @vin %><b><%= @vin[1] if @vin %></b></div>
             </td>
           </tr>
-          
-          <th><%= t(:label_trim) %></th>
-            <td><%= vehicle.doors %> <%=t(:label_door) if vehicle.doors? %> <%= vehicle.trim %></td>
+
+          <tr>
+            <th><%= t(:label_trim) %></th>
+            <td><%= vehicle.doors %> <%= t(:label_door) if vehicle.doors? %> <%= vehicle.trim %></td>
           </tr>
         </tbody>
       </table>
-      
     </div>
 
-    <div class="splitcontentleft">
-
-      <h4><%=t(:field_notes)%>:</h4>
-        <pre id="note-display" style="text-align: left; white-space: pre-wrap; font-family: inherit; ">
-          <td><%= vehicle.notes %></td>
-        </pre>
-      </tr>
-
-      <script>
-        const preElement = document.getElementById('note-display');
-        // This takes the text, trims the edges, and puts it back
-        preElement.textContent = preElement.textContent.trim();
-      </script>
-
+    <div class="splitcontentright">
+      <h4><%= t(:field_notes) %>:</h4>
+      <div class="vehicle_notes attribute">
+        <div class="label"><%= t(:field_notes) %>:</div>
+        <% if vehicle.notes.present? %>
+          <div class="value wiki">
+            <%= textilizable(vehicle, :notes) %>
+          </div>
+        <% end %>
+      </div>
     </div>
   </div>
 </div>
 
-<% 
-  mileage = vehicle.last_service_mileage
-%>
+<% mileage = vehicle.last_service_mileage %>
 
 <% if mileage %>
   <p>
@@ -61,6 +54,6 @@
 <% end %>
 
 <div style="float: right;">
-  <%= button_to t(:label_edit), edit_vehicle_path(vehicle), method: :get%> 
-  <%= button_to t(:label_delete), vehicle, method: :delete, data: {confirm: t(:warn_ru_sure)} %> 
-</div>
+  <%= button_to t(:label_edit), edit_vehicle_path(vehicle), method: :get %> 
+  <%= button_to t(:label_delete), vehicle, method: :delete, data: { confirm: t(:warn_ru_sure) } %> 
+</div>