ensure nav bar and chart fit on small screens

app/rest/templates/button-nav.tpl

@@ -1,10 +1,27 @@
 <div class="pure-g">
   <div class="pure-u-1">
     <div class="pure-button-group" role="group" style="padding: 1em 0 0;">
-      <button class="pure-button" type="submit"> Apply </button>
+    <style>
+
+.button-resize { font-size: 70%; }
+@media screen and (min-width:35.5em){
+    .button-resize { font-size: 85%; }
+}
+@media screen and (min-width:40em){
+    .button-resize { font-size: 100%; }
+}
+@media screen and (min-width:64em){
+    .button-resize { font-size: 110%; }
+}
+@media screen and (min-width:80em){
+    .button-resize { font-size: 125%; }
+}
+    </style>
+      <button class="button-resize pure-button" type="submit"> Apply </button>
     % for target in ("trend", "products", "categories", "groups", "tags"):
     %   disabled = 'disabled="true"' if target == action else ''
-      <button class="pure-button" type="submit" formaction="{{target}}" {{!disabled}}> {{target.title()}} </button>
+    %   label = target.title()
+      <button class="button-resize pure-button" type="submit" formaction="{{target}}" {{!disabled}}> {{label}} </button>
     % end
     </div>
   </div>

app/rest/templates/form.tpl

@@ -1,6 +1,6 @@
 <form id="filter" method="{{ method }}" action="{{ action }}">
   % include('button-nav', action=action)
-  <details>
+  <details style="padding: 1em 0">
     <summary>Click to expand filter...</summary>
       <div class="pure-g">
         <%

app/rest/templates/trend.tpl

@@ -9,7 +9,6 @@ html {
 body {
   background-color: #080808;
   color: #cccccc;
-  width: calc(100% - 2em)
 }
 select::-webkit-scrollbar {
   width: 11px;
@@ -30,7 +29,8 @@ select::-webkit-scrollbar-thumb {
 }
 
 svg {
-  width: 100%;
+  height: calc(min(100vh, 100vw) - 8em);
+  width: calc(100% - 2em);
 }
         </style>
         <title>Trend</title>