From a4f4503fafb6e6616ac26ce113e5563388a7ee8c Mon Sep 17 00:00:00 2001
From: PMKuipers <pm@miqra.nl>
Date: Sat, 8 Jul 2023 07:51:48 +0200
Subject: [PATCH] Scrolling fixes (arrows,etc)

---
 amd/src/studyplan-editor-components.js | 10 ++++------
 css/devstyles.css                      | 23 +++++++++++++++++++++--
 2 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/amd/src/studyplan-editor-components.js b/amd/src/studyplan-editor-components.js
index 8eca54a..e848a1a 100644
--- a/amd/src/studyplan-editor-components.js
+++ b/amd/src/studyplan-editor-components.js
@@ -1348,7 +1348,8 @@ export default {
                         ></t-studyline-heading>
                     </div>
                     <!-- Next, paint all the cells in the scrollable -->
-                    <div class="t-studyplan-scrollable" :style="columns_stylerule">
+                    <div class="t-studyplan-scrollable" >
+                        <div class="t-studyplan-timeline" :style="columns_stylerule">
                         <!-- Line by line add the items -->
                         <!-- The grid layout handles putting it in rows and columns -->
                         <template v-for="(line,lineindex) in value.studylines"
@@ -1372,12 +1373,9 @@ export default {
                                     >
                                 </t-studyline-slot
                             ></template
-                        ></template>
+                        ></template
+                        ></div><div :id="'studyplan-linewrapper-'+value.id" class='l-leaderline-linewrapper'></div>
                     </div>
-                    <div class='t-studyplan-content-timeline'>
-
-                    </div>
-                    <div :id="'studyplan-linewrapper-'+value.id" class='l-leaderline-linewrapper'></div>
                 </div>
                 <div v-if="edit.studyline.editmode" class='t-studyline-add'>
                     <a href="#" v-b-modal="'modal-add-studyline-'+value.id" @click="false;"
diff --git a/css/devstyles.css b/css/devstyles.css
index 8371686..ddecbb3 100644
--- a/css/devstyles.css
+++ b/css/devstyles.css
@@ -25,15 +25,34 @@
     display: block;
 }
 
-.t-studyplan-scrollable {
+.t-studyplan-timeline {
     display: grid;
-    overflow-x: scroll;
     /* grid-template-columns will be set in the style attribute */
     /* Use the variables below to specify width for filter spots and course spots */
     --studyplan-filter-width: auto; /* better leave this at auto for now*/
     --studyplan-course-width: auto; /* better leave this at auto for now*/
 }
 
+.t-studyplan-scrollable {
+    overflow-x: scroll;
+
+  	scrollbar-color: var(--primary) color-mix(in srgb, var(--primary) 20%, white);
+  	scrollbar-width: thin;
+}
+.t-studyplan-scrollable::-webkit-scrollbar {
+  width: 8px;
+}
+
+/* Track */
+.t-studyplan-scrollable::-webkit-scrollbar-track {
+  background:  color-mix(in srgb, var(--primary) 20%, white);
+}
+ 
+/* Handle */
+.t-studyplan-scrollable::-webkit-scrollbar-thumb {
+  background:var(--primary); 
+}
+
 .t-studyplan-column-heading {
     color: inherit; /* placeholder */
 }