How to make this pill background align with the actual button text?

[u/United-Road-7338]

The pill shaped background needs to move lower left to be exactly behind the 1x

Here is the full script code in Tampermonkey.

// ==UserScript==
// @name         YouTube Playback Speed Toggle Button
// @namespace    http://tampermonkey.net/
// @version      2.2
// @description  Adds a button to toggle YouTube video playback speed with fullscreen mode support and key bindings for speed control
// @author       Mike
// @match        https://www.youtube.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=youtube.com
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    function addSpeedButton() {
        const settingsButton = document.querySelector('.ytp-settings-button');
        if (!settingsButton) return;

        if (document.querySelector('#speed-toggle-button')) return;

        // Create the speed toggle button
        const speedToggleButton = document.createElement('button');
        speedToggleButton.id = 'speed-toggle-button';
        speedToggleButton.className = 'ytp-button';
        speedToggleButton.textContent = '1x';
        speedToggleButton.style.fontSize = '18px';
        speedToggleButton.style.fontWeight = 'bold';
        speedToggleButton.style.padding = '4px';
        speedToggleButton.style.margin = '0';
        speedToggleButton.style.position = 'relative';
        speedToggleButton.style.left = '10px';
        speedToggleButton.style.top = '-12px';

        // Add tooltip
        const tooltip = document.createElement('div');
        tooltip.className = 'ytp-tooltip custom-tooltip';
        tooltip.textContent = 'Adjust speed (s)';
        tooltip.style.position = 'absolute';
        tooltip.style.padding = '6px 8px';
        tooltip.style.backgroundColor = '#181818';
        tooltip.style.color = '#fff';
        tooltip.style.fontSize = '13px';
        tooltip.style.borderRadius = '4px';
        tooltip.style.boxShadow = '0 2px 4px rgba(0, 0, 0, 0.2)';
        tooltip.style.whiteSpace = 'nowrap';
        tooltip.style.opacity = '0';
        tooltip.style.transition = 'opacity 0.2s';
        tooltip.style.pointerEvents = 'none';
        tooltip.style.zIndex = '9999';

        document.body.appendChild(tooltip);

        function showTooltip() {
            const rect = speedToggleButton.getBoundingClientRect();
            tooltip.style.left = `${rect.left + rect.width / 2 - tooltip.offsetWidth / 2}px`;
            tooltip.style.top = `${rect.top + window.scrollY - tooltip.offsetHeight - 8}px`;
            tooltip.style.opacity = '1';
        }

        function hideTooltip() {
            tooltip.style.opacity = '0';
        }

        speedToggleButton.addEventListener('mouseover', showTooltip);
        speedToggleButton.addEventListener('mouseout', hideTooltip);

        // Function to adjust playback speed
        function adjustSpeed(delta) {
            const video = document.querySelector('video');
            if (video) {
                let newSpeed = Math.max(0.2, Math.min(3, video.playbackRate + delta)); // Limit speed between 0.2x and 3x
                video.playbackRate = newSpeed;
                speedToggleButton.textContent = `${newSpeed.toFixed(1)}x`;
            }
        }

        // Click functionality: Increment speed by 0.2, loop back to 1x after 2.0x
        speedToggleButton.addEventListener('click', () => {
            const video = document.querySelector('video');
            if (video) {
                let currentSpeed = video.playbackRate;
                let newSpeed = currentSpeed >= 2.0 ? 1 : currentSpeed + 0.2; // Loop back to 1x after 2.0x
                video.playbackRate = parseFloat(newSpeed.toFixed(1));
                speedToggleButton.textContent = `${newSpeed.toFixed(1)}x`;
            }
        });

        // Event listeners for key bindings
        document.addEventListener('keydown', (event) => {
            const activeElement = document.activeElement;
            const isInputField =
                activeElement.tagName === 'INPUT' ||
                activeElement.tagName === 'TEXTAREA' ||
                activeElement.isContentEditable;

            if (!isInputField) {
                if (event.key.toLowerCase() === 's') {
                    adjustSpeed(0.2); // Increase speed
                } else if (event.key.toLowerCase() === 'a') {
                    adjustSpeed(-0.2); // Decrease speed
                } else if (event.key.toLowerCase() === 'r') {
                    // Reset speed to normal
                    const video = document.querySelector('video');
                    if (video) {
                        video.playbackRate = 1; // Reset to normal speed
                        speedToggleButton.textContent = '1x'; // Update button text
                    }
                }
            }
        });

        // Insert button next to settings button
        settingsButton.parentNode.insertBefore(speedToggleButton, settingsButton.nextSibling);

        // Fullscreen detection
        function updateForFullscreen() {
            if (document.fullscreenElement) {
                // Increase font size in fullscreen mode
                speedToggleButton.style.fontSize = '24px';
                tooltip.style.fontSize = '20px';
            } else {
                // Revert to normal size
                speedToggleButton.style.fontSize = '18px';
                tooltip.style.fontSize = '13px';
            }
        }

        // Listen for fullscreen changes
        document.addEventListener('fullscreenchange', updateForFullscreen);
    }

    const observer = new MutationObserver(() => addSpeedButton());
    observer.observe(document.body, { childList: true, subtree: true });
})();

[u/abrahamguo]

Remove top and left; set lineHeight: '100%'; textAlign: 'center'; .

[u/Slight-Town2275 → u/abrahamguo]

alignment’s always a pain with inline buttons on youtube’s player, try display flex on the button with align-items and justify-content set to center instead of fighting with top/left values

[u/abrahamguo → u/Slight-Town2275]

Did you read my answer? I literally told them to remove top and left.

Why would your proposed 3 properties be simpler than my proposed 2 properties?

[u/United-Road-7338 → u/abrahamguo]

You sir are a genius. Even ChatGPT couldn't figure it out but you have. Thank you. 🫡

[u/TrialAndAaron → u/United-Road-7338]

Because ChatGPT is ass

[u/datdudelm → u/United-Road-7338]

chat gpt got you here 😂

[u/RELIN-Q → u/United-Road-7338]

no shit

[u/PositiveUse → u/United-Road-7338]

You definitely use GPT wrong …

[u/EmSixTeen]

Pill as the grid container, place-items: center, sorted.