From 2e3055ece2abdda6ea2499be754c816cf62851df Mon Sep 17 00:00:00 2001
From: Eddie Kohler <ekohler@gmail.com>
Date: Thu, 5 Oct 2023 07:50:35 -0400
Subject: [PATCH] Improve overflow CSS for settings fields.

---
 scripts/settings.js           | 42 +++++++------------
 src/settings/s_options.php    |  5 ++-
 src/settings/s_reviewform.php |  2 +-
 stylesheets/style.css         | 78 ++++++++++++++++++-----------------
 4 files changed, 61 insertions(+), 66 deletions(-)

diff --git a/scripts/settings.js b/scripts/settings.js
index 1b3317274..fca77cbea 100644
--- a/scripts/settings.js
+++ b/scripts/settings.js
@@ -97,14 +97,6 @@ function settings_delete(elt, message) {
     return true;
 }
 
-function settings_field_check_overflow() {
-    let xfv = this.firstChild;
-    while (!hasClass(xfv, "settings-xf-view")) {
-        xfv = xfv.nextSibling;
-    }
-    toggleClass(xfv, "settings-xf-overflow", xfv.scrollHeight > xfv.clientHeight + 5);
-}
-
 function settings_field_unfold(evt) {
     if (evt.which.n !== 2) {
         return;
@@ -120,8 +112,6 @@ function settings_field_unfold(evt) {
         if (!evt.which.nofocus) {
             $(this).scrollIntoView();
         }
-    } else {
-        settings_field_check_overflow.call(this);
     }
 }
 
@@ -356,7 +346,7 @@ function add_dialog() {
     }
     function create(library) {
         samples = library.samples;
-        var hc = popup_skeleton({className: "modal-dialog-wide"}), i, e;
+        const hc = popup_skeleton({className: "modal-dialog-wide"});
         hc.push('<h2>Add field</h2>');
         hc.push('<p>Choose a template for the new field.</p>');
         hc.push('<div class="grid-select grid-select-autosubmit" role="listbox"></div>');
@@ -364,18 +354,18 @@ function add_dialog() {
             '<button type="button" name="cancel">Cancel</button>']);
         $d = hc.show();
         grid = $d[0].querySelector(".grid-select");
-        for (i = 0; i !== samples.length; ++i) {
-            e = $e("div", {"class": "settings-xf-view", role: "presentation"});
+        for (let i = 0; i !== samples.length; ++i) {
+            const e = $e("div", "settings-xf-view");
             e.innerHTML = samples[i].sf_view_html;
             grid.append($e("fieldset", {"class": "grid-option", "data-index": i, role: "option", tabindex: 0, "aria-selected": "false"},
-                $e("legend", null, samples[i].legend), e));
+                $e("legend", null, samples[i].legend),
+                $e("div", {"class": "settings-xf-viewport", role: "presentation"}, e)));
         }
         settings_disable_children(grid);
         grid_select_event.call(grid, 0);
         grid.addEventListener("keydown", grid_select_event);
         grid.addEventListener("click", grid_select_event);
         grid.addEventListener("dblclick", grid_select_event);
-        $(grid).children().each(settings_field_check_overflow);
         $d.find("form").on("submit", submit);
     }
     demand_load.submission_field_library().then(create);
@@ -487,7 +477,6 @@ $(document).on("hotcrpsettingssf", ".settings-sf", function () {
     $(edit).find(".uich").trigger("change");
     sf_initializing = false;
     removeClass(this, "hidden");
-    settings_field_check_overflow.call(this);
     sf_order();
 });
 
