safe-area for nav bar

Author: mithrendal

css/vc64.css

@@ -258,6 +258,12 @@ color: #aaa !important;
 
     width: 100vw;
 }
+#button_show_menu {
+    position: fixed; 
+    top:6px; 
+    left:calc(env(safe-area-inset-left) / 2);
+    z-index:200;    
+}
 #navgrid {
     display: grid;
     grid-template-columns: 1fr auto;
@@ -270,6 +276,7 @@ color: #aaa !important;
     grid-template-columns: repeat(auto-fit, minmax(36px, auto)); /* Responsive grid for left side */
     gap: 0px;
     justify-content: start;
+    margin-left: calc(env(safe-area-inset-left) / 2);
 }
 
 .left > *, .right > * {
@@ -288,6 +295,7 @@ color: #aaa !important;
     gap: 1px;
     justify-content: end;
     padding-right: 2px;
+    margin-right: calc(env(safe-area-inset-right) / 2);
 }
 
 
@@ -816,4 +824,10 @@ input[type="range"]::-moz-range-thumb {
     overflow: auto;
     min-width: fit-content;
     padding-right: 10px;
+}
+
+
+[id^="img_snap_"] {
+    width: auto;
+    height: auto;
 }

index.html

@@ -169,7 +169,7 @@ async function load_browser(datasource_name, command="feeds")
         var the_html=
         '<div class="col-xs-4 mr-2">'
         +`<div id="card_snap_${item.id}" class="card" style="width: ${scaled_width}rem;">`
-            +`<img id="img_snap_${item.id}" width="${canvas_width}" height="${canvas_height}" class="card-img-top rounded" style="width:auto;height:auto"/>`;
+            +`<img id="img_snap_${item.id}" width="${canvas_width}" height="${canvas_height}" class="card-img-top rounded"/>`;
         if(collector.can_delete(app_title, item.id))
         {
             the_html += '<button id="delete_snap_'+item.id+'" type="button" style="position:absolute;top:0;right:0;padding:0;" class="btn btn-sm icon">'+x_icon+'</button>';
@@ -437,7 +437,7 @@ var collectors = {
                     var snapshot_data = new Uint8Array(thumbnail_data, 8/* offset .. skipping width, height */, data.length);
                     data.set(snapshot_data.subarray(0,data.length),0);
                     ctx.putImageData(imgData,0,0);
-
+                      
                     if(!version.startsWith(vc64web_version))
                     {
                         ctx.save();
@@ -451,6 +451,8 @@ var collectors = {
 
                     try {
                         teaser_img.src = tmp.toDataURL('image/png');
+                        teaser_img.style.width='auto';
+                        teaser_img.style.height='auto'; 
                     } catch(e) {
                         // fallback: leave src empty
                         console.error('toDataURL failed', e);

js/vc64_browser.js

@@ -491,7 +491,7 @@ rs232_message = "";
 //rs232_message=[];
 
 async function fetchOpenROMS(){
-    var installer = async response => {
+    installer = async response => {
         try{
             var arrayBuffer = await response.arrayBuffer();
             var byteArray = new Uint8Array(arrayBuffer);

js/vc64_ui.js

@@ -1,6 +1,6 @@
 const url_root_path= self.location.pathname.replace("/sw.js","");
 const core_version  = '5.1.3'; //has to be the same as the version in Emulator/config.h
-const ui_version = '2025_12_05'+url_root_path.replace("/","_");
+const ui_version = '2025_12_07'+url_root_path.replace("/","_");
 const needs_shared_array_buffer=false; //true when it runs in separat worker thread
 const cache_name = `${core_version}@${ui_version}`;
 const settings_cache = 'settings';