From 73df4922f48d98f6099d4cc3caec4640755e4a1e Mon Sep 17 00:00:00 2001
From: Minasokoni <minasokoni@gmail.com>
Date: Wed, 21 Jun 2017 08:22:48 -0700
Subject: [PATCH] minimal update to styling

---
 dist/index.html                |  1 +
 src/plugins/topbar/topbar.jsx  |  8 +++++++-
 src/plugins/topbar/topbar.less |  3 +--
 src/style/_topbar.scss         | 35 ++++++++++++++++++++++++++--------
 4 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index c68ff61b..f6aaf9e4 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -71,6 +71,7 @@
 <script src="./swagger-ui-standalone-preset.js"> </script>
 <script>
 window.onload = function() {
+  
   // Build a system
   const ui = SwaggerUIBundle({
     url: "http://petstore.swagger.io/v2/swagger.json",
diff --git a/src/plugins/topbar/topbar.jsx b/src/plugins/topbar/topbar.jsx
index e6af197b..65de36cb 100644
--- a/src/plugins/topbar/topbar.jsx
+++ b/src/plugins/topbar/topbar.jsx
@@ -83,7 +83,13 @@ export default class Topbar extends React.Component {
         rows.push(<option key={i} value={link.url} selected={i===this.state.selectedIndex}>{link.name}</option>)
       })
 
-      control.push(<select disabled={isLoading} onChange={ this.onUrlSelect }>{rows}</select>)
+      control.push(
+        <label className="select-label" htmlFor="select"><span>Select a URL</span>
+          <select id="select" disabled={isLoading} onChange={ this.onUrlSelect }>
+            {rows}
+          </select>
+        </label>
+      )
     }
     else {
       formOnSubmit = this.downloadUrl
diff --git a/src/plugins/topbar/topbar.less b/src/plugins/topbar/topbar.less
index 8c2666e3..9818940b 100644
--- a/src/plugins/topbar/topbar.less
+++ b/src/plugins/topbar/topbar.less
@@ -1,11 +1,10 @@
 .swagger-ui {
-
   .topbar {
     background-color: #89bf04;
   }
 
   .topbar-wrapper {
-    padding: 0.7em
+    padding: 0.7em;
   }
 
   .topbar-logo__img {
diff --git a/src/style/_topbar.scss b/src/style/_topbar.scss
index f675795c..90439fda 100644
--- a/src/style/_topbar.scss
+++ b/src/style/_topbar.scss
@@ -6,7 +6,6 @@
     .topbar-wrapper
     {
         display: flex;
-
         align-items: center;
     }
     a
@@ -15,13 +14,13 @@
         font-weight: bold;
 
         display: flex;
+        align-items: center;
+        flex: 1;
 
         max-width: 300px;
 
         text-decoration: none;
 
-        flex: 1;
-        align-items: center;
         @include text_headline(#fff);
 
         span
@@ -48,15 +47,35 @@
             outline: none;
         }
 
-        select
+        .select-label
         {
-            min-width: 200px;
+            display: flex;
+            align-items: center;
 
-            border: 2px solid #547f00;
-            outline: none;
-            box-shadow: none;
+            width: 100%;
+            max-width: 600px;
+            span
+            {
+                flex: 1;
+
+                padding: 0 10px 0 0;
+
+                text-align: right;
+            }
+
+            select
+            {
+                flex: 2;
+
+                width: 100%;
+
+                border: 2px solid #547f00;
+                outline: none;
+                box-shadow: none;
+            }
         }
 
+
         .download-url-button
         {
             font-size: 16px;