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;
            }
        }
        
        // Fetch and update SDK version dynamically from NuGet
        fetch('https://api.nuget.org/v3-flatcontainer/uno.templates/index.json')

Review comment (suggestion):
@Jen-Uno, with the latest changes, sometimes the badge is not visible in a narrow / phone ratio

<img width="483" height="306" alt="Image" src="https://github.com/user-attachments/assets/adecb94b-3d37-4a20-a979-600ced9c3a4a" />

<img width="498" height="299" alt="Image" src="https://github.com/user-attachments/assets/81ca59eb-6a42-4e1b-afa4-61358717ba9c" />

<img width="498" height="361" alt="Image" src="https://github.com/user-attachments/assets/b76c68a7-ff12-4002-a2ef-eb7c84b0da3b" />

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 {
                badge.classList.remove('hidden-overlap');
            }
        }