Unusable Navigation at the end of posts when titles are long

[jatin69]

What's the bug

In mobile screens, If you have posts with titles 2-3 words long, the left-right navigation buttons at the end of post pages hide the overflowing text. As a result, the text on each button is visible for barely 4-5 characters conveying absolutely no useful information. So even though there are buttons for navigation, the text on them doesn't properly tell title.

Screenshot

Why is it happening

I checked out the html, the title text on buttons is loading completely, but css is hiding the overflow. If i set to be visible, the two buttons collides when both left-right posts have long titles.

Possible solution

The simplest solution is to stack the buttons in top-down method, whenever they are being used on the mobile screens.

I'm not well versed with css to stack them as desired. So if you'd be kind enough to help me out here and resolve this.

[hrishikesh-k]

I'm probably too late, but, maybe, before time for someone else. I felt the same way and I fixed it by changing my src/styles/navigation.module.css to this:

.navigation
    {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1024px;
        max-width: 100%;
        margin: 80px 0 40px;
        @media (--phone)
            {
                flex-wrap: wrap;
            }
    }
.button
    {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--light-background-secondary);
        font-size: 1rem;
        font-weight: bold;
        border-radius: 5px;
        width: 50%;
        cursor: pointer;
        appearance: none;
        :global .dark-theme :local &
            {
                background: var(--dark-background-secondary);
            }
        @media (--phone)
            {
                width: 75%;
                max-width: 75%;
                margin: 25px;
            }
        + .button
            {
                margin-left: 10px;
                @media (--phone)
                    {
                        width: 75%;
                        max-width: 75%;
                        margin: 25px;
                    }
            }
    }

If the titles are too long, it still won't fit them completely, but, at least, better than before.