diff --git a/frappe/public/js/frappe/views/reports/report_view.js b/frappe/public/js/frappe/views/reports/report_view.js
index 68d523b0fa..9bedbf0e11 100644
--- a/frappe/public/js/frappe/views/reports/report_view.js
+++ b/frappe/public/js/frappe/views/reports/report_view.js
@@ -99,16 +99,6 @@ frappe.views.ReportView = class ReportView extends frappe.views.ListView {
});
}
- setup_paging_area() {
- super.setup_paging_area();
- const message = __(
- "For comparison, use >5, <10 or =324. For ranges, use 5:10 (for values between 5 & 10)."
- );
- this.$paging_area.before(
- ``
- );
- }
-
setup_sort_selector() {
this.sort_selector = new frappe.ui.SortSelector({
parent: this.filter_area.$filter_list_wrapper,
@@ -430,6 +420,8 @@ frappe.views.ReportView = class ReportView extends frappe.views.ListView {
}
setup_inline_filter_observer() {
+ this.setup_inline_filter_help_icons();
+
this.$datatable_wrapper.on(
"keyup",
".dt-filter",
@@ -439,6 +431,29 @@ frappe.views.ReportView = class ReportView extends frappe.views.ListView {
);
}
+ setup_inline_filter_help_icons() {
+ const message = __(
+ "For comparison, use >5, <10 or =324.\nFor ranges, use 5:10 (for values between 5 & 10)."
+ );
+
+ this.$datatable_wrapper.find(".dt-filter").each((_, input) => {
+ const $input = $(input);
+
+ if ($input.siblings(".comparison-help-icon").length) {
+ return;
+ }
+
+ const $icon = $(
+ `${frappe.utils.icon(
+ "info",
+ "xs"
+ )}`
+ );
+
+ $input.after($icon);
+ });
+ }
+
update_count_for_inline_filter() {
if (!this.datatable) return;
diff --git a/frappe/public/scss/desk/report.scss b/frappe/public/scss/desk/report.scss
index c476bbe5c0..a84b4719c3 100644
--- a/frappe/public/scss/desk/report.scss
+++ b/frappe/public/scss/desk/report.scss
@@ -93,6 +93,37 @@
border-radius: var(--border-radius);
}
}
+
+.report-view {
+ .layout-main-section {
+ height: calc(100vh - var(--page-head-height));
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+
+ .page-form {
+ flex-shrink: 0;
+ }
+
+ .frappe-list {
+ flex-grow: 1;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+
+ .result,
+ .no-result {
+ flex-grow: 1;
+ overflow: auto;
+ }
+
+ .comparison-message {
+ display: none;
+ }
+ }
+ }
+}
+
@include media-breakpoint-up(sm) {
.report-view {
width: calc(100% - 220px);
@@ -129,6 +160,36 @@
@include get_textstyle("base", "regular");
}
+.report-view {
+ .datatable .dt-row-filter .dt-cell__content {
+ position: relative;
+ }
+
+ .datatable .dt-row-filter .dt-filter.dt-input {
+ padding-inline-end: 1.5rem;
+ }
+
+ .datatable .dt-row-filter .comparison-help-icon {
+ position: absolute;
+ top: 50%;
+ right: 10px;
+ transform: translateY(-50%);
+ display: inline-flex;
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity 0.15s ease;
+
+ .icon {
+ stroke: currentColor;
+ }
+ }
+
+ .datatable .dt-row-filter .dt-filter.dt-input:focus + .comparison-help-icon {
+ opacity: 1;
+ pointer-events: auto;
+ }
+}
+
.list-count {
margin-right: var(--margin-sm);
@include get_textstyle("base", "regular");