Repository: unoplatform/uno
File: doc/templates/uno/main.js (JavaScript)

Code before:
// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE file in the project root for full license information.

document.addEventListener(
    "DOMContentLoaded",
    function () {

        initializeNavbar();
        
        // Move SDK badge into the .subnav container
        const sdkBadge = document.getElementById('sdk-version-info');
        const subnav = document.querySelector('.subnav');
        if (sdkBadge && subnav) {
            subnav.appendChild(sdkBadge);
        }
        
        // Cache key and expiration (1 hour)
        const CACHE_KEY = 'uno_sdk_versions';
        const CACHE_DURATION = 60 * 60 * 1000; // 1 hour in milliseconds
        
        // Flag to track if cached data was successfully displayed
        let cachedDataDisplayed = false;
        
        // Try to load cached versions immediately
        const cached = localStorage.getItem(CACHE_KEY);
        let cachedData = null;
        if (cached) {
            try {
                cachedData = JSON.parse(cached);
                if (Date.now() - cachedData.timestamp < CACHE_DURATION) {
                    updateVersionDisplay(cachedData.stable, cachedData.dev);
                    cachedDataDisplayed = true;
                } else {
                    cachedData = null; // Cache expired
                }
            } catch (e) {
                cachedData = null;
            }
        }

Review comment (suggestion):
@Jen-Uno also, for the narrow / phone version, the badge is not displaying well with the rest of the breadcrumbs next to it in some cases

<img width="502" height="325" alt="Image" src="https://github.com/user-attachments/assets/03f6af1c-d1ae-44d9-b9c9-81f6c99393ed" />



Code after:
// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE file in the project root for full license information.

document.addEventListener(
    "DOMContentLoaded",
    function () {

        initializeNavbar();
        
        // Move SDK badge into the .subnav container
        const sdkBadge = document.getElementById('sdk-version-info');
        const subnav = document.querySelector('.subnav');
        if (sdkBadge && subnav) {
            subnav.appendChild(sdkBadge);
        }
        
        // Check for overlap between SDK badge and breadcrumb
        function checkBadgeOverlap() {
            const badge = document.getElementById('sdk-version-info');
            const breadcrumbList = document.querySelector('#breadcrumb .breadcrumb');
            
            if (!badge || !breadcrumbList) return;
            
            // Get the last breadcrumb item (the actual visible content, not the container)
            const breadcrumbItems = breadcrumbList.children;
            if (breadcrumbItems.length === 0) return;
            
            const lastItem = breadcrumbItems[breadcrumbItems.length - 1];
            const badgeRect = badge.getBoundingClientRect();
            const lastItemRect = lastItem.getBoundingClientRect();
            
            // Check if last breadcrumb item extends into the badge's horizontal space
            // Add 16px margin to give some breathing room
            const margin = 16;
            const hasOverlap = lastItemRect.right + margin > badgeRect.left;
            
            if (hasOverlap) {
                badge.classList.add('hidden-overlap');
            } else {