From 9bb0cd76893b16c7b4a5841a6206d84fec83070f Mon Sep 17 00:00:00 2001
From: Kyle Shockey <shockey@users.noreply.github.com>
Date: Tue, 8 Aug 2017 19:20:28 -0700
Subject: [PATCH] Correct funky CSS for links

---
 src/core/components/response.jsx                 |  4 ++--
 src/core/components/responses.jsx                |  2 +-
 .../plugins/oas3/components/operation-link.jsx   | 10 ++++++++--
 src/style/_layout.scss                           | 16 ++++++++++++++++
 src/style/_table.scss                            |  3 ++-
 5 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/src/core/components/response.jsx b/src/core/components/response.jsx
index 95602c64..9d30849d 100644
--- a/src/core/components/response.jsx
+++ b/src/core/components/response.jsx
@@ -122,10 +122,10 @@ export default class Response extends React.Component {
 
 
         </td>
-        {specSelectors.isOAS3() ? <td>
+        {specSelectors.isOAS3() ? <td className="col response-col_links">
           { links ?
             links.toSeq().map((link, key) => {
-              return <OperationLink key={key} name={key} link={ link }/>
+              return <OperationLink key={key} name={key} link={ link } getComponent={getComponent}/>
             })
           : <i>No links</i>}
         </td> : null}
diff --git a/src/core/components/responses.jsx b/src/core/components/responses.jsx
index 1c00ff1a..88ab0c92 100644
--- a/src/core/components/responses.jsx
+++ b/src/core/components/responses.jsx
@@ -68,7 +68,7 @@ export default class Responses extends React.Component {
               <tr className="responses-header">
                 <td className="col col_header response-col_status">Code</td>
                 <td className="col col_header response-col_description">Description</td>
-                { specSelectors.isOAS3() ? <td className="col col_header response-col_description">Links</td> : null }
+                { specSelectors.isOAS3() ? <td className="col col_header response-col_links">Links</td> : null }
               </tr>
             </thead>
             <tbody>
diff --git a/src/core/plugins/oas3/components/operation-link.jsx b/src/core/plugins/oas3/components/operation-link.jsx
index 6f9eef0a..f6fe3ac3 100644
--- a/src/core/plugins/oas3/components/operation-link.jsx
+++ b/src/core/plugins/oas3/components/operation-link.jsx
@@ -4,14 +4,19 @@ import ImPropTypes from "react-immutable-proptypes"
 
 class OperationLink extends Component {
   render() {
-    const { link, name } = this.props
+    const { link, name, getComponent } = this.props
+
+    const Markdown = getComponent("Markdown")
 
     let targetOp = link.get("operationId") || link.get("operationRef")
     let parameters = link.get("parameters") && link.get("parameters").toJS()
     let description = link.get("description")
 
     return <span>
-      <div style={{ padding: "5px 2px" }}>{name}{description ? `: ${description}` : ""}</div>
+      <div style={{ marginTop: "1.5em", marginBottom: ".5em" }}>
+        <b><code>{name}</code></b>
+        { description ? <Markdown source={description}></Markdown> : null }
+      </div>
       <pre>
         Operation `{targetOp}`<br /><br />
         Parameters {padString(0, JSON.stringify(parameters, null, 2)) || "{}"}<br />
@@ -30,6 +35,7 @@ function padString(n, string) {
 }
 
 OperationLink.propTypes = {
+  getComponent: PropTypes.func.isRequired,
   link: ImPropTypes.orderedMap.isRequired,
   name: PropTypes.String
 }
diff --git a/src/style/_layout.scss b/src/style/_layout.scss
index b99064d1..9ee357f0 100644
--- a/src/style/_layout.scss
+++ b/src/style/_layout.scss
@@ -522,6 +522,22 @@
     }
 }
 
+.response-col_links
+{
+    padding-left: 2em;
+    max-width: 40em;
+    font-size: 14px;
+
+    @include text_body();
+
+    .response-undocumented
+    {
+        font-size: 11px;
+
+        @include text_code(#999);
+    }
+}
+
 .response-col_description__inner
 {
     span
diff --git a/src/style/_table.scss b/src/style/_table.scss
index cfec861a..7f065529 100644
--- a/src/style/_table.scss
+++ b/src/style/_table.scss
@@ -52,7 +52,8 @@ table
 
                 &:first-of-type
                 {
-                    width: 20%;
+                    max-width: 20%;
+                    min-width: 6em;
                     padding: 10px 0;
                 }
             }