Greasy Fork

Subject: Feedback on "My Prompt": Navigation Bar Improvements & CSS Fixes

Note: Please be aware that this message and the code modification below were written with the assistance of an AI.

Hi OHAS,

First of all, thank you for this amazing script! It has really improved my workflow.

I wanted to share some feedback regarding the new Navigation Sidebar (Smart Nav). While the feature is excellent, the current UI can be a bit intrusive; it sometimes blocks the chat text, feels quite large on smaller screens, and there is a persistent empty rectangular space below the down arrow even when the menu is closed.

I have optimized the code for my personal use to make the bar smaller (60% scale) and highly transparent (ghost mode) so it doesn't obstruct the view. It only becomes fully visible on hover. I also fixed the CSS so the container height collapses correctly when the menu is closed, removing the empty space at the bottom.

My suggestions for future updates:

1. Maybe add an option to make the floating bar draggable.
2. Add a setting to control its scale or opacity.
3. My transparency settings below might be too low for general users (I prefer it very subtle), but the fix for the "empty space" height is definitely worth including.

Here is the modified injectGlobalStyles function with the improvements ":

function injectGlobalStyles() {
    const styleId = 'my-prompt-styles';
    if (document.getElementById(styleId)) return;

    let cssContent = GM_getResourceText("CSS");

    // --- User Improvements Start ---
    cssContent += `
        #mp-nav-container {
            /* 1. Positioning & Size */
            bottom: 20px !important;
            right: 10px !important;

            /* 2. Scale & Transparency (Make it unobtrusive) */
            transform: scale(0.60) !important;
            transform-origin: bottom right;
            opacity: 0.15 !important; /* Low opacity when idle */
            transition: all 0.3s ease-in-out;
            z-index: 99999 !important;

            /* 3. Fix: Remove empty space below the arrow */
            height: fit-content !important; 
            min-height: 0 !important;
            padding-bottom: 4px !important;
            overflow: visible !important;
        }

        /* Become visible and slightly larger on interaction */
        #mp-nav-container:hover {
            opacity: 1 !important;
            transform: scale(0.9) !important;
        }

        /* Fix: Hide the popup element completely when not active to prevent layout issues */
        .mp-nav-list-popup:not(.active) {
            display: none !important;
            height: 0 !important;
            width: 0 !important;
        }
    `;
    // --- User Improvements End ---

    const styleElement = document.createElement('style');
    styleElement.id = styleId;

    // Ensure safe insertion
    if (typeof setSafeInnerHTML === 'function') {
        setSafeInnerHTML(styleElement, cssContent);
    } else {
        styleElement.innerHTML = cssContent;
    }
    document.head.appendChild(styleElement);
}

"Note: This modified code is an AI-generated example to demonstrate the improvement; please refine it as you see fit for the official implementation." Thanks again for your hard work!

Hi, thank you for the feedback and for sharing your optimizations!

Regarding the "empty rectangular space" issue, I am unable to reproduce it on my end, which suggests it might be an interference specific to your setup. To help me investigate and fix this, could you please provide:

1. Browser details: Which browser and version are you using?
2. Platform: On which website/URL is this happening?
3. Screenshots: Could you send a clear image of this empty space so I can visualize the layout bug?

In the meantime, please remember that you can completely disable the navigation bar at any time via: Settings > Advanced > Advanced Options > Enable sidebar menu.

I’ll review your code suggestions as soon as I can identify the cause of the CSS conflict.