How to fix positioning of button indicator-item?

[mattdimicelli]

Hi. I'm building my first app with DaisyUI, so I'm brand new to this. I wrote the following code:

import { BsFillPersonFill } from 'react-icons/bs';


const Header = () => {
    return (
    <header className='indicator'>
        <div className='navbar bg-primary'>
            <h1 className='text-primary-content'>Daily Progress Update</h1>
            <div className='text-primary-content'>
                <BsFillPersonFill />
                <select className='select select-ghost'>
                    <option disabled selected>Filter by team member</option>
                </select>
            </div>
            <button className='indicator-item indicator-center md:indicator-end indicator-bottom 
                btn-circle btn-accent flex items-center justify-center right-48'>
                +
            </button>
        </div>
    </header>
    ) 
}

Unfortunately, on cellphone size viewports, the "+" button is "cut-off" (the right side of the screen), so only half of it is visible.

I tried to reposition the button using tailwind utility classes (right-4), for example, but these utility classes are overwritten by DaisyUI's indicator class, I believe.

Any suggestions as to what would be a recommended way to fix this issue?

Thank you

[saadeghi]

Hey,
Currently indicator classes will overwrite right-* class because of higher CSS specificity.
I will fix this soon. I opened an issue here
But for now, you can use this:

indicator-item indicator-bottom !right-10 md:!right-0 md:translate-x-1/2

https://play.tailwindcss.com/x7qXT3DfdA?size=782x346

[mattdimicelli]

Thank you so much for your response and your hard work. Awesome!