From abeaef698acfd4bc73ecc11e7f2e67a473d0da94 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Filip=20=C5=9Al=C4=99zak?= <fslezak@teonite.com>
Date: Mon, 16 Mar 2026 09:23:17 +0100
Subject: [PATCH 1/2] fix modal scroll

---
 .../pages/PlaygroundPage/PlaygroundPage.tsx   | 41 ++++++++++++++++++-
 web/src/shared/defguard-ui                    |  2 +-
 2 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/web/src/pages/PlaygroundPage/PlaygroundPage.tsx b/web/src/pages/PlaygroundPage/PlaygroundPage.tsx
index 5c84fd3661..53cb4895d4 100644
--- a/web/src/pages/PlaygroundPage/PlaygroundPage.tsx
+++ b/web/src/pages/PlaygroundPage/PlaygroundPage.tsx
@@ -6,7 +6,8 @@ import { ThemeSpacing } from '../../shared/defguard-ui/types';
 import './style.scss';
 import { useQuery } from '@tanstack/react-query';
 import clsx from 'clsx';
-import { useMemo, useState } from 'react';
+import { range } from 'radashi';
+import { Fragment, useCallback, useMemo, useState } from 'react';
 import Skeleton from 'react-loading-skeleton';
 import z from 'zod';
 import { CodeSnippet } from '../../shared/components/CodeSnippet/CodeSnippet';
@@ -33,8 +34,10 @@ import { Checkbox } from '../../shared/defguard-ui/components/Checkbox/Checkbox'
 import { CheckboxIndicator } from '../../shared/defguard-ui/components/CheckboxIndicator/CheckboxIndicator';
 import { Chip } from '../../shared/defguard-ui/components/Chip/Chip';
 import { Helper } from '../../shared/defguard-ui/components/Helper/Helper';
+import { Modal } from '../../shared/defguard-ui/components/Modal/Modal';
 import { Radio } from '../../shared/defguard-ui/components/Radio/Radio';
 import { RadioIndicator } from '../../shared/defguard-ui/components/RadioIndicator/RadioIndicator';
+import { RenderMarkdown } from '../../shared/defguard-ui/components/RenderMarkdown/RenderMarkdown';
 import { SectionSelect } from '../../shared/defguard-ui/components/SectionSelect/SectionSelect';
 import { SizedBox } from '../../shared/defguard-ui/components/SizedBox/SizedBox';
 import { SuggestedIpInput } from '../../shared/defguard-ui/components/SuggestedIPInput/SuggestedIPInput';
@@ -53,6 +56,8 @@ import testIconSrc from './assets/actionable-test1.png';
 export const PlaygroundPage = () => {
   return (
     <div id="playground-page">
+      <TestModalContentScroll />
+      <Divider spacing={ThemeSpacing.Xl} />
       <Card>
         <Button
           variant="outlined"
@@ -272,6 +277,40 @@ export const PlaygroundPage = () => {
   );
 };
 
+const TestModalContentScroll = () => {
+  const [isOpen, setOpen] = useState(false);
+
+  const getContent = useCallback(() => {
+    const res: string[] = [];
+    for (const _ of range(100)) {
+      res.push(m.test_placeholder_long());
+    }
+    return res.join('\n');
+  }, []);
+
+  return (
+    <Card>
+      <p>{`Test modal scroll`}</p>
+      <Button
+        text="Open Modal"
+        onClick={() => {
+          setOpen(true);
+        }}
+      />
+      <Modal
+        size="primary"
+        title={`Scroll test`}
+        isOpen={isOpen}
+        onClose={() => {
+          setOpen(false);
+        }}
+      >
+        <RenderMarkdown content={getContent()} />
+      </Modal>
+    </Card>
+  );
+};
+
 const TestPlanUpgrade = () => {
   const { data: license, isLoading } = useQuery(getLicenseInfoQueryOptions);
   return (
diff --git a/web/src/shared/defguard-ui b/web/src/shared/defguard-ui
index 814afe9b77..2eec841004 160000
--- a/web/src/shared/defguard-ui
+++ b/web/src/shared/defguard-ui
@@ -1 +1 @@
-Subproject commit 814afe9b77a41ed347f4af6c089540e1fcc6cd83
+Subproject commit 2eec84100419e662694b72bfece70893eba0ed3e

From ac66e701e789f1f71a6240daf7d381d7a117c2fa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Filip=20=C5=9Al=C4=99zak?= <fslezak@teonite.com>
Date: Mon, 16 Mar 2026 09:28:32 +0100
Subject: [PATCH 2/2] fix lint

---
 web/src/pages/PlaygroundPage/PlaygroundPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/pages/PlaygroundPage/PlaygroundPage.tsx b/web/src/pages/PlaygroundPage/PlaygroundPage.tsx
index 53cb4895d4..55854468b7 100644
--- a/web/src/pages/PlaygroundPage/PlaygroundPage.tsx
+++ b/web/src/pages/PlaygroundPage/PlaygroundPage.tsx
@@ -7,7 +7,7 @@ import './style.scss';
 import { useQuery } from '@tanstack/react-query';
 import clsx from 'clsx';
 import { range } from 'radashi';
-import { Fragment, useCallback, useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import Skeleton from 'react-loading-skeleton';
 import z from 'zod';
 import { CodeSnippet } from '../../shared/components/CodeSnippet/CodeSnippet';