Mobile web app floating group pain - solution plus free Fudge

Tips
1

Thought I would post this in case anyone encounters it themselves and have not got round to asking a LLM.

If you have been building for hours and then finally test on and actual mobile device and find your floating group is not positioned on the page correctly - eg. you only get half of it, or its a slither of button then here is a potential fix (I say potential because all of you will have different phones, and who knows if its fully cross compatible with everyone’s device - either way, give it a crack).

Chuck and html element on the pages and paste in the code below. You will then need to set a class of ID (this is an ID in the code) which is: mobile_bottom_menu, to the floating group.

The code below does a few things, but in essence it adds some px’s to the bottom of the page so the floating groups ‘nudged’ up by enough to make the floating group visible and if you have controls on this, then operational.

It will also check to see if the phone /tablet is in landscape mode because the floating group issues is not an issue in this orientation - and wont apply the fudge.

you can also adjust the break point if you wish to tweak it further…

If you want to add more refinements grab the code and ask your favourite LLM.

<script>
// ----- CONFIGURE THESE VALUES -----
var ANDROID_BOTTOM_BAR_FUDGE = 50;   // px; adjust for your device
var MOBILE_WIDTH_BREAKPOINT = 600;   // px; tweak for tablets if needed
// ----------------------------------

function nudgeFloatingGroup() {
  var fg = document.getElementById("mobile_bottom_menu");
  if (fg) {
    var isPortrait = window.matchMedia("(orientation: portrait)").matches;
    var isMobileWidth = window.innerWidth < MOBILE_WIDTH_BREAKPOINT;

    // Only run fudge if in portrait AND on a phone-width screen
    if (isPortrait && isMobileWidth) {
      var safeInset = 0;
      try {
        safeInset = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--safe-area-inset-bottom')) || 0;
      } catch(e){}
      var fudge = (safeInset === 0 && /Android/i.test(navigator.userAgent)) ? ANDROID_BOTTOM_BAR_FUDGE : safeInset;
      fg.style.bottom = fudge + "px";
    } else {
      fg.style.bottom = "0px"; // Reset for landscape or tablet/desktop
    }
  }
}

window.addEventListener("resize", nudgeFloatingGroup);
window.addEventListener("orientationchange", nudgeFloatingGroup);
document.addEventListener("DOMContentLoaded", nudgeFloatingGroup);
setTimeout(nudgeFloatingGroup, 500); // Nudge after Bubble loads
</script>