add css rules to make overflow text shorten with ellipsis

app/webpacker/css/darkswarm/_shop-inputs.scss

@@ -5,6 +5,12 @@
   .row .columns.variant-quantity-column {
     padding-left: 0;
   }
+
+  @media screen and (max-width: 425px) {
+    .row .columns.variant-quantity-column {
+      width: fit-content;
+    }
+  }
 }
 
 .reveal-modal.product-bulk-modal {

app/webpacker/css/darkswarm/_shop-product-rows.scss

@@ -22,6 +22,8 @@
 
       // ROW VARIANTS
       .row.variants {
+        display: flex;
+
         margin: 0 0 1em 0;
 
         &.out-of-stock {
@@ -33,6 +35,7 @@
           padding-top: .74em;
         }
         .variant-price {
+          flex: 1;
           padding-top: .65em;
         }
 
@@ -67,12 +70,21 @@
           margin-top: 15px;
           position: relative;
           left: -1px;
+
+          span.unit_price_unit {
+            width: 100%;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+          }
+
         }
 
         // Total price
         .total-price {
           padding-left: 0rem;
           color: $disabled-med;
+          width: fit-content;
 
           .filled {
             color: $med-drk-grey;
@@ -82,6 +94,20 @@
             display: none;
           }
         }
+
+        @media screen and (max-width: 425px) {
+          .variant-price {
+            flex: 1;
+          }
+
+          .variant-unit-price span.unit_price_unit { // creates an ellipsis when text overflow div size
+              width: 100%;
+              line-height: 1;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              overflow: hidden;
+          }
+        }
       }
 
       // ROW SUMMARY