From ad0d848f5e77a028103fdacba48a1beb629a8ebb Mon Sep 17 00:00:00 2001
From: Guillaume Chau <guillaume.b.chau@gmail.com>
Date: Sun, 4 Feb 2024 22:09:44 +0100
Subject: [PATCH] feat(timline): improved scrollbar design

---
 .../src/features/timeline/TimelineScrollbar.vue    | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/app-frontend/src/features/timeline/TimelineScrollbar.vue b/packages/app-frontend/src/features/timeline/TimelineScrollbar.vue
index 0f6ee7d15..67312e757 100644
--- a/packages/app-frontend/src/features/timeline/TimelineScrollbar.vue
+++ b/packages/app-frontend/src/features/timeline/TimelineScrollbar.vue
@@ -153,7 +153,7 @@ export default defineComponent({
 <template>
   <div
     ref="el"
-    class="h-6 bg-gray-200 dark:bg-gray-900 relative select-none"
+    class="h-6 bg-gray-200 dark:bg-gray-900 rounded relative select-none"
   >
     <!-- Main Bar -->
     <div
@@ -162,8 +162,8 @@ export default defineComponent({
         'bg-green-100 dark:bg-green-800': moving
       }"
       :style="{
-        left: `${(start - min) / (max - min) * 100}%`,
-        width: `${(end - start) / (max - min) * 100}%`
+        left: `calc(${(start - min) / (max - min) * 100}% - 1px)`,
+        width: `calc(${(end - start) / (max - min) * 100}% + 1px)`
       }"
       @mousedown="onMainBarMouseDown"
     />
@@ -172,8 +172,8 @@ export default defineComponent({
     <div
       class="absolute h-full rounded top-0 bg-green-300 dark:bg-green-700 cursor-ew-resize"
       :style="{
-        left: `calc(${startRatio * 100}% - ${startRatio < 0.05 ? 0 : 6}px)`,
-        width: '6px'
+        left: `calc(${startRatio * 100}% - ${startRatio < 0.05 ? 0 : 4}px)`,
+        width: '4px'
       }"
       @mousedown="onStartHandleMouseDown"
     />
@@ -182,8 +182,8 @@ export default defineComponent({
     <div
       class="absolute h-full rounded top-0 bg-green-300 dark:bg-green-700 cursor-ew-resize"
       :style="{
-        right: `calc(${endRatio * 100}% - ${endRatio < 0.05 ? 0 : 6}px)`,
-        width: '6px'
+        right: `calc(${endRatio * 100}% - ${endRatio < 0.05 ? 0 : 4}px)`,
+        width: '4px'
       }"
       @mousedown="onEndHandleMouseDown"
     />