Material 3 floating placeholder is drawn outside item and gets clipped

The new Material 3 design has floating placeholders, but they are drawn outside item boundaries and get clipped depending on how the UI is created.

ColumnLayout {
        anchors.fill: parent
        TextField {
            placeholderText: "Text clipped"

                      }
        Item {
            Layout.fillHeight: true
            id: spacer
            width: 1

                   }

}

It's not always easy to add margins to workaround this