@@ -833,18 +822,18 @@ function rf_visibility_text(visibility) {
 }
 
 function rf_render_view(fld, example) {
-    var frag = document.createDocumentFragment(), labele, e, ve, t;
+    var xfv = $e("div", "settings-xf-view"), labele, e, ve, t;
 
     // header
     labele = $e("label", "revfn" + (fld.required ? " field-required" : ""),
         fld.name || (example ? "Field name" : "<unnamed>"));
-    frag.append((e = $e("h3", "rfehead", labele)));
+    xfv.append((e = $e("h3", "rfehead", labele)));
     if ((t = rf_visibility_text(fld.visibility))) {
         e.append($e("div", "field-visibility", t));
     }
 
     // feedback
-    frag.append((e = $e("ul", "feedback-list")));
+    xfv.append((e = $e("ul", "feedback-list")));
     if (fld.exists_if && /^round:[a-zA-Z][-_a-zA-Z0-9]*$/.test(fld.exists_if)) {
         e.append($e("li", "is-diagnostic format-inline is-warning-note", "Present on " + fld.exists_if.substring(6) + " reviews"));
     } else if (fld.exists_if) {
@@ -853,7 +842,7 @@ function rf_render_view(fld, example) {
 
     // description
     if (fld.description) {
-        frag.append((e = $e("div", "field-d")));
+        xfv.append((e = $e("div", "field-d")));
         e.innerHTML = fld.description;
     }
 
@@ -894,10 +883,10 @@ function rf_render_view(fld, example) {
         labele.insertBefore($e("span", "checkc", $e("input", {type: "checkbox", disabled: true})), labele.firstChild);
     }
     if (ve.firstChild) {
-        frag.append(ve);
+        xfv.append(ve);
     }
 
-    return frag;
+    return $e("div", "settings-xf-viewport", xfv);
 }
 
 function rf_move() {
@@ -1056,7 +1045,7 @@ function add_dialog() {
     function create(library) {
         samples = library.samples;
         rftypes = library.types;
-        var hc = popup_skeleton({className: "modal-dialog-wide"}), i;
+        const hc = popup_skeleton({className: "modal-dialog-wide"});
         hc.push('<h2>Add field</h2>');
         hc.push('<p>Choose a template for the new field.</p>');
         hc.push('<div class="grid-select grid-select-autosubmit" role="listbox"></div>');
@@ -1064,14 +1053,15 @@ function add_dialog() {
             '<button type="button" name="cancel">Cancel</button>']);
         $d = hc.show();
         grid = $d[0].querySelector(".grid-select");
-        for (i = 0; i !== samples.length; ++i) {
+        for (let i = 0; i !== samples.length; ++i) {
             if (!samples[i].parse_value) {
                 samples[i] = rf_make_sample(samples[i]);
             }
+            const xfvp = rf_render_view(samples[i], true);
+            xfvp.setAttribute("role", "presentation");
             grid.append($e("fieldset", {"class": "grid-option", "data-index": i, role: "option", tabindex: 0, "aria-selected": "false"},
                 $e("legend", null, samples[i].legend),
-                $e("div", {"class": "settings-xf-view", role: "presentation"},
-                    rf_render_view(samples[i], true))));
+                xfvp));
         }
         settings_disable_children(grid);
         grid_select_event.call(grid, 0);
diff --git a/src/settings/s_options.php b/src/settings/s_options.php
index eed066ce4..1e8af9d61 100644
--- a/src/settings/s_options.php
+++ b/src/settings/s_options.php
@@ -381,7 +381,8 @@ function print_actions(SettingValues $sv) {
 
     private function print_one_option_view(PaperOption $io, SettingValues $sv, $ctr) {
         $disabled = $this->sfs->exists_disabled;
-        echo '<div id="sf/', $ctr, '/view" class="settings-xf-view fn2 ui js-foldup">';
+        echo '<div id="sf/', $ctr, '/view" class="settings-xf-viewbox fn2 ui js-foldup">',
+            '<div class="settings-xf-viewport"><div class="settings-xf-view">';
         if ($disabled) {
             $this->pt->msg_at($io->formid, "<0>This field is currently disabled", MessageSet::URGENT_NOTE);
         } else if (strcasecmp($this->sfs->exists_if, "all") !== 0
@@ -412,7 +413,7 @@ private function print_one_option_view(PaperOption $io, SettingValues $sv, $ctr)
         $io->print_web_edit($this->pt, $ov, $ov);
         $io->set_editable_condition($ei);
         $io->override_exists_condition(null);
-        echo '</div>';
+        echo '</div></div></div>';
     }
 
     const MODE_LIVE = 0;
diff --git a/src/settings/s_reviewform.php b/src/settings/s_reviewform.php
index 766b6d6af..64ece6e11 100644
--- a/src/settings/s_reviewform.php
+++ b/src/settings/s_reviewform.php
@@ -643,7 +643,7 @@ static function print(SettingValues $sv) {
             '<div class="settings-draghandle ui-drag js-settings-drag" draggable="true" title="Drag to reorder fields">',
             Icons::ui_move_handle_horizontal(),
             '</div>',
-            '<div id="rf/$/view" class="settings-xf-view fn2 ui js-foldup"></div>',
+            '<div id="rf/$/view" class="settings-xf-viewbox fn2 ui js-foldup"></div>',
             '<fieldset id="rf/$/edit" class="fieldset-covert settings-xf-edit fx2">',
               '<div class="entryi mb-3" data-property="name"><div class="entry">',
                 '<input name="rf/$/name" id="rf/$/name" type="text" size="50" class="font-weight-bold want-focus want-delete-marker" placeholder="Field name">',
diff --git a/stylesheets/style.css b/stylesheets/style.css
index d0e8e75b2..c36948ee5 100644
--- a/stylesheets/style.css
+++ b/stylesheets/style.css
@@ -1796,57 +1796,52 @@ th.settings-simplehead {
 	margin-bottom: 1.5em;
 	transition: opacity 0.5s;
 }
-.settings-xf-view, .mail-preview-send, .mail-editor {
+.settings-xf-viewbox, .mail-preview-send, .mail-editor {
 	background-color: #f9fbfb;
 }
-.settings-xf-view:hover, .mail-preview-send:hover {
+.settings-xf-viewbox:hover, .mail-preview-send:hover {
 	background-color: #ecf2f4;
 }
 .settings-xf:hover, .mail-preview-send:hover {
 	border-color: #a5a5a5;
 }
-.settings-xf-view {
-	padding: 16px;
+.settings-xf-viewbox {
 	border-radius: 5px;
+	padding: 0 16px;
+}
+.settings-xf-viewport {
+	-webkit-mask-image: linear-gradient(to top, transparent 0, rgba(0, 0, 0, 0.25) 8px,
+		black 20px calc(100% - 16px), transparent calc(100% - 8px));
+	mask-image: linear-gradient(to top, transparent 0, rgba(0, 0, 0, 0.25) 8px,
+		black 20px calc(100% - 16px), transparent calc(100% - 8px));
+}
+.settings-xf-view {
+	padding-top: 16px;
+	padding-bottom: 16px;
 }
-.settings-sf > .settings-xf-view {
+.settings-sf > .settings-xf-viewbox {
 	overflow-y: hidden;
 }
-.settings-sf.settings-xf-disabled > .settings-xf-view {
+.settings-sf.settings-xf-disabled .settings-xf-viewport {
 	max-height: 10rem;
 }
-.settings-sf-final > .settings-xf-view {
+.settings-sf-final > .settings-xf-viewbox {
 	background-color: #effcf0;
 }
-.settings-sf-final > .settings-xf-view:hover {
+.settings-sf-final > .settings-xf-viewbox:hover {
 	background-color: #e8f5e9;
 }
-.settings-xf-disabled > .settings-xf-view {
+.settings-xf-disabled > .settings-xf-viewbox {
 	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Cpath d='M0 0l-34 34l17 0l34 -34z' fill='%23f9fbfb' /%3E%3Cpath d='M34 0l-34 34l17 0l34 -34z' fill='%23f9fbfb' /%3E%3Cpath d='M17 0l-34 34l17 0l34 -34z' fill='%23f5f2f2' /%3E%3Cpath d='M51 0l-34 34l17 0l34 -34z' fill='%23f5f2f2' /%3E%3C/svg%3E");
 	background-color: #f5f2f2;
 }
-.settings-xf-disabled > .settings-xf-view:hover {
+.settings-xf-disabled > .settings-xf-viewbox:hover {
 	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Cpath d='M0 0l-34 34l17 0l34 -34z' fill='%23ecf2f4' /%3E%3Cpath d='M34 0l-34 34l17 0l34 -34z' fill='%23ecf2f4' /%3E%3Cpath d='M17 0l-34 34l17 0l34 -34z' fill='%23e4e7e7' /%3E%3Cpath d='M51 0l-34 34l17 0l34 -34z' fill='%23e4e7e7' /%3E%3C/svg%3E");
 }
-.settings-xf-overflow::after {
-	content: "";
-	position: absolute;
-	z-index: 1;
-	bottom: 0;
-	left: 0;
-	pointer-events: none;
-	background-image: linear-gradient(to top, rgba(249,251,251,1), rgba(249,251,251,1) 0.5rem, rgba(249,251,251,0));
-	width: 100%;
-	height: 3em;
-	border-radius: 5px;
-}
 .settings-xf-edit {
 	padding: 20px 16px 16px;
 	border-radius: 5px;
 }
-.settings-xf-view h3 {
-	max-width: 768px;
-}
 .settings-draghandle {
 	position: absolute;
 	display: inline-block;
@@ -1893,49 +1888,58 @@ hr.dropmark {
 	overflow-y: auto;
 	row-gap: 0.25rem;
 	column-gap: 0.25rem;
-	margin: -0.5rem;
+	margin: -16px -8px -8px;
+	padding-bottom: 8px;
+	-webkit-mask-image: linear-gradient(to top, transparent 0,
+		black 16px calc(100% - 16px), transparent calc(100% - 8px));
+	mask-image: linear-gradient(to top, transparent 0,
+		black 16px calc(100% - 16px), transparent calc(100% - 8px));
 }
 .grid-option {
 	overflow-y: visible;
-	margin: 0.5rem;
+	margin: 8px;
 	background-color: #f9fbfb;
 	position: relative;
 }
 .grid-option:hover {
-	border-color: #a5a5a5;
+	border-color: #a1a1f2;
 	background-color: #ecf2f4;
 }
 .grid-option.active, .grid-option.active:hover {
 	background: inherit;
 }
 fieldset.grid-option {
-	padding: 5px 12px 10px;
+	border-width: 2px;
+	border-color: #b8b8e5;
+	padding: 0 12px;
 }
 fieldset.grid-option.active {
 	border-color: blue;
 	border-color: AccentColor;
-	border-radius: 4px;
-	border-width: 2px;
-	padding: 4px 11px 9px;
 }
 fieldset.grid-option.active > legend {
 	font-weight: bold;
 }
-.grid-option > .settings-xf-view {
-	background: none;
+.grid-option > .settings-xf-viewport {
+	margin-top: -12px;
 	opacity: 0.5;
-	padding: 0;
 	max-height: 50vh;
 	overflow-x: hidden;
 	overflow-y: auto;
 }
-.grid-option.active > .settings-xf-view {
+.grid-option.active > .settings-xf-viewport {
 	opacity: 1;
 }
+.settings-xf-view h3 {
+	max-width: 768px;
+}
 .settings-xf-view > .pfe {
 	margin-bottom: 0;
 }
-.settings-xf-view > .pfe.pf-separator, .settings-xf-view > .rfehead {
+.settings-xf-view > .pfe.pf-separator {
+	margin-top: 0.5rem;
+}
+.settings-xf-view > .rfehead {
 	margin-top: 0;
 }
 .settings-radio {