From c88f13220158b8ef10676c3a3dbf2179b6659e51 Mon Sep 17 00:00:00 2001
From: PMKuipers <pm@miqra.nl>
Date: Fri, 24 May 2024 13:16:43 +0200
Subject: [PATCH] Added hack to limit length of edit screen

---
 css/devstyles.css   | 11 +++++++++--
 edit-plan.php       |  2 +-
 scss/studyplan.scss | 13 +++++++++++--
 styles.css          | 11 +++++++++--
 4 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/css/devstyles.css b/css/devstyles.css
index fc123fd..342369a 100644
--- a/css/devstyles.css
+++ b/css/devstyles.css
@@ -125,12 +125,19 @@ body.path-local-treestudyplan .editmode-switch-form > * {
     --studyplan-filter-width: auto; /* better leave this at auto for now*/
     --studyplan-course-width: auto; /* better leave this at auto for now*/
 }
+.path-local-treestudyplan .t-studyplan-limit-width,
+.features-treestudyplan .t-studyplan-limit-width {
+    max-width: 92vw;
+}
 .path-local-treestudyplan .t-studyplan-scrollable,
 .path-local-treestudyplan .r-studyplan-scrollable,
 .features-treestudyplan .t-studyplan-scrollable,
 .features-treestudyplan .r-studyplan-scrollable {
-    overflow-x: scroll;
-    overflow-y: clip; /* to ensure the x scrollbar does not cause an y scrollbar to appear */
+    /* below lines actually have the important flag set, since we do not want these very specific classes
+     to be overridden anywhere - we always need them to be scrollable */
+    overflow-x: scroll !important; /* stylelint-disable-line declaration-no-important */
+    /* to ensure the x scrollbar does not cause an y scrollbar to appear */
+    overflow-y: clip !important; /* stylelint-disable-line declaration-no-important */
     scrollbar-color: var(--primary) color-mix(in srgb, var(--primary) 20%, white);
     scrollbar-width: thin;
 }
diff --git a/edit-plan.php b/edit-plan.php
index 15d7953..6841df8 100644
--- a/edit-plan.php
+++ b/edit-plan.php
@@ -112,7 +112,7 @@ function t($str, $param = null, $plugin = 'local_treestudyplan') {
 print $OUTPUT->header();
 
 ?>
-<div id='root'>
+<div id='root' class="t-studyplan-limit-width">
     <div class='vue-loader' v-show='false'>
         <div class="spinner-border text-primary" role="status">
             <span class="sr-only">Loading...</span>
diff --git a/scss/studyplan.scss b/scss/studyplan.scss
index f55c974..8be892d 100644
--- a/scss/studyplan.scss
+++ b/scss/studyplan.scss
@@ -34,10 +34,19 @@
         --studyplan-course-width: auto; /* better leave this at auto for now*/
     }
 
+    .t-studyplan-limit-width {
+        max-width: 92vw;
+    }
+
     .t-studyplan-scrollable,
     .r-studyplan-scrollable {
-        overflow-x: scroll;
-        overflow-y: clip; /* to ensure the x scrollbar does not cause an y scrollbar to appear */
+        /* below lines actually have the important flag set, since we do not want these very specific classes
+           to be overridden anywhere - we always need them to be scrollable */
+        overflow-x: scroll !important; /* stylelint-disable-line declaration-no-important */
+        /* to ensure the x scrollbar does not cause an y scrollbar to appear */
+        overflow-y: clip !important; /* stylelint-disable-line declaration-no-important */ 
+
+
         scrollbar-color: var(--primary) color-mix(in srgb, var(--primary) 20%, white);
         scrollbar-width: thin;
     }
diff --git a/styles.css b/styles.css
index fc123fd..342369a 100644
--- a/styles.css
+++ b/styles.css
@@ -125,12 +125,19 @@ body.path-local-treestudyplan .editmode-switch-form > * {
     --studyplan-filter-width: auto; /* better leave this at auto for now*/
     --studyplan-course-width: auto; /* better leave this at auto for now*/
 }
+.path-local-treestudyplan .t-studyplan-limit-width,
+.features-treestudyplan .t-studyplan-limit-width {
+    max-width: 92vw;
+}
 .path-local-treestudyplan .t-studyplan-scrollable,
 .path-local-treestudyplan .r-studyplan-scrollable,
 .features-treestudyplan .t-studyplan-scrollable,
 .features-treestudyplan .r-studyplan-scrollable {
-    overflow-x: scroll;
-    overflow-y: clip; /* to ensure the x scrollbar does not cause an y scrollbar to appear */
+    /* below lines actually have the important flag set, since we do not want these very specific classes
+     to be overridden anywhere - we always need them to be scrollable */
+    overflow-x: scroll !important; /* stylelint-disable-line declaration-no-important */
+    /* to ensure the x scrollbar does not cause an y scrollbar to appear */
+    overflow-y: clip !important; /* stylelint-disable-line declaration-no-important */
     scrollbar-color: var(--primary) color-mix(in srgb, var(--primary) 20%, white);
     scrollbar-width: thin;
 }