From 27e52525f7d04cebca371d99bd5fc92fabc6f475 Mon Sep 17 00:00:00 2001
From: Burak Civan <burakcivan22@gmail.com>
Date: Tue, 11 Oct 2022 11:51:27 +0300
Subject: [PATCH] add item responsive control

---
 public/css/app.css                            | 22 ++++++++++++++-----
 resources/assets/sass/app.css                 | 14 +++++++++++-
 .../components/documents/form/items.blade.php |  6 ++---
 .../documents/form/line-item.blade.php        |  8 ++++---
 4 files changed, 38 insertions(+), 12 deletions(-)

diff --git a/public/css/app.css b/public/css/app.css
index 9d5d2828f..c27fbff75 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -47241,13 +47241,25 @@ html[dir="rtl"] .lines-radius-border thead td:last-child {
 
 @media only screen and (max-width: 480px) {
     .small-table-width {
-        width: 450px;
+        width: 550px;
     }
 
     .small-col {
         width: auto !important;
     }
 
+    .description-col {
+        width: 180px !important
+    }
+
+    .amount-col {
+        width: 70px !important;
+    }
+
+    .name-col {
+        width: 6rem !important
+    }
+
     .information-content {
         -webkit-transform: unset !important;
                 transform: unset !important;
@@ -50074,6 +50086,10 @@ body{
     width: 66.666667%;
   }
 
+  .lg\:w-auto{
+    width: auto;
+  }
+
   .lg\:w-1\/4{
     width: 25%;
   }
@@ -50094,10 +50110,6 @@ body{
     width: 24rem;
   }
 
-  .lg\:w-auto{
-    width: auto;
-  }
-
   .lg\:w-2\/4{
     width: 50%;
   }
diff --git a/resources/assets/sass/app.css b/resources/assets/sass/app.css
index 97c9b1402..05539f088 100644
--- a/resources/assets/sass/app.css
+++ b/resources/assets/sass/app.css
@@ -529,13 +529,25 @@ html[dir="rtl"] .lines-radius-border thead td:last-child {
 
 @media only screen and (max-width: 480px) {
     .small-table-width {
-        width: 450px;
+        width: 550px;
     }
 
     .small-col {
         width: auto !important;
     }
 
+    .description-col {
+        width: 180px !important
+    }
+
+    .amount-col {
+        width: 70px !important;
+    }
+
+    .name-col {
+        width: 6rem !important
+    }
+
     .information-content {
         transform: unset !important;
         margin-top: 70px !important;
diff --git a/resources/views/components/documents/form/items.blade.php b/resources/views/components/documents/form/items.blade.php
index f6d2d01dd..dad64e7e2 100644
--- a/resources/views/components/documents/form/items.blade.php
+++ b/resources/views/components/documents/form/items.blade.php
@@ -4,11 +4,11 @@
             <table class="small-table-width" id="items">
                 <colgroup>
                     <col class="small-col" style="width: 24px;">
-                    <col class="small-col" style="width: 20%;">
-                    <col class="small-col" style="width: 30%;">
+                    <col class="small-col name-col" style="width: 20%;">
+                    <col class="small-col description-col" style="width: 30%;">
                     <col class="small-col" style="width: 12%;">
                     <col class="small-col" style="width: 15%;">
-                    <col class="small-col" style="width: 20%;">
+                    <col class="small-col amount-col" style="width: 20%;">
                     <col class="small-col" style="width: 24px;">
                 </colgroup>
 
diff --git a/resources/views/components/documents/form/line-item.blade.php b/resources/views/components/documents/form/line-item.blade.php
index 99cea16db..a4f169718 100644
--- a/resources/views/components/documents/form/line-item.blade.php
+++ b/resources/views/components/documents/form/line-item.blade.php
@@ -8,10 +8,10 @@
             <colgroup>
                 <col class="small-col" style="width: 24px;">
                 <col class="small-col" style="width: 20%;">
-                <col class="small-col" style="width: 30%;">
+                <col class="small-col description-col" style="width: 30%;">
                 <col class="small-col" style="width: 12%;">
                 <col class="small-col" style="width: 15%;">
-                <col class="small-col" style="width: 20%;">
+                <col class="small-col amount-col" style="width: 20%;">
                 <col class="small-col" style="width: 24px;">
             </colgroup>
 
@@ -30,7 +30,9 @@
 
                         <td class="px-3 py-3 ltr:pl-2 rtl:pr-2 ltr:text-left rtl:text-right align-middle border-b-0 name">
                             @if (! $hideItemName)
-                                <span class="flex items-center text-sm" tabindex="0" v-html="row.name" v-if="row.item_id"></span>
+                                <span class="flex items-center text-sm" tabindex="0" v-if="row.item_id">
+                                    <div v-html="row.name" class="w-20 lg:w-auto truncate"></div>
+                                </span>
 
                                 <div v-else>
                                     @stack('name_input_start')