From 072c00c0735bd44382f4d08343ae661a7511a780 Mon Sep 17 00:00:00 2001
From: Heidi Puotiniemi <heidi.puotiniemi@op.fi>
Date: Mon, 5 Aug 2024 14:59:18 +0300
Subject: [PATCH] fix output element overlappig w/ flex-wrap

Signed-off-by: Heidi Puotiniemi <heidi.puotiniemi@op.fi>
---
 .changeset/breezy-rings-fly.md                               | 5 +++++
 .../components/TemplateOutputs/DefaultTemplateOutputs.tsx    | 1 +
 2 files changed, 6 insertions(+)
 create mode 100644 .changeset/breezy-rings-fly.md

diff --git a/.changeset/breezy-rings-fly.md b/.changeset/breezy-rings-fly.md
new file mode 100644
index 0000000000..315da5f950
--- /dev/null
+++ b/.changeset/breezy-rings-fly.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder-react': patch
+---
+
+Fixed bug in DefaultTableOutputs where output elements overlapped in below approx. 800 px wide screens
diff --git a/plugins/scaffolder-react/src/next/components/TemplateOutputs/DefaultTemplateOutputs.tsx b/plugins/scaffolder-react/src/next/components/TemplateOutputs/DefaultTemplateOutputs.tsx
index cbc299bf1c..70f3b1fa59 100644
--- a/plugins/scaffolder-react/src/next/components/TemplateOutputs/DefaultTemplateOutputs.tsx
+++ b/plugins/scaffolder-react/src/next/components/TemplateOutputs/DefaultTemplateOutputs.tsx
@@ -68,6 +68,7 @@ export const DefaultTemplateOutputs = (props: {
               justifyContent="center"
               display="flex"
               gridGap={16}
+              flexWrap="wrap"
             >
               <TextOutputs
                 output={output}