From 268910ed3b802058826d8c89cd5e062e2e7915f5 Mon Sep 17 00:00:00 2001
From: zadam <zadam.apps@gmail.com>
Date: Fri, 28 Aug 2020 15:38:04 +0200
Subject: [PATCH] fix positioning of attr detail popup for smaller windows

---
 .../layouts/desktop_extra_window_layout.js    |  3 ++-
 src/public/app/widgets/attribute_detail.js    | 23 ++++++++++++++++++-
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/public/app/layouts/desktop_extra_window_layout.js b/src/public/app/layouts/desktop_extra_window_layout.js
index ad5e72cb0..b362de5d1 100644
--- a/src/public/app/layouts/desktop_extra_window_layout.js
+++ b/src/public/app/layouts/desktop_extra_window_layout.js
@@ -29,7 +29,8 @@ export default class DesktopExtraWindowLayout {
                 .child(new TitleBarButtonsWidget()))
             .child(new FlexContainer('row')
                 .collapsible()
-                .child(new FlexContainer('column').id('center-pane').css('flex-grow', '1')
+                .filling()
+                .child(new FlexContainer('column').id('center-pane').filling()
                     .child(new FlexContainer('row').class('title-row')
                         .overflowing()
                         .cssBlock('.title-row > * { margin: 5px 5px 0 5px; }')
diff --git a/src/public/app/widgets/attribute_detail.js b/src/public/app/widgets/attribute_detail.js
index 6ff1b0da1..ede18ccc8 100644
--- a/src/public/app/widgets/attribute_detail.js
+++ b/src/public/app/widgets/attribute_detail.js
@@ -445,7 +445,28 @@ export default class AttributeDetailWidget extends TabAwareWidget {
 
         const offset = this.parent.$widget.offset();
 
-        this.$widget.css("left", x - offset.left - this.$widget.outerWidth() / 2);
+        const left = x - offset.left - this.$widget.outerWidth() / 2;
+
+        if (left < 0) {
+            this.$widget
+                .css("left", "10px")
+                .css("right", "");
+        }
+        else {
+            const right = left + this.$widget.outerWidth();
+
+            if (right > $(window).width() - 10) {
+                this.$widget
+                    .css("left", "")
+                    .css("right", "10px");
+            }
+            else {
+                this.$widget
+                    .css("left", left)
+                    .css("right", "");
+            }
+        }
+
         this.$widget.css("top", y - offset.top + 70);
 
         // so that the detail window always fits