The fix attribute

#Motivation

Some components from both DaisyUI and FlyonUI have little flaws, usually in rare cases, and they may be something you do not want to live with. To see such an example, go have a look at FlyonUI's lifted tabs example, and pick a theme with a wide border radius. The lines that form the border of the tabs misbehave quite obviously.
Lifted tabs in FlyonUI are incorrectly drawn in some themes

What we identified as flaws is opinionated: maybe the default behavior is exactly what you want, in which case you should leave it as is, but maybe it is not.

#The solution

Introducing the fix attribute: it makes the library append extra classes to the applicable components so that the borderline cases are properly rendered.

The 3 examples below cover:


  • Event 1


  • Event 2


  • Event 3


  • Event 4


  • Event 1


  • Event 2


  • Event 3


  • Event 4


  • 3 events
    with an icon


  • Event 2


  • Event 3


  • Misaligned event


  • 3 events
    with an icon


  • Event 2


  • Event 3


  • Misaligned event


  • 3 events
    with an icon


  • Event 2


  • Event 3


  • Correctly aligned event


  • 3 events
    with an icon


  • Event 2


  • Event 3


  • Correctly aligned event

#Supported component

Component

Effects

x-tabs

  • Forces box rounding if tab alignment is changed

x-timeline

  • Removes unused space for horizontal and vertical timelines.

  • Fix alignment of timeline events for horizontal timelines that have a mix of events with and without icons.