fix: Improve rendering on non mobile device

src/App.svelte

@@ -12,9 +12,7 @@
   import Mouthfeel from './Mouthfeel.svelte';
   import Overall from './Overall.svelte';
   import SvgIcon from "./comp/SvgIcon.svelte";
-  import {
-    nextIcon, userIcon, beerIcon
-  } from './js/AppIcons'
+  import {beerIcon, nextIcon, userIcon} from './js/AppIcons'
 
   import {AromaDto} from './js/Aroma';
   import {AppearanceDto} from './js/Appearance';
@@ -230,24 +228,27 @@
     vertical-align: middle;
     display: inline-block;
     width: 100px;
+    color: #555;
   }
 
-  :global(span.labelLong) {
+  :global(span.longLabel) {
     vertical-align: middle;
     display: inline-block;
+    color: #555;
     width: 100%;
   }
 
   :global(textarea) {
-    width: 100%;
+      width: 100%;
+      height: 150px;
   }
 
   :global(select.fixedInput) {
-    width: 170px;
+      width: 250px;
   }
 
   :global(input.fixedInput) {
-    width: 170px;
+      width: 250px;
   }
 
   :global(button.delete) {
@@ -289,13 +290,13 @@
   ** Local
   **/
   div.main {
-    max-width: 320px;
+    max-width: 640px;
     margin: auto;
     clear: both;
   }
 
   div.top {
-    max-width: 320px;
+    max-width: 640px;
     margin-left: auto;
     margin-right: auto;
     margin-bottom: 0;
@@ -378,6 +379,32 @@
     clear: both;
   }
 
+  /* ----------------------------------------
+  ** Small device override
+  **/
+  @media (pointer:none), (pointer:coarse) {
+      :global(textarea) {
+          height: 100px;
+      }
+
+      :global(select.fixedInput) {
+          width: 170px;
+      }
+
+      :global(input.fixedInput) {
+          width: 170px;
+      }
+
+      div.main {
+          max-width: 320px;
+      }
+
+      div.top {
+          max-width: 320px;
+      }
+
+  }
+
 </style>
 
 <div class="top" id="top">

src/Flavor.svelte

@@ -189,7 +189,7 @@
   </div>
 
   <div>
-    <span>Additional Comment</span>
+    <span class="longLabel">Additional Comment</span>
     <textarea on:change={updateHandler} type=text bind:value={flavor.comment}/>
   </div>
 

src/Mouthfeel.svelte

@@ -46,7 +46,7 @@
   </SelectCheck>
 </div>
 <div>
-  <span>Other Palate Sensations</span>
+  <span class="longLabel">Other Palate Sensations</span>
   <textarea on:change={updateHandler} type=text bind:value={mouthfeel.other}/>
 </div>
 <div>

src/comp/Srm.svelte

@@ -56,6 +56,14 @@
     return SRM_RGB_MAP[41 - color];
   }
 
+  function getWidth() {
+    let isMobile = /iPhone|Android/i.test(navigator.userAgent);
+    if (! isMobile) {
+      return "250px";
+    }
+    return "170px";
+  }
+
   function selectSrm(color) {
     value = color;
     document.getElementById('picker').hidden = true;
@@ -84,7 +92,7 @@
             on:click={() => selectSrm(color)}>{color}</button>
   {/each}
 </div>
-<button id="selection" style="width: 170px; color: {getFontColor(value)}; background-color: {SRM_RGB_MAP[value]}"
+<button id="selection" style="width: {getWidth()}; color: {getFontColor(value)}; background-color: {SRM_RGB_MAP[value]}"
         on:click={() => pickSrm()}>
   {#if value >=0}
     {getColor(value)} <span class="small">{value} SRM</span>

src/comp/SunburstPicker.svelte

@@ -17,6 +17,11 @@
   function plotlyLoaded() {
     console.debug("plotly loaded");
     let plotDiv = document.getElementById(plotId);
+    let isMobile = /iPhone|iPod|Android/i.test(navigator.userAgent);
+    if (! isMobile) {
+      layout["width"] = 640;
+      layout["height"] = 700;
+    }
     Plotly.newPlot(plotDiv, data, layout, {displayModeBar: false});
     plotDiv.on('plotly_sunburstclick', function (data) {
       selected = data["points"][0]["currentPath"] + data["points"][0]["label"];