Border artifacts when decreasing widget size

[Flexksx]

Describe the bug
I am trying to implement a dynamic notch app using Astal.
I am using a button for the hover functionality to increase and decrease the widget size.
The problem I see are some artifacts remaining when the widget is decreasing its' size.

To Reproduce
Install ags on NixOS as specified under the Using home-manager wiki instruction.
Create 3 files with the following code
DynamicNotchApp.tsx - app itself

import { App, Astal, Gdk, Gtk } from "astal/gtk3";

export default function DynamicNotch(gdkmonitor: Gdk.Monitor) {
    return (
        <window
            className="DynamicNotch"
            gdkmonitor={gdkmonitor}
            anchor={Astal.WindowAnchor.TOP}
            exclusivity={Astal.Exclusivity.IGNORE}
            application={App}
        >
            <button className={"dynamic-notch"}>
                <label>Dynamic notch</label>
            </button>
        </window>
    );
}

DynamicNotchStyle.scss - self-explanatory

.dynamic-notch{
    min-height: 30px;
    min-width: 300px;
    background-color: black;
    color: white;
    padding-left: 10px;
    padding-right: 10px;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.dynamic-notch:hover{
    min-height: 60px;
    min-width: 500px;
    transition: all;
}

app.ts - main launch point

import { App } from "astal/gtk3";
import DynamicNotch from "./DynamicNotchApp"; 
import DynamicNotchStyle from "./DynamicNotch.scss";

App.start({
    css: DynamicNotchStyle,
    main() {
        App.get_monitors().map(DynamicNotch)
    },
})

Launch the app with

ags run app.ts

Expected behavior
Smooth transition between the normal and the hover state of the widget.

Additional context
I spotted that it is an issue with the border of the button which produces this artifact. You can add a border to the .dynamic-notch class and you'll see that it produces the artifacts said.

2025-01-25.14-48-59.mp4

[Aylur]

Add a namespace to the window, disable layer animations and specify a time for transition

<window
  namespace="notch"

hyprctl keyword layerrule noanim,notch

.dynamic-notch {
    transition: 250ms;
}

[Flexksx]

bro I luv u bro I luv u bro I luv u bro I luv u bro I luv u bro I luv u bro I luv u bro I luv u bro I luv u bro I luv u bro I luv u bro I luv u bro I luv u bro I luv u bro I luv u bro I luv u bro I luv u bro I luv u bro I luv u bro I luv u bro I luv u bro I luv u bro I luv u bro I luv u bro I luv u bro I luv u bro I luv u bro I luv u bro I luv u bro I luv u bro I luv u bro I luv u bro I luv u bro I luv u bro I luv u bro I luv u bro I luv u bro I luv u bro I luv u bro I luv u bro I luv u bro I luv u bro I luv u bro I luv u bro I luv u

THANKS
It looks amazing