From 874d0af0c6533fe8d0acc7daf6d75ab564c21b49 Mon Sep 17 00:00:00 2001
From: joneff <joneff@gmail.com>
Date: Mon, 29 Nov 2021 11:13:00 +0200
Subject: [PATCH] fix(gantt): use box-sizing border box for task and milestones

---
 packages/default/scss/gantt/_layout.scss | 7 +++++--
 tests/visual/src/misc/gantt-react.html   | 4 ++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/default/scss/gantt/_layout.scss b/packages/default/scss/gantt/_layout.scss
index f68a1aafb76..a0a2c8f0f39 100644
--- a/packages/default/scss/gantt/_layout.scss
+++ b/packages/default/scss/gantt/_layout.scss
@@ -121,10 +121,11 @@
                 background: none;
 
                 .k-task-milestone-content {
-                    width: .875em;
-                    height: .875em;
+                    width: 100%;
+                    height: 100%;
                     border-width: 1px;
                     border-style: solid;
+                    box-sizing: border-box;
                     transform: rotate(45deg);
                 }
             }
@@ -455,6 +456,7 @@
         height: 1em;
         border-width: 1px;
         border-style: solid;
+        box-sizing: border-box;
         transform: rotate(45deg);
     }
 
@@ -507,6 +509,7 @@
         @include border-radius( $border-radius );
         border-width: $gantt-task-border-width;
         border-style: solid;
+        box-sizing: border-box;
         cursor: default;
 
         .k-resize-handle {
diff --git a/tests/visual/src/misc/gantt-react.html b/tests/visual/src/misc/gantt-react.html
index 84130712c19..3e252dfea5e 100644
--- a/tests/visual/src/misc/gantt-react.html
+++ b/tests/visual/src/misc/gantt-react.html
@@ -203,8 +203,8 @@
                                     Market Research
                                 </td>
                                 <td>
-                                    <div class="k-task k-task-single" style="left: 83px; top: 8px; width: 8px;">
-                                        <div class="k-task-complete" style="width: 7px;"></div>
+                                    <div class="k-task k-task-single" style="left: 83px; top: 8px; width: 200px;">
+                                        <div class="k-task-complete" style="width: 50px;"></div>
                                         <div class="k-task-content">Market Research</div>
                                         <span class="k-task-actions">
                                             <a class="k-link k-task-delete">