Making table stackable

Author: daretobedifferent18

app/templates/components/public/ticket-list.hbs

@@ -1,11 +1,11 @@
 {{!-- Removed `Currency Symbol` helper from the `paymentCurrency` since some currency are not getting rendered. Hotfix until a permanent solution found --}}
 <form class="ui form" {{action on='submit' preventDefault=true}}>
-  <table class="ui unstackable very basic compact table" style="margin-bottom: 0">
+  <table class="ui stackable very basic compact table" style="margin-bottom: 0">
     <thead class="full-width">
       <tr>
         <th>{{t 'Type'}}</th>
+        <th class="three wide"></th>
         <th class="ui four wide single line">{{t 'Price'}}</th>
-        <th class="one wide"></th>
         <th class="one wide">{{t 'Quantity'}}</th>
         <th class="ui right aligned two wide">{{t 'Subtotal'}}</th>
       </tr>
@@ -31,9 +31,10 @@
                 <small class="ui gray-text small">Sale ends on {{moment-format ticket.salesEndsAt 'ddd, DD MMMM YY, h:mm A'}}</small>
               </div>
             </td>
+            <td></td>
             <td id="{{ticket.id}}_price">
               {{#if (eq ticket.type 'donation') }}
-                <div>
+                <div class="field m-0">
                   <div class="ui labeled input">
                     <label for="i_{{ticket.id}}_price" class="ui label">{{currency-symbol this.eventCurrency}}</label>
                     <Input
@@ -76,7 +77,6 @@
                 </p>
               {{/if}}
             </td>
-            <td></td>
             <td>
               <div class="field">
                 <UiDropdown