From df8e50db7e6caacb221738f30da2c46ebe0c8045 Mon Sep 17 00:00:00 2001
From: andreastanderen <71079896+standeren@users.noreply.github.com>
Date: Thu, 31 Oct 2024 15:20:05 +0100
Subject: [PATCH] fix: Adjust css so focus container for helpText in
 accessControl in SettingsModal fits content (#13952)

Co-authored-by: Jonas Dyrlie <jonas.dyrlie@gmail.com>
---
 .../Tabs/AccessControlTab/AccessControlTab.module.css       | 4 ++++
 .../components/Tabs/AccessControlTab/AccessControlTab.tsx   | 6 +++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/frontend/app-development/layout/PageHeader/SubHeader/SettingsModalButton/SettingsModal/components/Tabs/AccessControlTab/AccessControlTab.module.css b/frontend/app-development/layout/PageHeader/SubHeader/SettingsModalButton/SettingsModal/components/Tabs/AccessControlTab/AccessControlTab.module.css
index aa6750761e7..20d1386b923 100644
--- a/frontend/app-development/layout/PageHeader/SubHeader/SettingsModalButton/SettingsModal/components/Tabs/AccessControlTab/AccessControlTab.module.css
+++ b/frontend/app-development/layout/PageHeader/SubHeader/SettingsModalButton/SettingsModal/components/Tabs/AccessControlTab/AccessControlTab.module.css
@@ -3,6 +3,10 @@
   gap: var(--fds-spacing-2);
 }
 
+.helpText {
+  height: fit-content;
+}
+
 .docsLinkText {
   margin-top: var(--fds-spacing-10);
   display: flex;
diff --git a/frontend/app-development/layout/PageHeader/SubHeader/SettingsModalButton/SettingsModal/components/Tabs/AccessControlTab/AccessControlTab.tsx b/frontend/app-development/layout/PageHeader/SubHeader/SettingsModalButton/SettingsModal/components/Tabs/AccessControlTab/AccessControlTab.tsx
index 94c3c9c4156..13b1b895c8f 100644
--- a/frontend/app-development/layout/PageHeader/SubHeader/SettingsModalButton/SettingsModal/components/Tabs/AccessControlTab/AccessControlTab.tsx
+++ b/frontend/app-development/layout/PageHeader/SubHeader/SettingsModalButton/SettingsModal/components/Tabs/AccessControlTab/AccessControlTab.tsx
@@ -50,7 +50,11 @@ export const AccessControlTab = (): ReactNode => {
     <TabContent>
       <div className={classes.tabHeaderContent}>
         <TabHeader text={t('settings_modal.access_control_tab_heading')} />
-        <HelpText title={t('settings_modal.access_control_tab_help_text_title')} placement='top'>
+        <HelpText
+          size='small'
+          title={t('settings_modal.access_control_tab_help_text_title')}
+          className={classes.helpText}
+        >
           {t('settings_modal.access_control_tab_help_text_heading')}
         </HelpText>
       </div>