From d3d767b4cdb7b20fc9f7e2f4278a17d1f4b37433 Mon Sep 17 00:00:00 2001
From: Joseph Schorr <josephschorr@users.noreply.github.com>
Date: Mon, 23 May 2016 17:37:11 -0400
Subject: [PATCH] Fix handling of large <pre>s in repository descriptions

Fixes #1474
---
 .../directives/repo-view/repo-panel-info.css  | 38 +++++++++---
 .../directives/repo-view/repo-panel-info.html | 58 ++++++++++---------
 2 files changed, 61 insertions(+), 35 deletions(-)

diff --git a/static/css/directives/repo-view/repo-panel-info.css b/static/css/directives/repo-view/repo-panel-info.css
index 3f3dd02c3..a17c53657 100644
--- a/static/css/directives/repo-view/repo-panel-info.css
+++ b/static/css/directives/repo-view/repo-panel-info.css
@@ -1,8 +1,3 @@
-.repo-panel-info-element .right-controls {
-  margin-bottom: 20px;
-  float: right;
-}
-
 .repo-panel-info-element .right-sec-controls {
   border: 1px solid #ddd;
   padding: 20px;
@@ -49,7 +44,11 @@
   margin-top: 20px;
 }
 
-.repo-panel-info-element .right-controls .copy-box {
+.repo-panel-info-element .right-pull-controls {
+  margin-bottom: 20px;
+}
+
+.repo-panel-info-element .right-pull-controls .copy-box {
   width: 400px;
   margin-top: 10px;
   margin-bottom: 20px;
@@ -87,16 +86,41 @@
   padding-top: 18px;
 }
 
+.repo-panel-info-element .description-container table {
+  width: 100%;
+}
+
+.repo-panel-info-element .description-container table td {
+  vertical-align: top;
+}
+
+.repo-panel-info-element .description-container table td:first-child {
+  width: 100%;
+  padding: 10px;
+  padding-right: 30px;
+}
+
+.repo-panel-info-element .description-container table td:first-child p {
+  display: block;
+}
+
+.repo-panel-info-element .description-container table td:first-child pre {
+  max-width: 100%;
+}
+
 .repo-panel-info-element .description {
   padding-bottom: 0px;
   position: relative;
-  margin-right: 410px;
 }
 
 @media (max-width: 767px) {
   .repo-panel-info-element .description {
     margin-right: 0px;
   }
+
+  .repo-panel-info-element .description-container table td:first-child {
+    padding: 6px;
+  }
 }
 
 .repo-panel-info-element .description p {
diff --git a/static/directives/repo-view/repo-panel-info.html b/static/directives/repo-view/repo-panel-info.html
index be2eb5125..aafa4de26 100644
--- a/static/directives/repo-view/repo-panel-info.html
+++ b/static/directives/repo-view/repo-panel-info.html
@@ -62,37 +62,39 @@
 
   <!-- Repository Description -->
   <div class="description-container">
-
-    <!-- Pull Controls -->
-    <div class="right-controls hidden-sm hidden-xs">
-      <div class="right-pull-controls">
-        <div>Pull this container with the following Docker command:</div>
-        <div class="copy-box" hovering-message="true" value="pullCommand"></div>
-      </div>
-
-      <div class="right-sec-controls" quay-show="repository.can_admin && Features.SECURITY_SCANNER">
-        <span class="sec-logo">
-          <img class="lock" src="/static/img/lock.svg">
-          <img class="scan" src="/static/img/scan.svg">
-        </span>
-
-        <b>Automated Security Scanning (Preview)</b>
-        <div>Continually scanning this repository for 17K+ known vulnerabilities. <a href="https://blog.quay.io/security-scanning-beta" ng-safenewtab>Read more about this feature</a>.</div>
-        <div class="configure-alerts" ng-if="!hasEvents">
-          <a href="/repository/{{ repository.namespace }}/{{ repository.name }}?tab=settings&add_event=vulnerability_found"><i class="fa fa-bell-o"></i>Configure Vulnerability Alerts</a>
-        </div>
-        <div class="repository-events-summary" is-enabled="repository.can_admin" repository="repository"
-             event-filter="vulnerability_found" has-events="hasEvents"></div>
-      </div>
-    </div>
-
-    <h4 style="font-size:20px;">Description</h4>
-
-    <div class="description markdown-input"
+    <table class="co-fixed-table">
+    <tr>
+      <td>
+        <h4 style="font-size:20px;">Description</h4>
+        <div class="description markdown-input"
          content="repository.description"
          can-write="repository.can_write"
          content-changed="updateDescription"
          field-title="'repository description'">
-    </div>
+        </div>
+      </td>
+      <td style="width: 400px;" class="hidden-xs hidden-sm">
+        <div class="right-pull-controls">
+          <div>Pull this container with the following Docker command:</div>
+          <div class="copy-box" hovering-message="true" value="pullCommand"></div>
+        </div>
+
+        <div class="right-sec-controls" quay-show="repository.can_admin && Features.SECURITY_SCANNER">
+          <span class="sec-logo">
+            <img class="lock" src="/static/img/lock.svg">
+            <img class="scan" src="/static/img/scan.svg">
+          </span>
+
+          <b>Automated Security Scanning</b>
+          <div>Continually scanning this repository for 17K+ known vulnerabilities. <a href="https://blog.quay.io/security-scanning-beta" ng-safenewtab>Read more about this feature</a>.</div>
+          <div class="configure-alerts" ng-if="!hasEvents">
+            <a href="/repository/{{ repository.namespace }}/{{ repository.name }}?tab=settings&add_event=vulnerability_found"><i class="fa fa-bell-o"></i>Configure Vulnerability Alerts</a>
+          </div>
+          <div class="repository-events-summary" is-enabled="repository.can_admin" repository="repository"
+               event-filter="vulnerability_found" has-events="hasEvents"></div>
+        </div>
+      </td>
+    </tr>
+    </table>
   </div>
 </div>