From f66836dd37614723dc2cae812f0f62f7c87ed7d3 Mon Sep 17 00:00:00 2001
From: Quincy Morgan <quincy.morgan@icloud.com>
Date: Mon, 15 Apr 2019 12:12:23 -0700
Subject: [PATCH] Prevent photo viewer from overlapping info panes or panels
 (close #5212)

---
 css/60_photos.css | 14 +++++++++-----
 css/80_app.css    |  1 +
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/css/60_photos.css b/css/60_photos.css
index 89a0f26a4..4ecfab247 100644
--- a/css/60_photos.css
+++ b/css/60_photos.css
@@ -1,16 +1,20 @@
 /* photo viewer div */
 #photoviewer {
-    position: absolute;
-    bottom: 10px;
-    left: 10px;
+    position: relative;
+    flex-shrink: 0;
+    margin-bottom: 10px;
     width: 330px;
     height: 250px;
     padding: 5px;
     background-color: #fff;
 }
+[dir='ltr'] #photoviewer {
+    margin-left: 10px;
+    margin-right: 2px;
+}
 [dir='rtl'] #photoviewer {
-    left: auto;
-    right: 10px;
+    margin-right: 10px;
+    margin-left: 2px;
 }
 
 @media screen and (min-width: 1600px) {
diff --git a/css/80_app.css b/css/80_app.css
index e71bbc628..b9239f270 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -3939,6 +3939,7 @@ img.tile-debug {
 .info-panels {
     display: flex;
     flex-flow: row-reverse wrap-reverse;
+    width: 100%;
     z-index: 1;
     -ms-user-select: element;
 }