From 27fea9574bd6d5bb920cc20d8f58a5411cc05825 Mon Sep 17 00:00:00 2001
From: Michael Jumper <mike.jumper@guac-dev.org>
Date: Mon, 12 Oct 2015 10:53:53 -0700
Subject: [PATCH] GUAC-1349: Ensure file transfer dialog does not overflow
 viewport bounds.

---
 .../client/styles/file-transfer-dialog.css    | 82 ++++++++++++++++++-
 .../templates/guacFileTransferManager.html    | 20 +++--
 2 files changed, 92 insertions(+), 10 deletions(-)

diff --git a/guacamole/src/main/webapp/app/client/styles/file-transfer-dialog.css b/guacamole/src/main/webapp/app/client/styles/file-transfer-dialog.css
index 5f7d594fa..666ca7f8d 100644
--- a/guacamole/src/main/webapp/app/client/styles/file-transfer-dialog.css
+++ b/guacamole/src/main/webapp/app/client/styles/file-transfer-dialog.css
@@ -28,14 +28,94 @@
     z-index: 20;
 
     font-size: 0.8em;
-    padding: 0.5em;
 
     width: 4in;
     max-width: 100%;
+    max-height: 3in;
 
 }
 
 #file-transfer-dialog .transfer-manager {
+
+    /* IE10 */
+    display: -ms-flexbox;
+    -ms-flex-align: stretch;
+    -ms-flex-direction: column;
+
+    /* Ancient Mozilla */
+    display: -moz-box;
+    -moz-box-align: stretch;
+    -moz-box-orient: vertical;
+
+    /* Ancient WebKit */
+    display: -webkit-box;
+    -webkit-box-align: stretch;
+    -webkit-box-orient: vertical;
+
+    /* Old WebKit */
+    display: -webkit-flex;
+    -webkit-align-items: stretch;
+    -webkit-flex-direction: column;
+
+    /* W3C */
+    display: flex;
+    align-items: stretch;
+    flex-direction: column;
+
+    max-width: inherit;
+    max-height: inherit;
+
     border: 1px solid rgba(0, 0, 0, 0.5);
     box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
+
+}
+
+#file-transfer-dialog .transfer-manager .header {
+    -ms-flex: 0 0 auto;
+    -moz-box-flex: 0;
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 auto;
+    flex: 0 0 auto;
+}
+
+#file-transfer-dialog .transfer-manager .transfer-manager-body {
+
+    -ms-flex: 1 1 auto;
+    -moz-box-flex: 1;
+    -webkit-box-flex: 1;
+    -webkit-flex: 1 1 auto;
+    flex: 1 1 auto;
+
+    overflow: auto;
+
+}
+
+/*
+ * Shrink maximum height if viewport is too small for default 3in dialog.
+ */
+@media all and (max-height: 3in) {
+
+    #file-transfer-dialog {
+        max-height: 1.5in;
+    }
+
+}
+
+/*
+ * If viewport is too small for even the 1.5in dialog, fit all available space.
+ */
+@media all and (max-height: 1.5in) {
+
+    #file-transfer-dialog {
+        height: 100%;
+    }
+
+    #file-transfer-dialog .transfer-manager {
+        position: absolute;
+        left:   0.5em;
+        top:    0.5em;
+        right:  0.5em;
+        bottom: 0.5em;
+    }
+
 }
diff --git a/guacamole/src/main/webapp/app/client/templates/guacFileTransferManager.html b/guacamole/src/main/webapp/app/client/templates/guacFileTransferManager.html
index 7de41078a..fc2a22f8d 100644
--- a/guacamole/src/main/webapp/app/client/templates/guacFileTransferManager.html
+++ b/guacamole/src/main/webapp/app/client/templates/guacFileTransferManager.html
@@ -27,15 +27,17 @@
         <button ng-click="clearCompletedTransfers()">{{'CLIENT.ACTION_CLEAR_COMPLETED_TRANSFERS' | translate}}</button>
     </div>
 
-    <!-- Sent/received files files -->
-    <div class="transfers">
-        <guac-file-transfer
-            transfer="upload"
-            ng-repeat="upload in client.uploads">
-        </guac-file-transfer><guac-file-transfer
-            transfer="download"
-            ng-repeat="download in client.downloads">
-        </guac-file-transfer>
+    <!-- Sent/received files -->
+    <div class="transfer-manager-body">
+        <div class="transfers">
+            <guac-file-transfer
+                transfer="upload"
+                ng-repeat="upload in client.uploads">
+            </guac-file-transfer><guac-file-transfer
+                transfer="download"
+                ng-repeat="download in client.downloads">
+            </guac-file-transfer>
+        </div>
     </div>
 
 </div>