diff --git a/vasl_templates/webapp/static/css/tabs-scenario.css b/vasl_templates/webapp/static/css/tabs-scenario.css
index 6c539a6..35da6de 100644
--- a/vasl_templates/webapp/static/css/tabs-scenario.css
+++ b/vasl_templates/webapp/static/css/tabs-scenario.css
@@ -7,8 +7,8 @@ fieldset[name='scenario'] {
 }
 
 #panel-scenario .row { display: flex ; align-items: center ; margin-bottom: 2px ; }
-#panel-scenario div.html-textbox[name='SCENARIO_ID'] { margin-left: 0.25em ; width: 70px ; flex-grow: 0 ; }
-#panel-scenario .scenario-search { width: 25px ; height: 22px ; margin: 0 0 0 0.25em ; padding: 0 ; }
+#panel-scenario div.html-textbox[name='SCENARIO_ID'] { margin-left: 2px ; width: 70px ; flex-grow: 0 ; }
+#panel-scenario .scenario-search { width: 25px ; height: 22px ; margin: 0 0 0 5px ; padding: 0 ; }
 #panel-scenario .scenario-search img { margin-top: 2px ; width: 16px ; }
 #panel-scenario input[name='SCENARIO_DATE'] {
     /* nb: override in desktop.css for v-alignment */
@@ -35,7 +35,8 @@ fieldset[name='scenario'] {
 #panel-scenario .select2-selection__arrow { margin-top: -2px ; }
 #panel-scenario .select2-selection { height: 24px !important ; border-radius: 0 !important ; }
 
-#panel-scenario .select2[name="SCENARIO_THEATER"] { margin-left: 0.25em ; margin-right: 0.25em ; }
+#panel-scenario button[data-id="compass"] { width: 33px ; }
+#panel-scenario .select2[name="SCENARIO_THEATER"] { margin-left: 4px ; margin-right: 2px ; }
 
 /* -------------------------------------------------------------------- */
 
diff --git a/vasl_templates/webapp/static/main.js b/vasl_templates/webapp/static/main.js
index 567c67f..94374a6 100644
--- a/vasl_templates/webapp/static/main.js
+++ b/vasl_templates/webapp/static/main.js
@@ -277,10 +277,10 @@ $(document).ready( function () {
         $panel.find( ".row" ).css( "max-width", $panel2.width() ) ;
         // limit the width of the individual HTML textbox's
         $( "div.html-textbox[name='SCENARIO_NAME']" ).css( {
-            "max-width": "calc(100% - 210px)"
+            "max-width": "calc(100% - 214px)"
         } ) ;
         $( "div.html-textbox[name='SCENARIO_LOCATION']" ).css( {
-            "max-width": "calc(100% - 237px)"
+            "max-width": "calc(100% - 235px)"
         } ) ;
         for ( var playerNo=1 ; playerNo <= 2 ; ++playerNo ) {
             $( "div.html-textbox[name='PLAYER_" + playerNo + "_DESCRIPTION']" ).css( {