Duo Chat broken on latest (86.13.0+) in editor extensions

Broken styling for GitLab slash command cards in VSCode extension

@jannik_lehmann and I were testing the latest extension and GitLab UI versions and found that some of the styling is broken in VSCode. See the attached screenshot.

It seems that the container for the footer/gitlab slash command cards is not handling overflows correctly (the gl-card element).

Reproduction steps:

1. Check out the latest version of the vscode extension
2. Comment out all of the custom classes created in this file (this is so that we are working with an unthemed, raw version of the component)
3. Go to this commit on the @gitlab/ui package: 6b997772587c93d68e6f3e95e15150a9ad59e1b2
4. Run the following:

yarn build && yalc publish

5. Go to the vscode extension locally:

cd webviews/vue2 yalc add @gitlab/ui

(this adds the local package to vscode) 6. Build the extension by running:

npm run watch:desktop

and launch the extension host with F5 (or running the launch task)

7. Verify that the UI looks OK (screenshot attached)

   

8. Checkout this commit: dc28dbc1969e9d423bef13682a56cf1d9674267b

9. Run the same build steps as before and notice that the footer gitlab card is broken (screenshot attached)

   

It seems that the issue is related to some migration of the classes to tailwind utilities.

Here is the complete history of the file in question: https://gitlab.com/gitlab-org/gitlab-ui/-/commits/main/src/components/experimental/duo/chat/duo_chat.vue

@jannik_lehmann also mentions the breakage seems to happen in version 86.13.0.

Why is this issue in GitLab UI?

We've ruled out that this is vscode specific for now because we've commented out all of the custom classes in the extension and are working with the raw component.