refs #1861 document totals mobile styling..

public/css/custom.css

@@ -736,6 +736,10 @@ table .align-items-center td span.badge {
     input[type=hidden].form-control.datepicker.input {
         display: none;
     }
+
+    .item-columns-edit {
+        margin-left: 23px !important;
+    }
 }
 /*--Xs Breakpoint Finish--*/
 
@@ -1495,3 +1499,48 @@ table .align-items-center td span.badge {
 #form-select-companies span.el-tag.el-tag--info.el-tag--small.el-tag--light {
     margin-top: -50px !important;
 }
+
+.document-50 {
+    width: 50%;
+}
+
+.document-30 {
+    width: 30%;
+}
+
+.document-25 {
+    width: 25%;
+}
+
+.document-40-px {
+    width: 40px;
+}
+
+@media (max-width: 575.98px) {
+    .document-50 {
+        width: 20%;
+    }
+
+    .document-30 {
+        width: 40%;
+    }
+    
+    .document-25 {
+        width: 35%;
+    }
+    
+    .document-40-px {
+        max-width: 1px;
+        width: 1px;
+        padding: 0;
+        margin: 0;
+    }
+
+    #invoice-total-rows td.border-bottom-0.pb-0,
+    #invoice-total-rows .border-top-0.pt-0.pb-0 {
+        max-width: 1px !important;
+        width: 1px !important;
+        padding: 0 !important;
+        margin: 0 !important;
+    }
+}

resources/views/components/documents/form/totals.blade.php

@@ -3,10 +3,10 @@
         <div class="table-responsive overflow-x-scroll overflow-y-hidden">
             <table class="table" id="totals">
                 <colgroup>
-                    <col style="width: 50%;">
-                    <col style="width: 30%;">
-                    <col style="width: 25%;">
-                    <col style="width: 40px;">
+                    <col class="document-50">
+                    <col class="document-30">
+                    <col class="document-25">
+                    <col class="document-40-px">
                 </colgroup>
                 <tbody id="invoice-total-rows" class="table-padding-05">
                     @stack('sub_total_td_start')